7

I am working on an interactive map which displays various pieces of geographic information about a person - places worked, education, holidays taken, home addresses etc.. All in all there are 9 categories.

I am representing the data using colored circles to depict location (information about location revealed on rollover).

As there are so many categories I am going to need a color code legend of some sort.

I would like to add functionality also that allows user to view a specific category or a number of categories at any one time, depending on their wants. So for instance if user wishes to just view job history, he/she selects that in legend and only corresponding gree circles are displayed, the others fade out to about 50% opacity.

I had initially thought about putting checkboxes beside each legend item and user could turn them on/off. With an option for 'view all' at the top. This however feels too clunky too me and will add too much noise and visual weight to the device.

Would it work better to make each legend a button in itself with a subtle on/off state - once again with a 'View Al'' button on top?

Should I even been making a legend interactive or are there better techniques?

6 Answers 6

5

The interactive legend is a good option to go for, but people need to know that it is interactive in the first place.

Using checkboxes may not be the most visually appealing method (although there is a lot that you can do to make them look good), checkboxes are probably the most discoverable method that you will find. You won't have to explain much to customers and it will work well.

Using buttons will likely to be problematic in terms of discoverability, even though they may look cleaner. Also if you are changing the colours to indicate on and off, they will probably be subtle changes and hence be poor accessibility wise (think colour blind or visually impaired people).


As an example of a good looking checkbox, here is one that Roger Attrill made

enter image description here

2
  • +1. What the question is describing is several buckets or layers of data; a "layer list" with checkboxes is discoverable, but a key is usually not interactive so that's harder. Oct 12, 2011 at 15:20
  • Very nice checkboxes there! If you were to add colored legend icons to each item would you guys think it would work best with legend icon (colored circle) to the left of the Item name and checkboxes to the right?
    – Spiral13
    Oct 12, 2011 at 15:27
4

One option that Apple uses in its iCal calendaring application is to make the colour coding indicators into checkboxes, like so:

iCal's calendar list

The colours for each calendar are modifiable by the user (I choose to use blue for all my personal calendars and green for all my work calendars, with other calendars in other colours as necessary).

This one list therefore serves as both a legend and a menu for filtering the display.

2
  • Slightly off-topic, but did you know that "protecting" your image through crude rasterization is not secure at all? Check this article
    – Pasha
    Mar 26, 2013 at 9:36
  • @user958624 Yeah, I've read that article before. There's nothing there that's particularly sensitive, just personal email addresses. Good reminder not to depend on it though, thanks for that!
    – Kit Grose
    Mar 26, 2013 at 22:29
1

If you design for returning users, you may consider a first time use walktrough with arrows and descriptions for certain design elements.

This allows you to use a very clean interface and users will still learn how to use it.

However this is not the best option if you anticipate users to use your interactive map only once or very seldom!

An example from the linkedin app

1

Given that you are creating a mapping application - the Google Maps dropdowns might be a useful UI example to follow.

enter image description here

0

Just looking through some of the interactive features on the NY Times website (I am not subscribed, so I could only look at around 10 pages), you'll find that none of the legends are interactive in anyway (other than to show hover-over information). I suspect that making the legend interactive might be confusing for the user to try and switch between different sets of information rather than having a fixed area for this using standard controls (e.g. dropdown list or checkboxes as suggested).

0

The checkboxes for the different services are nice, use them. They are the common UI I find in maps for enabling / disabling kinds of services. I have them in the Maps app of my iPad, in Google Maps, in the maps from the RATP

The iCal example given previously by @Kit is nice too.

Making each legend a button would not tell the user “I am a button, you can click me !” Moreover, conveying the on / off state only by colour would not be accessible — here I first think of coulour-blind people, but this would have more general accessibility problems.

Your Answer

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

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