[prev in list] [next in list] [prev in thread] [next in thread] 

List:       kde-usability
Subject:    Re: [KDE Usability] Misuse of toggle buttons
From:       Hugo Pereira Da Costa <hugo () oxygen-icons ! org>
Date:       2010-06-02 22:04:47
Message-ID: 201006021604.48284.hugo () oxygen-icons ! org
[Download RAW message or body]

On Wednesday, June 02, 2010 03:54:25 pm Aurélien Gâteau wrote:
> Hi,
> 
> I finally decided to write about one of my UI pet peeves in KDE:
> misuse of toggle buttons.
> 
> To avoid any confusion, what I call a toggle button is a button
> similar to the classic "OK" or "Cancel" buttons, except it stays
> down when you click it. If you click again it will return to its
> previous raised position.
> 
> In my opinion, some applications are using them where they should not,
> and some applications are not using them correctly.
> 
> Two examples come to mind: Dragon and the Network Management (NM)
> Plasma widget (no offense to their authors, it's just two applications
> where I noticed this)
> 
> - In Dragon, the Play/Pause button is a toggle button: when you click
> Play, it stays down and the text/icon turns into Pause.
> 
> - In the NM Plasma widget, the "Show More..."/"Show Less..." button
> is a toggle button as well: when you click "Show More...", it stays
> down and the text/icon turns into "Show Less...".
> 
> A button is usually used to trigger an action. When I press a button
> it looks down until I release the mouse button, at which point the
> action is performed. A toggle button changes that: the button is down
> before I click it. It is confusing because it looks as if the action
> it can trigger is already being performed:
> 
> In both Dragon and the NM widget, I think the toggle buttons should be
> replaced with normal buttons which change icons and texts after they
> are clicked to indicate the action they perform.
> 
> When should a toggle button be used? In my opinion not often. It is
> confusing to have two identical UI elements which behave differently:
> if a toggle button is not down, nothing distinguish it from a
> regular button, thus it's impossible for the user to predict the
> toggle button is going to behave differently.
> 
> The most pertinent usage I can think of is to toggle a UI element: For
> example if you want to provide the ability to toggle a sidebar from
> the application toolbar, you have two possibilities:
> 
> 1. You can create a regular button which starts with "Show Sidebar".
> Clicking on it shows the sidebar and turns the button text into "Hide
> Sidebar".
> 
> 2. You can create a toggle button which says "Sidebar". Clicking on it
> pushes it down and shows the sidebar, clicking again raises the button
> back and hides the sidebar.
> 
> Note that in option 2 I suggest the button text should not change. It
> does not need to change because the fact that it is down is enough to
> indicate the current state. If you think of it, a toggle button is
> very similar to a checkbox. Just like you don't change the text of a
> checkbox when you check it, you should not change the text of a toggle
> button when you toggle it.
> 
> Why would one choose option 2 over option 1? When used the way I
> suggest, the toggle button I describe has one advantage over a regular
> button: since its text/icon does not change, its width does not change
> either, thus it looks better when used in a toolbar because it does
> not cause the other elements of the bar to move.
> 
> Another important guideline I would suggest for the use of toggle
> buttons is not to use verbs in their text: In my previous example,
> option 1 used verbs (Show/Hide Sidebar) because the button was
> performing an action. Option 2 on the other hand uses a noun (Sidebar)
> because the button does not perform an action, I think it can be
> considered like a modifiable view of the sidebar.
> 
> So to summarize, I would like to propose the following additions to the
> HIG:
> 
> """
> To represent the ability to switch between two states with a single
> button prefer using a regular button with dynamic icon/texts instead
> of a toggle button.
> 
> If the button must be in a place where a width change would be
> ugly (for example in a toolbar), it's OK to use a toggle button as
> long as you do not change the icon/text of the button when it is
> toggled. An alternative is to use a regular button in icon only mode.
> 
> When using regular buttons, use verbs in the text (Show/Hide...)
> 
> When using toggle buttons, use nouns instead.
> """
> 
> What do you think of this? Does it make sense?
> 

++

I've been (slightly) annoyed by this (ab)use of toggles for quite some time.
Note that Amarok "slim" toolbar has the same issue as dragon.


> Aurélien
> _______________________________________________
> kde-usability mailing list
> kde-usability@kde.org
> https://mail.kde.org/mailman/listinfo/kde-usability
_______________________________________________
kde-usability mailing list
kde-usability@kde.org
https://mail.kde.org/mailman/listinfo/kde-usability

[prev in list] [next in list] [prev in thread] [next in thread]