GUI design of touch-screen products: switch interaction design in GUI

Article Description: the state and function of the button.

A few days ago occasionally looked at a touch-screen product GUI design, found a problem. The following picture is a switch for an application, can you see it?

"On" indicates whether the current state is "on", or whether the current state is off, and then open after clicking?

"Off" indicates whether the current state is "off", or whether the current state is open, click and then close?

Figure I

Here is the switch in the iphone's GUI, which is clearly displayed.

"On" indicates the state, which is currently "on" and is closed when clicked

"Off" is the state, which is currently off, and will open when clicked

Figure II

This problem arises because the designer does not take into account the visual communication (open and close are blue, users can not judge), just follow gourd painting scoop, imitation ipone GUI. There is a serious usability problem because there is no certainty about the nature of the problem.

The key to this problem is not the visual communication, but the definition of the button type in the interaction design. All of the buttons can be grouped into the following two broad categories:

Represents the current state: The current button represents the current state, and the click will switch to another state. The radio buttons and check boxes in the following illustration are typical state-indicating buttons.

Figure Three

Presentation function: That is, the current button represents a certain function, the point will be activated after the function. The following figure plays, pauses, and stops are the typical buttons for representing features.

Figure Four

For usage, two (or more) of the opposite functions are designed to be a button, such as Play and pause, checked and unchecked, open and close, and so on. In design, we should fully consider how to make the appropriate visual communication, so that users can easily distinguish between the current button is the expression function, or expression status.

In Figure II, Apple's switch design is ingenious. It uses the idiom of color (when paired with color, the general gray means unchecked, canceled, closed, and so on) to express that the text "on" and "off" on the button are State, not function.

When designing a button, be sure to express whether the button is a function or a state. Figure V is the most common design method.

Figure Five