Toggle Buttons vs Tabs

Question

What are the problems with using toggle buttons instead of of tabs? I have a design where action buttons and tabs share the same row.

I have 1 row with action buttons in it. In this same row I will use tabs to display different page views. I have the option to show these tabs as traditional folder tabs or toggle buttons. Which of these 2 options is the most user friendly?

Answer 1

For me toggle buttons are a metaphor that was created for touch screen devices that don't transfer very well to desktop applications. They present a touch, hold and slide interaction and horizontal movement while keeping the mouse button pressed is a difficult movement to achieve.

Without using numerous toggle buttons they may also, depending on your design, struggle to portray which mode the button is on. For instance, if it were a volume on/off toggle will your design clearly show the current state without the user needing the opposite state to understand?

I think a third option you could consider is a button with an icon that represents a page view. Then when clicked a simple menu drops below with the 2 options. A 'tick' icon next to one option would indicate the current state. See my screenshot as an example.

Answer 2

The way I see it:

• toggle buttons are a for selection - ie, collecting data from the user (set this to "on", use this one instead of that one, choosing from a list of options, etc) without changing the user's "location" in the app. For example, "do you like blue or red?"
• tabs are for navigation - ie, displaying different parts of your application to the user (show me this screen, take me to this "place") without changing data. For example, "Show people who like blue" or "show people who like red"

Answer 3

There may not necessarily be any problems depending on the nature of your application. The trend with the 'flat' style of design means that people are encouraged to explore the user interface to find out the functions. This way they can learn by interacting with the features rather than having to go through help manuals or guides.

My suggestion is to make some distinction between the design of toggle buttons and the tabs to make it easier to remember, and label them accordingly as well. You also need to work out whether there will be conflicts between the state of the toggle buttons and the tabs (i.e. some buttons will be inactive in certain tabs), and whether the user will be aware of this. It is probably not the most common design pattern to put action buttons and tabs in the same row because of the information and layout hierarchy, but it doesn't mean that you can apply it successfully in certain situations.

Answer 4

I think I get what you are asking. Take a look at Bootstrap's Nav offerings. You are trying to decide between Tabs and Pills right?

http://getbootstrap.com/components/#nav

If that is the case, it's a subtle choice. The biggest difference is that the tabs attach to the visible page view creating a slightly more obvious relationship. The pills are a slightly abstracted version of tabs.

Tabs are traditional, pills are more modern perhaps? If your visual design supports the affordance well, go with pills, tabs will never be misunderstood though.

Your call designer!

Answer 5

I agree with @Sam Pierce Lolla's answer. There is one more addition.

Tabs are perceived as different views. That means when users navigate away and then come back to a tab, user may expect the state of the tab to be preserved.

This can not be said about the toggle buttons. The strong correlation of persistence is absent with toggle buttons.

• If there are different views of a single component, you may use toggles.
• If there are different sections/views altogether, tabs are more appropriate.