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.

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?

share|improve this question
4  
Can you elaborate on your question, possible include some diagrams? As it is worded now, this is very vague so it's hard to write a meaningful answer. –  Charles Wesley Aug 26 '13 at 22:59
    
in one of my projects, Users preferred tabs over toggle buttons. they were not able to recognize actual behavior of toggle button. but here targeted users were old (40+yrs age) –  Awesh Aug 27 '13 at 10:29
    
Let me try to clarify. 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? –  stephenz Aug 27 '13 at 14:47

4 Answers 4

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.

share|improve this answer

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.enter image description here

share|improve this answer

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"
share|improve this answer
    
I agree with your descriptions. Tabs have a strong design connection to it's view and also give a clear name to the view. Segments (toggle) do not have that connection. Tabs work better to change views within part of a page. Segments work better when the whole body of the page changes. –  stephenz Aug 28 '13 at 18:53
    
I mostly agree! Though if the whole view is changing, I think link or navigation-menu-item styled are best. I like buttons and pills for "actions" or "switches" that might not change the view at all. –  Sam Pierce Lolla Aug 29 '13 at 3:37
    
Take this page for example. Upvoting and "Add comment" are buttons that don't change much of the view. High-level navigation ("questions", "tags", "users", "badges" at the top of the page) are styled as links. Unfortunately, there aren't any tabs :) –  Sam Pierce Lolla Aug 29 '13 at 3:39

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!

share|improve this answer
    
I was comparing tabs and segmented buttons (toggle) that function as tabs –  stephenz Aug 28 '13 at 18:55
    
Great. Then my opinion stands. Hope it helps. –  Itumac Aug 28 '13 at 19:07
    
@Itumac I think we're comparing tabs and buttons (not pills). Here's the bootstrap equivalent (scroll down to "radio") getbootstrap.com/javascript/#buttons –  Sam Pierce Lolla Aug 29 '13 at 3:33

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.