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

List:       kde-usability
Subject:    [KDE Usability] Misuse of toggle buttons
From:       Aurélien_Gâteau <agateau () kde ! org>
Date:       2010-06-02 21:54:25
Message-ID: 4C06D311.9000002 () kde ! org
[Download RAW message or body]

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?

Aurélien
_______________________________________________
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]