1

My application includes a simple table/grid view, that is initally populated with money values by an automated calculation.

Users will usually just take the values as they are, but they have the option to override any value by highlighting and overwriting the cell content. There also is an action to regenerate all values (modified ones will be reset).

Problem: everything is plain text and modified values look exactly like generated values. What are my options to indicate this?

/To sum up the answers so far, feasable possibilities for indication are:

  • font styles
  • font color
  • background color
  • icon

Many are tending to italic text for indication. This minimalistic, unobtrusive approach might be right one, but I'm still not sold to it, until I see some more research or real-world examples.

3

Give background colour for Updated or user modified text like light yellow or light green.

Or you can go with another option is Italic font style for the updates text.

3

If you have enough space, you could use -strikethrough- to indicate that there was default/prior data that has gotten replaced.

And though you mention font styles, I get the idea that you just mean bold, italic etcetera. But you could also use a different font entirely.

Combine those two options and you get something like this:

enter image description here

This definitely is a bit of a skeuomorph approach though, so whether it's an appropriate solution depends strongly on context and taste. But I didn't see anything like this mentioned yet, so I'm throwing it out there.

2

Your problem might serve as a good problem to you.

This is because you get to define principles onto your own website/app as to what refers to what.

You'll need to develop a Key map that showcases-

  1. Values that haven't been edited

  2. Values that are edited

  3. Values that are constantly being edited.

  4. Values settled after Editing.

I would recommend using a combination of colors and Plain, Bold and Italic font styles.

For a Value that hasn't been edited, a Gray/Black font in Plain text. For a Value that has been edited, Blue in Italic. For a value that's constantly being edited, Orange in Italic. For a Value that has settled after Editing, Bold Green.

Black suggests a bold, untouched object.

Blue suggests calm movement.

Orange suggests excitement and activity.

Green suggests a value that all have agreed upon.

I think using icons for this will be weird since you can do so much with text alone.

  • I'm not sure I understand the difference between values that are edited and values settled after editing. And it doesn't sound like there is a case in OP's post where things will need a "constantly being edited" option. I like the ideas behind the different style choices but you have to think you are now introducing 4 distinct states, 4 colors to represent those, and 2 font-styles. That is a lot for the average user to understand. – DasBeasto Sep 3 '15 at 20:48
2

Display an icon to symbolize that the value has been edited

UX.se uses an arrow icon next to a post to indicate that it has been modified.

enter image description here

You could use the same technique in a table of data.

enter image description here

Since you indicated you like the icon idea but are unsure of the pencil here are a few more ideas.

Visual Studio signifies a document has been checked out for editing by putting a check mark next to the value, this will give more of a "completed edit" feeling than the pencil, they also use a user icon to signify it was checked out by someone else but I think that it would sufficiently signify that a "user edited this".

enter image description here

You could also combine any of these ideas make the icon more descriptive and understandable: enter image description here

Whent the pencil is combined with a user silhouette it helps remove the idea that this is an actionable edit button.

  • 1
    I like the suggestion using icons. But the icon choice in this case might not be ideal, some could misinterpret the pencil as "editable" or "click here to edit" instead of "this has been edited". Also, in the UXSE example, modified means that a comment has been expanded or corrected by (usually) the same user who made it. Whereas in my case, a user will rather overrule something generated by the system. – J_rgen Sep 4 '15 at 6:55
  • @J_rgen good point, it is hard to signify past tense with icons especially with such abstract ideas like editing but I have updated the answer with some more options that will hopefully point you in the right direction. – DasBeasto Sep 4 '15 at 12:31
2

Provide an icon suggesting edition by a human

Along with DasBeasto's answer, I think that an icon representing the modified rows is the right solution.

  • Type emphasis such as bold and italics do not convey any particular meaning here, and it will be indeed difficult to distinguish between default and modified values if the majority of the rows are modified. Emphasis holds meaning in a writing context (to stress or use foreign words and so on), but isn't applicable here.
  • Font coloring or background coloring share the same problem as mentionned above, and adding the color blindness issue which would lead to choosing colors with sufficiently different contrasts.

To help emphasize the difference between computer generated and human edited rows, I would suggest employing an icon that brings the idea of a human user. Below is the icon used in the Connect tab of Apple Music, which conveys this "identity" idea:

Apple Music User Icon

This icon can be simplified to be displayed at smaller sizes and to bring less visual clutter when repeated on many consecutive rows. Also, I'm sure there are dozens of ways to express this "humane" idea.

Edit: DasBeasto updated his/her answer to evoque the same idea while I was writing this one.

  • +1 - looks like we came to the same conclusion that the human/user icon is a better alternative for showing user edited rows. – DasBeasto Sep 4 '15 at 12:52
  • Yes, it is the author's comment on your answer about the pencil icon that made me go in that direction too. – Benoît L. Sep 4 '15 at 12:54
1

The most simplistic and eye-peaking method is using italic or bold text.

If you have a TODO-List like this:

  1. Sleep
  2. Do This
  3. Do That
  4. Do nothing, you earned it

In this example, completed objectives are unformatted ("Sleep"). Everything I still need to do is bold ("Do This", "Do That") and user edited objectives are italic ("Do nothing,..")

  • 1
    Could you please expand on this answer. As it is it functions more as a comment than a stand-alone answer. – Mayo Sep 3 '15 at 16:37
  • Someone who doesn't know what the style means, sees just two different text styles, so the edited one could be Nr. 3. But it could also be both Nr. 1 and 2. – J_rgen Sep 4 '15 at 7:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.