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 currently on a project where a user can add "tabs" to their page. Something like:

Home | About | Blog | Cats | Music I Like

They are allowed to enter as many tabs as they want (well, in theory. Business side may put a limit of 50 or so).

What is a good way to handle an unknown number of tabs?

Management is leaning toward a drop down to handle them when there are too many:

Home | About | Blog | Cats | Music I Like | More v
                                            Vegetables
                                            Friends
                                            Places I've been
                                            Projects
                                            TV Shows

But this presents problems like how to show the user what tab they're on.

I also see a lot of places using horizontal scroll:

< Home | About | Blog | Cats | Music I Like >

While my browser does this with its tabs and I like it, I personally don't like this solution for pure-text tabs. But I'm open to arguments about it.

Has anyone ever worked with a similar situation? What did you ultimately settle on? How did your users like your solution?

Requirements:

  • Having horizontal "tabs" is a requirement; a vertical list is not acceptable.
  • No paging allowed
  • There is no concept of grouping, so the concept of organizing tabs and clicking on one to reveal related tabs does not exist.
  • There is no concept or "relevance". Tabs will not be organized by date or popularity, they will be organized arbitrarily by the user.
share|improve this question
    
Are the tabs all a fixed-width or are they based on the length of the words on the tab? –  JonW Mar 27 '12 at 15:09
    
Length of the words in the tabs. Though I may need to clip and set a maximum width in case the user gets carried away. –  Josh Johnson Mar 27 '12 at 15:10
    
The convention works pretty well on Android, and Metro really. I've seen it on iOS as well, I think it's fairly recognizable and acceptable. I think it's only less common on desktop because there usually is enough space on screen, and without Touch interacting with a horizontal scroll is more awkward. –  Ben Brocka Mar 27 '12 at 15:22
1  
Horizontal scrolling tabs can be tedious in the extreme. If you go down that road, consider chunking it: Previous 10, Next 10 for example. Note that this question will attract a variety of options and will be begging to have some solutions A/B tested, so that you can determine the best solution. –  Roger Attrill Mar 27 '12 at 15:23
1  
@KitGrose Yes, they are inherently bad for this task and your confusion is warranted. It is a requirement handed me by Management and they will not budge on it. For some reason they're really married to the idea of "tabs" for this. –  Josh Johnson Mar 28 '12 at 14:52
show 5 more comments

1 Answer

up vote 5 down vote accepted

The goal of a tab in this instance appears to be similar to the purpose of the bookmark bar at the top of most browsers:

Example Bookmarks Bar (Firefox)

Since the purpose is close to identical, I would recommend emulating the functionality and terminology as well. Don't call it tabs, don't visually emulate tabs; instead, call it a 'saved shortcuts' bar, and treat it like a list of saved shortcuts.

This simplifies implementation, as well as providing some obvious UI suggestions, such as supporting users dragging and dropping shortcuts onto the list, display favicons (if they can have different icons; if they are all internal and will always be identical then there is no purpose), highlight/buttonize on hover, etc.

By emulating an existing UI that serves the same purpose, you can build upon both the research done by these other designers, as well as the user expectations that have been built up about how this functionality should work.

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.