In case of several very long pages organized by tabs, is it better to repeat tabs at the bottom or to have a "Go to top" button?
download bmml source – Wireframes created with Balsamiq Mockups
4
-
Is this mobile or? Is it common to hit the end of one page and then want to enter a different tab? – Ben Brocka Jul 10 '12 at 19:21
-
1if it's a very long page, then I'd argue tabs are the wrong metaphor in the first place. – DA01 Jul 10 '12 at 21:43
-
It is not a specific layout for mobile, although this web page could be visited through desktop, tablet and smartphone devices. – user15161 Jul 11 '12 at 17:15
7
Rather than have really long pages inside the tabs, fix the height of the tabs so that they occupy the full height of the screen and use a scroll viewer inside the tabs to display the content:
download bmml source – Wireframes created with Balsamiq Mockups
This way the tabs are always visible at the top of the screen where the user expects them to be. If there's enough height the scroll bar should be hidden.
3
You already took a look at how the component NavBar twitter? Seems like a good solution to your problem.
Here is the showcase of the components that created Twitter, scroll down the page and notice the menu. Twitter Bootstrap
If you develop using GWT, this is a fork of the twitter repository, with the components for GWT. GWT Bootstrap
-
1Interesting. I like the way it behaves: the user can either scroll down or click the tabs. However this approach would not be appropriate for me as the content of each tab is different from each other (I don't want it to be on the same page) – user15161 Jul 10 '12 at 22:58
2
This is very unusual and I'm not sure it's at all effective. Users might not understand whether these are the same tabs as above or some other tabs (internal maybe), and they might scroll to the top just to check this. On the other hand "Go to top" is kind of 90's.
Many websites use tabs with very long pages. Fixed tabs as had been suggested are one solution. Another could be to replicate the navigation, just not in the form of tabs:
download bmml source – Wireframes created with Balsamiq Mockups
answered Jul 10 '12 at 19:39
-
Wouldn't you think that this could affect the natural flow of the tabbed navigation? Tabs help as containers, having a different type of link at the bottom might confuse users. – edgarator Jul 10 '12 at 23:44
-
Depends on how you design it. Look at some simple product websites, most of them have some sort of tabs at the top and some navigation links at the footer. Everyone understands that the links in the footer are the same tabs as at the top. The downvote was a nice touch. – Vitaly Mijiritsky Jul 11 '12 at 5:20
-
It felt natural to do and it was kind of an impulse, then I thought perhaps I shouldn't do it, and undid it, but then I thought I should stick to my beliefs. Sorry about that. That's why I commented, because I felt it could be interpreted somewhat harsh. Anyway, can you provide some examples? :) – edgarator Jul 12 '12 at 0:27
-
This is not a great example, but it's the first one I stumbled upon and it illustrates the point: catydesign-studio.com/about – Vitaly Mijiritsky Jul 12 '12 at 6:08
-
1
Tabs at the bottom of the page are unusual, and therefore would likely be overlooked by the user (or cause confusion). Out of both options, I prefer the "Go to top" button.
If there is a logical flow between the tabs, consider having a link at the bottom to lead the user to the next tab. You could also have a few related links that lead the user to other tabs.
Another option is to have the tabs be static, so that they always appear on the user's screen. The downside to this is that they could take up valuable real estate that the user would value for reading purposes.
-
Thanks Andrew, the fact is that I'm already having a fixed tab system to the left hand side for categories (higher level) + I'm having my main menu to the very top that's not fixed. – user15161 Jul 10 '12 at 23:03
