Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

There exists a narrow table listing about 250 customers in alphabetical order. Each row contains the customer's name, account code, city and state.

I need to indicate in each row if the customer account has been edited and whether 2 pieces of data have been filled out (say for example the 2 pieces of data are annual sales and the industry the customer serves).

Space is at a premium and I don't want to add a lot of noise to the page. A salesperson needs to be able to quickly scan the list and determine which accounts need to be updated.

Currently the words 'updated', 'sales', and 'industry' appear on each row in red or green depending on the situation. I feel this is bad for page noise, space and colorblindness.

share|improve this question
2  
Could you show us a screenshot or mockup? It'll be easier to comment on page noise and space that way. –  Rahul Sep 1 '10 at 6:47
add comment

4 Answers 4

up vote 5 down vote accepted

First of all, you should never use red and green to differentiate between things, since that is the most common type of colour blindness.

To indicate if a row has been edited, the text could be displayed in a different colour than rows that have been edited, with the unedited rows emphasized (ex. medium-grey for edited and black for unedited). Doing this will already reduce the width of the row text.

To indicate if the two properties have been edited, you could have a small icon representing each instead of the full text "sales" and "industry."

share|improve this answer
    
+1 for using the unread email convention. –  Ryan Shripat Sep 1 '10 at 18:04
add comment

What's the goal of the page? Listing customers in alphabetical order, or scanning customers for updated/sales/industry? If the latter, throw out the alphabetical ordering. Or add sort options to the page. Then create a grouped variation of the table that groups by each of the needed attributes. It could look something like this:

- Customers ------------------------------------------
------------------------------------------------------
Code | Name              | City            | State   |
++++++++++++++++++++++++++++++++++++++++++++++++++++++
Updated
++++++++++++++++++++++++++++++++++++++++++++++++++++++
011  | Vidbot            | Dallas          | TX      |
212  | Rahul             | San Jose        | CA      |
++++++++++++++++++++++++++++++++++++++++++++++++++++++
Sales
++++++++++++++++++++++++++++++++++++++++++++++++++++++
187  | lori.lee          | Boston          | MA      |
etc...

The table will be more scannable for the purpose you're describing, and you won't have to use icons, colours, or typography weight to accomplish it. All you need is a sort option control somewhere. Since page state would be pretty binary in this case (either grouped or alphabetically sorted), you could try various controls, like a check box or a hyperlink. I would advise against a dropdown menu, though - for just one option it's a bit superfluous.

share|improve this answer
    
Thanks - this will likely be rev 3 of this page. –  Vidbot Sep 1 '10 at 7:18
add comment

It is a common practice to use a pencil icon to mark things that have been edited. You can add a small icon at the beginning of the row of the lines that have been edited.

share|improve this answer
2  
It's also common practice to use a pencil icon for buttons that allow you to edit things, though. I think there would be potential confusion in this case. –  Rahul Sep 1 '10 at 12:34
    
@Rahul Good point. –  Sruly Sep 1 '10 at 13:44
add comment

Currently the words 'updated', 'sales', and 'industry' appear on each row in red or green depending on the situation. I feel this is bad for page noise, space and colorblindness.

Or, put the words/icons in a header row thus defining three columns, and use checkmarks where you actually have the words.
This leads to checkmark patterns that the users learn quickly to recognize, like "check, ckeck, empty" for "updated sales, no industry".
I would explore the possibility of setting a heading that stays at the top of the list instead of scrolling off sight.
Also, to save horizontal space, I would design the column headings to make them as narrow as possible, like for example using a small font, abbreviations, rotated text or all.
If it was useful I'd add a client-side faceting feature, like "show only those with this checkmarks pattern".

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.