Related
When using icon images without text captions, should the icon represent the current state or the next state? For example I have a block of text that I want to minimize / maximize or I want to toggle showing All User Records or just My Records. I'm sure there are compelling arguments for either side and know that consistency is key, but what are the arguments related to good intuitive user design?
There is neither standardization nor general human tendency on this. For example, MS Windows UX Interaction Guidelines specifies four basic kinds of toggling progressive disclosure control. Three out of four show the state-when-activated, while one shows the current state.
I believe if you test a particular approach on your users, you'll get different results depending on what you ask. If you show them a control and ask them what state the app is in, they'll tend to read the icon as if it were indicating the state. If you show them a control and ask them to change the state (where in some cases the state is already changed), they'll read the icon as if it were the state to achieve. It's precisely because of this they invented toggling buttons.
If you're lucky, users use the icon primarily for either reading the state or setting the state, and not both. Then let the icon indicate whatever the users use it for.
If they indeed use it for both reading the state and setting the state, you're basically hosed, but there are a few things you can try to minimize hosehood:
Use text in addition to or instead of an icon. When labeled with a verb (e.g., "Connect"), the control indicates the state the user gets. When labeled with an adjective or noun (e.g., "On Line"), it implies the current state.
If your lib doesn't support toggling icons, then consider using a checkbox control, if that's allowed.
If your lib doesn't support checkboxes, then consider two controls, one to set each state, where the current state is disabled. Not too good for reading the current state, but there's some precedence for this in pulldown menus.
Fiddle with graphic design or placement to make it consistent with the meaning you've chosen. For example:
Command buttons are always labeled with the action they commit, so if your icon indicates the state the user gets, then give the icon a raised appearance like a command button. If the icon indicates the current state, then give it a flat appearance.
Toolbar controls usually show the state they bring about, so put the icon at the top of the window if indicates the state the user gets. In contrast, icons in the "work area" of the window indicate objects or attributes, so icons there should show the current state. Icons at the bottom of the window (in the status bar) should also show the current state.
This has not been truly standardized. Folder icons, for example, show open folders when they are open and closed folders when they are closed. Same for disclosure triangles, etc.
However, in other contexts, this is not always true. In a movie player, the "Play" arrow shows when the movie is not playing, and it shows the pause icon when it is playing. Probably the thing to do is use your best judgment, then poll your users. If a preponderance of the people you test are confused by your icon choices, switch them around. Then test them again and see if your initial test holds up. :)
If you are just going to have one button to toggle between two states, then the button should represent the next state, because that is the action that the button will take when clicked.
You gave the example of text that is minimized/maximized. Think of any expandable tree interface you ever see in Windows. A minimized tree has a [+] next to it, because clicking the button will expand the tree. And a maximized tree has a [-] next to it for the same reason.
You could also try to make a toggle that is highlighted or "pressed down" like mihi says, but that might be more confusing.
I prefer the "next state" approach (click plus to expand, click minus to collapse).
One reason is that this is the most widely used approach, so doing anything else would confuse users (and me as well).
Another reason is that the "next state" approach looks more inviting for the user to click.
May I present Zoom's mute button:
It shows the current state, as an icon, and the action that will occur when you push the button, as text. In other words, the icon on the button is the current state and the label on the button is the new state. The current state and the new state are opposites, so the button appears to contradict itself unless you read it very carefully.
(I hate that button.)
I have a table column where each row has one of three states, and the purpose of the row is to offer manipulation AND display of this property with three states.
My current development view is to have three tightly packed radio buttons with labels at the head of the columns (and every 50 rows or so) and onClick they send an AJAX request and thar she blows.
This is fugly.
Is there a standard idiom for a control like this? I'm currently mocking up something similar to the iPhone on/off toggle, but with a "middle" state.
Any input would be welcome.
EDIT
A bit more clarification: I have a tool for confirming events. Each event is either "proposed", "cancelled", or "confirmed". They all default to "proposed" until someone explicitly confirms or cancels them. This is a thin front-end for a SQL table.
I've seen this handled with image buttons that remain "depressed" when you click while popping the other two out. They act like radio buttons except that the label and the state are merged. If your names are too lengthy to fit in a button, you can abbreviate them and provide a key. I'd also give each one a distinct color. For implementation just pop the value in a hidden form field on click.
These are called "Toggle Buttons" in some other UI's:
http://java.sun.com/products/jlf/ed2/book/HIG.Controls2.html
http://msdn.microsoft.com/en-us/library/dd940509%28VS.85%29.aspx
http://developer.gnome.org/projects/gup/hig/2.0/controls-toggle-buttons.html
The standard mechanization for things like this in military avionics, where screen space is always at a premium,and so are buttons, is a "rotary". Each time you click it, it steps to the next value in sequence, wrapping around.
As an example, a device with a cryogenic cooler might have three states: OFF, WARM, and COOL. Initially, the device is OFF: no power applied. Click it, and it switches to WARM, meaning power is applied, but no cooling. Click it again, and it starts the cooler. (Since cooling in this kind of thing is usually supplied by a gas bottle with a strictly limited capacity, you don't want to cool the device until you are getting ready to party.) Click it again, and it shuts the device OFF.
You could also do this with buttons or hyperlinks. In a big table, hyperlinks will probably look best.
In the Proposed state, your cell could look something like this (with underlined links, but the editor won't let me):
Proposed Confirm Cancel
In the Confirmed state:
Confirmed Undo
In the Cancelled state:
Cancelled Undo
This will take two clicks to get from Confirmed to Cancelled and vice versa, but I assume that this operation is rarer than switching between Proposed and one of the other two.
Perhaps display arrows on either side to change the state:
(Cancelled) <| Proposed |> (Confirmed)
These may or may not 'wrap' depending on how well that suits the values and how important it is to saving a click when transitioning from value 1 to value 3 (or vice-versa).
As an alternative to you radio buttons, you could consider a drop-down list with three options. The disadvantage is, of course, that two clicks are needed to change the value.
Maybe use a slider with three states? (It really depends on the exact situation!)
Consider a fixed-position slider with three positions, such as offered by jQueryUI: http://jqueryui.com/demos/slider/#steps
I am reminded of the permissions button in SQL - it has multiple states; green check, red x, no setting, and clicking on them cycles through the three states. Its ok but annoying if you want to change a bunch to the state reached second, and if you click too many times you have to go through it all again. Left click - cycle forward; right click - cycle backward might work but certainly has no basis in UI expectations.
Idiomatically, I would say a Stop Light (red/yellow/green). They could behave like radio buttons; darker toned for 'off' and lighter tones for 'on', and since the color gives a cue you can move the description to a mouseover label. Of course, it isn't RG Colorblind kosher, so depending on your application that may be a deal breaker. (also, it may be confusing on Mac where the minimize/close etc buttons are the same color scheme).
Why not use three boxes that look like the "Questions", "Tags", "Users", ... boxes on this page (could be implemented as links, buttons or whatever)?
GUI: should a button represent the current state or the state to be achieved through clicking the button?
I've seen both and it sometimes misleads the user. what do you think?
The label on the button should reflect what the button does, i.e. it should describe the change the button makes.
For example, if you have a call logging system a button should say "Close Call" and the user can click it to close the call. The button should not have the label "Call is Open" and the user clicks to change the call status as that's very counter-intuitive, since the button is effectively doing the opposite to what it says on it.
In my opinion the label - and so the function - of a button should rarely, if ever, change. A button is supposed to be a like a physical button and they usually only do a single thing. (There are a few exceptions like play-pause on a media player where it's OK for the button label/icon to change, but at least this is copying a button from a real physical device.)
To carry on the example from above, I would say usually you would want two buttons, "Open Call" and "Close Call" and disable whichever one is not appropriate. Ideally you'd have a field elsewhere displaying the status of the call.
In summary, buttons are for doing things not for passing on information to the user.
The button should represent the action to be executed, not the state.
Some buttons are actions and are not ambiguous, like "Save", "Print" or "Enable user".
When a button represents a state that can be toggled, like Enable and Disable something, I do one of the following:
Change the button text, and make it always point to the state that will be achieved; (i.e. make the button point to actions, not states);
- Keep the button's text the same, but use one of those sticky buttons that will stay pressed, representing that the current state is "on" or "off". I prefer the former approach, though.
It should represent the action taken when clicking the button. States should always be presented by other means.
But I know what you mean. My car radio has buttons with text that shows the current state. It is really confusing.
This depends on the function which will be triggerd by the button click.
if the click changes the state of an entity i would suggest that the button represents the state the entity will enter after clicking the button
if the click triggers some kind of functionality the button should represent the function.
The appearance of the button is also a clue to its state. It should follow the standards of the environment if any exist (example, beveled edge / shadow appears on mouse click in Windows).
What are some guidelines for displaying information to a user in a web-browser?
I am trying to determine some guidelines and best practices for displaying information to a user.
The exact case is a confirmation button: once it’s been pressed and the subject is confirmed the button is disabled (to prevent users from clicking it again). To be able to click this confirmation button there are some prerequisites that need to be fulfilled. If the prerequisites are not fulfilled, reasons to why the confirmation button is disabled should be shown.
Currently I have this information shown as a tooltip on the button. Is this a typical way of displaying such information?
Another thing that concerns me is the fact that the disabled state sends two different signals
one signal being “everything is in order”
the other signal being “something is wrong, but you need to hover me to find out what is wrong”.
Is this a design flaw in the GUI? Or is this information best displayed in another way (like the status-bar if this was WinForms?) Alternatively, an icon could be displayed above / below or near the button that signals information to be present.
I’m not really sure what the best-practices on this subject are in the world of web.
Regarding UI clues, you can find some good ideas related to form validation.
For instance, you can display explicitly the list those prerequisite with a symbol (red *) before each of them, stating that there are mandatory.
If the button is disabled, and all prerequisite informations have no more (*) in front of them, but rather a green check mark, that can help reinforce the message this button is not definitively inactive.
I would first show the information in some way other than a tool tip since this is somewhat critical information. Also, for the button, I would have two different UI clues. Obviously, the button should be disabled until it is ready to be clicked. Then when the button is clicked, you could have some image or something, with button now gone, stating that the request has been submitted, etc.
Display the message in a div highlighted with some other color and place it above your button.
Once your prerequisites are fulfilled , hide the div.
The user of an application wants to
assign a task to a programmer.
The "Edit Task" form is presented to the User.
A popup (actually an absolutely
positioned div) window comes up with
all the programmers to choose from.
The programmer is not there so the
user asks for a "new programmer"
screen. The popup is replaced with a
"New programmer" form.
The user fill the data, and comes to
"Works at" field.
A (2nd or 3d) popup comes to the
stack with all the "Places" to
choose from.
This can go ad infinitum.
How do you design your applications, to avoid the infinite stack of lookup/Entry forms?
Alternatively to creating a (recursive) stack, you could make it a sequential queue of information that still needs to be entered (similar to a wizard). I.e. where you select the programmer, an item would say "(new - will ask for details later)". If it's going to be a wizard, it should have forth-and-back buttons everywhere.
If all the information is required, and none of it is in the system, I don't see how you can avoid having that many dialogs, really.
You can design the UI so it's not to intrusive, of course - try to make the transition between "pick a place" and "new place" as smooth and seamless as possible. In particular, I'd try to avoid it making the first dialog "go away" as such - perhaps just make it extend the existing one, collapsing the existing choices.
It sounds like you've got an appropriately logical division between "who" and "where" though, which I like - I hate entering completely disparate pieces of information on the same form, even if cuts down the total number of forms displayed.
Try not to lose the scope and the target of the screen. For example, in the "Programmer" screen, you need at least to add the basic details of the new programmer item. The user shouldn't add all the details. If the user wants to add more details, he should add it later from the related "Add Programmer" screen.
Check GMail when you create a new filter and you need to add a new label for example.