2

enter image description hereI have a grid, and I'm thinking about adding a legend to it. Like there are legends for charts.

Here's what would go in the legend:

  1. 70% of columns are editable. Known pattern would be to put a pencil icon in each column. But I end up with an army of pencils...:)

  2. Some line items are missing data. I need to label them, so user knows.

  3. There is one column where content can be appended; not edited.

I thought of color-coding this 3 things. But, come to think of it, I need a non-color reliant way to communicate this info., for ADA purposes. So, I end up with icons, anyway...

Right? Any ideas?

2 Answers 2

3

Find out how your users need to modify data, and how often. Instead of a legend, just state where data is missing.

Bulk edit

If your users are modifying a decent amount of fields, you could place a primary button to 'edit', and any editable content is revealed by form inputs (text field, dropdown, etc...)

enter image description here

enter image description here

Pro

  • One button press reveals and editable content
  • In view mode, table is unencumbered by pencils, tooltips, etc

Con

  • Users are entering a mode, which might feel heavy if they just want to edit one small field

One at a time editing

Another approach is have editable fields show signifiers on hover (i.e. edit pencil):

enter image description here

Pro

  • Viewing not distracted by icons and indicators

Con

  • User has to mouse across lots of content to see exactly what's editable (which can be confusing if certain fields in the same column are not editable for whatever constraint)
1
  • Very helpful, @Mike M. I actually asked my client how often will content be edited. 3 or 4 columns will be edited in 1% of cases. Rest, I am waiting to hear. I don't know how to add an image to my response/comment. So I added the visual to my original post.
    – Rosebud
    Feb 27, 2019 at 22:02
0

I have not seen any specific design guidelines on legends when it comes to tables, but I assume it would be similar to how you should style legends on charts and graphs.

The known design patterns for dealing with some of the interactions that will remove the need for the legend include:

  • creating a toggle/button to switch between view and editing modes where only the editable cells will change state (or you can actually just vary the style of the cell to make the editable ones look like input fields)
  • creating a hover-over effect (i.e. tool-tip) where the icons are displayed (I assume that you are doing this anyway?)
  • creating columns specific for different statuses (e.g. override applied) so you don't need to apply styling to the entire row

You may need to try a combination of the above strategies (including your own solution) to see what works best with the data to be displayed and test with end users, but I think the design patterns I mentioned seemed to be more common than using a legend in a table.

I want to point out that the rationale you mentioned for not wanting to end up with 'an army of pencils' could be the same with having lots of rows with missing data resulting in 'an army of exclamation points'.

Just keep in mind that as long as you don't intend to introduce too much more variation or types of content to the table, all you need to do is make sure that design decisions are consistent and simple. That way at least the users will be able to learn it quickly and get used to the design.

1
  • that's an excellent point! To ask my client how often will there be missing data. On that note, I may try a more subtle warning icon. Perhaps not solid but hollow. Like you said, will need to try different things. Thank you for sharing your thoughts. Much appreciated.
    – Rosebud
    Mar 1, 2019 at 17:51

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.

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