To use or not to use horizontally scrollable tabs? You can see them in iTunes store or see this demo: http://flowplayer.org/tools/scrollable/index.html#demos Sometimes I am little bit surprised while I am scrolling vertically and the content start to scroll horizontally.

5 Answers 5


I think it is only something 'fancy' but there is no really added user experience in it!
If it would fit your design better, then use it, but otherwise there is no real need for this... tab navigation works great without animation!


The usefulness of the tabs is questionable at best. I really don't see the added value. For displaying slides like this, a much better approach IMO is to use something similar to displaying pictures, which a lot of web surfers are familiar with these days. This example uses thumbnails:

Example of slides with thumbnails

Another approach is to forgo the thumbnails and display little circles:

Example using small circles instead of thumbnails

If the order of the slides is important, you can also display numbers instead of circles. If you are concerned that your site visitors may not get it, you can have the slides auto-play. The auto-play would then stop when the user clicks on a thumbnail or circle.


Although the scrollable tabs "look funky" I'd personally lean towards "regular" tabs.

The visual metaphor that tabs present is separate pieces of information organized into individual tabs. With the scrollable tabs, the tabs become more like notches in a long horizontal slideshow... which IMHO, isn't what the tabs "normally" represent.

Its a case of Don't Make Me Think (Steve Krug) for the user. If the UI behaves significantly different than expected - it may confuse the user and distract them from their task.

That said I'll confess I'm a sucker for sexy UI and thus if you can squeeze in some sort of animation between tabs when switching, that still makes them feel like tabs (maybe quickly fadeOut/fadeIn the content?) - I say go for it.


I like to look at real world metaphors to start my thinking process for designing in the virtual world. It is easy to find real world, tried and true, familiar metaphors when thinking about navigation since we have been designing navigation and organization tools for the real world for so long.

Tabs in the real world are designed for both organization and navigation of broad categories. If you think about tabs found in a 3 ring subject binder or a cookbook or your car's owner's manual, the tabs are used to quickly find a general category. IMO, if you have so many tabs that you need to scroll through them, either you have too many or you need to use a different layout or a metaphor other than tabs.

A different tab layout could be stacking the categories vertically in a column, like a Rolodex. Arranging the items vertically would allow you to fit more items than you could horizontally. Unlike the Rolodex, the content appears to the left or right of the tab so this makes a rather odd looking "tab" but it is being used more and more in the virtual world.

A different metaphor might be a table of contents, a restaurant menu, a shopping mall directory, all of which are typically organized from top to bottom as well. In this case, scrolling the categories seems more acceptable, since in the real world these category list examples can be several pages long. If you are scrolling categories below the fold or beyond the page boundary, I would use a separate scrolling pane or mechanism. Unlike a tab, the scrolling list of categories has to move independently from the content. Just be sure that whatever item is selected in the scrolling list, is somehow repeated in the detailed content pane to reinforce the connection between selection and the detail content. example of a scrolling thumbnail list on my website



Your concern make sense to me because usually all the websites are vertically scrolled and by providing horizontal scroll you break the flow of the user's reading experience. Now this begs the question what exactly is the data that you want to display inside those tabs.

This matters because if its just bunch of really nice graphical images then it may not be a bad idea specially if you use some tips from "Hisham" answer above. If you are providing lots of text then it may not be a smooth reading experience for user.

On a side not , in design minimalism is the key. The demo you have shared has clickable tabs as well as next / prev button which does not make sense to me. Why provide two click-able areas to do the same thing.


Your Answer

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