8.5 Buttons and Hyperlinks
Both string and image items have an appearance mode attribute. Table 8.1 shows the attribute values, along with screen shots and short explanations.
Table 8.1. Appearance Modes
Default mode, typically used for noninteractive display of textual or graphical material.
Requests that the device display the item contents as if the item were a hyperlink in a browser.
Requests that the device display the item contents as if the item were a button.
Display the hyperlink and button appearance modes in a way that is consistent with their purposes. The appearance mode should be an indication to the user whether the item is interactive. If an application requests a button or hyperlink appearance mode, but does not assign a command to the item, display the item as though it had a PLAIN appearance mode.
8.5.1 Hyperlink Appearance Mode
The hyperlink appearance mode should be similar in use to a web link. It can take the user to a new screen in the same way, conceptually, that a web link takes the user to a new page. Unlike a web link, however, an item with a hyperlink cannot take the user outside the MIDlet.
Use hyperlink appearance mode when the item enables the user to get more information. The hyperlink would take the user to another screen in the MIDlet. For example, if a person is buying tickets for a concert, a hyperlink can be used to access related secondary information, such as a map of the venue.
An item with hyperlink appearance mode should have one or more item-specific abstract commands associated with it. Without at least one associated command, the item is not interactive and a device might not display the item as a hyperlink.
Usability studies showed that an underline is helpful to indicate a hyperlink state, but merely underlining a hyperlink was not enough to indicate to users that a hyperlink had focus. Without an additional focus indicator, the user may not know that the link is selectable.
Use a highlighting method, such as reverse video, to indicate when a hyperlink has focus. Figure 8.5 shows two hyperlinks, one with reverse-video to indicate it has focus.
Figure 8.5. Hyperlink String When It Has Focus
8.5.2 Button Appearance Mode
The button appearance mode should be similar in use to a button on a web page: It should enable the user to carry out a command or operation. The button appearance mode should not take the place of abstract commands.
Use a button appearance mode when the item enables a user to carry out a command or an operation.
Give an item with a button appearance mode one item-specific abstract command, and make that command the item's default command. Without at least one associated command, the item is not interactive and a device might not display the item as a button. With more than one item-specific abstract command, the button will violate user expectations of being able to select it to take a particular action. They might not even realize that they should look to see what other item-specific commands are available.
Remember that in traversal-based devices, such as many mobile phones, users must navigate to a button before they can use it. If all of the fields preceding a button require a user's attention or interaction, users will not be inconvenienced by the navigation; a button could be appropriate. If, however, a button is at the end of a long form that includes optional items, traversing to the button could make the form seem cumbersome, and users could miss the button.
There are a few alternatives that application designers can consider instead of putting a button at the end of a long form. One alternative is to attach the command to the form itself. (See Chapter 12 for more information on commands associated with screens.) Attaching the command to the form places the command in a place that is always immediately accessible to the user. Figure 8.6 shows an example command, Find, attached to the form.
Figure 8.6. Form without a Button
Another alternative is to have two buttons on the form that perform the action. Place one button immediately after the required information, and the other after the optional information at the bottom of the form. Figure 8.7 shows an example of this type of form.
Figure 8.7. Form with Two Buttons
Do not use the appearance modes to create a button-based user interface. Instead, use abstract commands whenever possible. (See Chapter 12 for more information on abstract commands.)
There are a few reasons for this advice. One reason is that devices differ from one another in critical features, such as screen size. These differences make laying out the buttons in a way that is both portable and usable across devices very difficult.
Another reason is that MIDP is designed so that a device manufacturer can map abstract commands onto the device in a way that is expected by its users. This decreases the time required for the user to learn to use the MIDlet. Button-based user interfaces hamper usability by removing the device manufacturer's opportunity to unify the user experiences of MIDlets and native applications. When manufacturers are given this opportunity, users will find the device and all of its applications (MIDlets and native) both fast and predictable.
Finally, scrolling or traversing to a button is much slower than activating a soft key (a common method of making abstract commands available to users). Attaching abstract commands to a screen instead of creating a button-based user interface can make using the form less cumbersome.
A button needs two styles for focus highlighting, one to indicate a neutral state, and another to indicate when the button has focus. The MIDP Reference Implementation uses a 3-D style that looks like a raised button when it does not have focus, and a depressed button when it has focus. Figure 8.8 shows these button styles.
Figure 8.8. Neutral and Focus States of Button Items
Do usability testing to ensure your users can distinguish a button that is in a neutral state from one that has focus. For example, if users had problems distinguishing the focus state in the button graphics shown in Figure 8.8, you could add additional cues for the user, such as also displaying the depressed button in reverse video.