0

Toolbars generally have two types of buttons:

  • Buttons that execute an action when user presses them. E.g., a file manager opens a separate command shell window.

  • Buttons that switch application mode. E.g., same file manager switches from displaying file names to displaying file thumbnails.

It's not a problem in dialogs - toggle buttons are simply replaced with checkboxes there - but how do I help the user distinguish between them on a toolbar? All the applications I can think of leave it for the user to learn by trial and error: You press a button and if it gets 'stuck' after that, it was a toggle button. There must be a better way.

ETA: After reading the most helpful links provided by Shreyas Tripathy I decided to stick with checkboxes here. Some additional googling with refined keywords demonstrated that at least one big name corporation universally uses checkboxes on their ribbons, which is close enough.

  • Is there something wrong with using a checkbox in the toolbar? – William Anderson Jun 23 '17 at 18:26
  • @William Anderson That's what my current mock design uses. However, I can't recall any widespread application relying on this approach, and the first tenet of UI design is not to surprise the user (too much). – sigil Jun 23 '17 at 18:35
  • I think that if you want something other than the 'stuck' and 'unstuck' states you see in many desktop apps, you're going to have to use a checkbox or a variation of one. Checkboxes are the simplest UI element that can convey a state at all times. – William Anderson Jun 23 '17 at 18:39
  • @William Anderson Even with just the 'stuck' and 'unstuck' states, the question stands: How to forewarn the user that this button will get 'stuck' if they press it? Action and toggle buttons are different things and should be drawn differently. – sigil Jun 23 '17 at 18:48
  • Yes, my point was that checkboxes convey toggling while 'stuck / unstuck' does not. Hence, if you want to convey a toggle, you should use a checkbox. – William Anderson Jun 23 '17 at 18:56
1

Well, here's what I feel.

  1. There may not be a need to make them look different. Both are action buttons in the broader sense. The only difference is that for the buttons that switch views, you will simply need to change the icon. For example: from grid view to list view.

  2. Actually use a toggle button

PS: Refer to this answer for some of the best ways of using the toggle button

  • Thanks for the very enlightening links. Odd that they did not come up when I searched the site before posting my question - not on the first few screens anyway. – sigil Jun 24 '17 at 16:19
0

I like to use images on my buttons. My toggle buttons on my tool bar will actually change the image based on what it is doing and have the button name displayed below it. For example if my user can toggle between thumbnails or a list option then I would have it show an image of the opposite of what is currently selected. So if all of their files are in list view it may display 4 little boxes in a square type layout. If in the thumbnail view then it displays the 4 boxes in a horizontal line.

I like this method because it shows the user what will change when they hit the button rather than a toggle switch that you toggle on an off.

  • This approach looks promising but I'm not sure I understand you completely. Let's talk examples. Your application is currently displaying a file list. Is the button in the checked (pressed, stuck) or unchecked state? Does it change state when user clicks it? – sigil Jun 24 '17 at 0:16
  • From a developers perspective you could set List to be checked / stuck and for Thumbnail to be unchecked / unstuck. But from a user perspective they wouldn't see the button as a state of stuck or unstuck but a state of one image or the other. – Ardel Jun 24 '17 at 12:07
  • So, the button is basically an action button that displays the state opposite to the one the application currently has. I guess one can get used to it... After some trial and error. – sigil Jun 24 '17 at 16:15
  • In my opinion almost everything is trial and error. In this cause your adding a little to that trial and error and in return getting a better looking User Interface. Whether it is a check box or a changing image the User would still have to click it to find out exactly what it does. – Ardel Jun 26 '17 at 12:37

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.