Making it clear which items in a long list are selected

Question

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

Answer 1

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

(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).

Answer 2

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.

Answer 3

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.

Answer 4

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.

Answer 5

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.

Answer 6

I know it's pretty old question, but it still remains valid for nowadays application in my opinion.

For the answer I got the inspiration from Visual Studio vertical scroll bar:

• the slider height corresponds to the size of the on-screen area compared to the total length of the content
• thin horizontal blue line shows where the cursor is currently placed
• dark yellow bars mark the lines where search term was found

For the OP question - if you have a list of items that exceeds the screen capacity you must use the slider. You can use the slider to show where the selected items are in the list.