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.

I'm trying to design a portion of a web interface that allows users to tag items and view all items with a tag or set of tags on them - think gmail, if gmail allowed you to easily select multiple tags to view all messages with all of those tags. What's the best way to show the user which set of tags they're currently viewing?

Simple highlighting works for one tag, but if the list of tags is longer than the screen they won't be able to see all of them at once, leading to it not being clear which tags the user has selected. Adding to this problem, I've got a small amount of space to work with - the entire tag and item interface is about 300x500 pixels, so displaying selected tags in a long horizontal list isn't an option.

I was thinking of creating a secondary list on top of the tag list with the selected tags (sort of like those drop-down lists that have the USA and other countries emphasized), but I'm wondering if there's a better alternative.

share|improve this question
    
Excellent UX consideration. –  Babak Naffas Oct 20 '10 at 20:19
add comment

5 Answers

Use the Faceted Navigation pattern. Amazon.com does a great job with it:

Amazon faceted navigation

(screenshot from these search results for Nintendo DS - note that you can keep yours shorter if you have a vertical constraint)

Some things of note:

  • Very clear communication on what the currently selected item in each facet is (in this case, black bold vs. blue for links)
  • Great legibility by not making each item a hyperlink, even though they're all hyperlinks - in this case, it's more useful to prioritise legibility over the hyperlink underline pattern
  • Each facet displays how many results are available if you were to click on them. Kind of complicated to implement sometimes, depending on your search backend.
  • The right controls depending on what kind of facet you're dealing with, as well as great copywriting and the right wording ("Last 30 days" for dates, since you don't care about specific dates in this case, etc)
  • The ability to step one level up with each facet, essentially "undoing" your selection in that facet. Note the use of the < as opposed to a red cross (x) like many other sites have.
  • Combine this with the breadcrumb navigation pattern as Amazon has done for an extra dimension of usefulness in case people are scanning top-down and not looking in the left/right column

Don't worry too much about not being able to see every single selected thing if many are selected - it's a common faceted navigation pitfall to fall into. Users will get that there are more selected options further down the page if they've made many selections (imagine selecting one of each facet in the Amazon example). To offset things a bit you can group selected facets at the top as @onnodb suggests, though I wouldn't hide them behind a click (like in a select control).

share|improve this answer
add comment

I'd say that it makes perfect sense to create this 'secondary list' of selected tags at the top of the list, like so: (great idea, btw)

Selected tag 1   (X)
Selected tag 2   (X)
Selected tag 3   (X)
-------------------
Tag 4
Tag 5
Tag 6

Give the selected tags a different background colour, add an "(X)" button to remove them, and I'd say you have a very useable UI for this.

share|improve this answer
    
Good answer, especially if you can provide some kind of animation for when deselection banishes an item to a position off-screen. I would re-number the tags in your example and move the screen bottom to make your idea clearer though: selected Tag 1 (x), selected Tag 4 (x), selected Tag 6 (x), Tag 1, ---screen bottom---, Tag 2, Tag 5 –  A.M. Aug 8 '13 at 20:38
add comment

Since you have a limited real estate to work with you could implement the following. Place the tag list in a dropdown and have a plus button which adds another row with a dropdown of tags. This way the only tags that are displayed are the ones that the user has selected.

enter image description here

share|improve this answer
add comment

Just off the top of my head...

Option 1: Modify the 'title' attribute to show the selected items on hover. Option 2: Use jquery to add a hover event for the list that traverses the element and lists the selected items.

share|improve this answer
    
Mouseover is certainly an interesting option that I hadn't really considered - my one concern is that it won't be possible to remove a tag without scrolling to it, but given the limited amount of space I suppose I can't have everything. –  sslepian Oct 20 '10 at 23:32
    
Add an 'x' or some other icon to each listed item for the mouse-over view. Click that to deselect the item. –  Babak Naffas Oct 21 '10 at 0:12
    
Just remember you don't have mouse over on touch devices –  Nir Oct 21 '10 at 12:12
    
I have noticed that a tap on an iPad/iPhone works in much the same way as placing a mouse cursor on that location. –  Babak Naffas Oct 21 '10 at 17:25
add comment

Well there are a few ways to do this:

1) As you mentioned you can highlight the tags that are selected, while still maintaining the their order in the list. To overcome the problem of users not being aware that are selected tags not showing on the page you can do something to bring it to their attention - something like blinking arrows at the bottom of the tag section of the page to inform them that there is something important if they scroll down

=Tag1=
Tag2
Tag3
vvvv
-----------------------Screen End
Tag4
=Tag5=

The == mark highlighted tags and the vv are the blinkings arrows

2) Also you can make that additional list at the top, but remove the tags from the original, so that you always have a consistent height to the tags section

3) You can have the selected tags showup as a vertical list under the heading of the search results.

Tag Section | Search Results:
            | xTags1 xTag2 xTag3
            |
            | [Search Results Go Here]

Note the little xs next to each Tag name; these will allow the user to quickly remove tags and the results should change accordingly.

I would prefer options 2 or 3. 3 Might be better, because users might get a little surprised that the list of tags is changing order as they keep selecting tags.

share|improve this answer
add comment

Your Answer

 
discard

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

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