6

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.

1
  • 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, 2010 at 6:47

4 Answers 4

5

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."

0
4

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.

0
0

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.

2
  • 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, 2010 at 12:34
  • @Rahul Good point.
    – Sruly
    Sep 1, 2010 at 13:44
0

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".

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.