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.

This is purely for a mobile website that must have horizontal tabs.

The difficulty is that there could potentially be 5-7 tabs, with 5 being more likely. The text for each tab is long, which could result in poor visibility of the tabs.

I am struggling to think of different ways and approaches to make this a good experience for mobile users.

Does anyone have any suggestions to accomplish this design with those restrictions in mind?

share|improve this question

3 Answers 3

up vote 5 down vote accepted

This sounds like it could also apply to a horizontal main navigation for a site. Brad Frost has several options for responsive navigation systems, but the next two seem most appropriate to what you're trying to accomplish from his options. Here are those two and a third approach:

Dropdown Tabs

A popular way to solve this is to switch from tabs to a dropdown. Dropdown Responsive Tabs

Stacked Tabs

Another approach would be to stack the tabs. Stacked Responsive Tabs

Scrollable Tabs

Another option that's been appearing on mobile interfaces are scrollable tabs. Scrollable Tabs from the Android Developer site

share|improve this answer
    
Cheers, very useful. Are there any demos of option 3? I'm on iOS so can't see the play market. The tabs are for a step by step linear process. –  Paul May 11 '13 at 22:34
    
Struggling to remember the best example I've seen. It was a mobile site, not app. sports.yahoo.com's mobile site has a similar pattern at the top for sports scores. –  Matthew Moore May 11 '13 at 23:08
    
As an android user all I can say is PLEASE NEVER IMPLEMENT SCROLLABLE TABS! –  MatthewFord May 14 '13 at 23:39

Here goes one ios example what @Matthew has suggested as Scrollable tabs:

TOI

share|improve this answer

I would also add that you can have it centered and wrapping on two lines (e.g. three items on top line and two below). You may need to make slight changes to design such as make them appear more button like and are easily click-able.

share|improve this answer

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.