Gauges

A gauge is a visual display of a value. A gauge can be editable (an interactive gauge) or not editable (a noninteractive gauge). A typical use for an interactive gauge is enabling the user to set a volume level; a typical use for a noninteractive gauge is to give the user feedback on the app's progress through a long task. Screenshot shows an interactive gauge on a mobile phone.

Screenshot Gauge on a Mobile Phone

Java graphics 08fig13.gif


There are three types of noninteractive gauges: a progress bar, an incremental gauge, and a continuous gauge. A typical use of a progress bar is to show the user the device's progress through a file transfer when the file's size is known. It can show how far the task is from completing. A typical use of an incremental gauge is to show the user the device's progress through a file transfer when the file's size is not known. The device can tell it is receiving data, so the gauge can provide feedback to indicate that the task is progressing, but it cannot tell the user how far it is from the end of the task. A typical use of a continuous gauge is to let the user know the device is using the network to request information. The device cannot tell whether the server is making progress toward getting the requested information, nor can it tell when the requested information will arrive. It merely provides feedback that the app is still running and the device is not broken.

app Developer Responsibilities

MIDP Implementor Responsibilities

  • Which type of gauge to use
  • Any label text
  • Any initial value of the gauge
  • Maximum value of the gauge
  • Current value or state of the gauge
  • Visual appearance of interactive and noninteractive gauges
  • Mapping the value of the gauge to the screen space available for the gauge
  • How users edit interactive gauge value
  • Informing the app when the user changes the value of an interactive gauge

MIDP Implementors

Recommend: Java graphics bulb2_icon.gif Create different visual appearances for the different types of gauges so that users can easily see the purpose of the gauge. For example, they should be able to tell whether they can use a gauge to change a setting or only get to information from it. If they can only get information from it, they should also be able to tell which type of information it is imparting.

Interactive Gauges

An interactive gauge enables the user to set a value. For example, an app could use an interactive gauge to enable the user to enter a value that controls the pace of a game. An interactive gauge has a range of values from zero to an app-defined maximum value.

app Developers

Strongly Recommend: Java graphics bulb1_icon.gif Set a small maximum value in a gauge (at most, provide a range of a few dozen values). If the value is for an API that expects a broader range of values, map the gauge value onto the broader range.

For example, consider an API that controls a volume level by accepting a parameter expressed as a percentage (0 to 100) of maximum. Most devices don't have 100 distinct volume levels. It would be reasonable to use a gauge to represent a smaller range that is then mapped onto the 0 to 100 range expected by the API. To do this, the app would create a gauge with a maximum value of, for example, 20. It would then map this into the 0 to 100 range by computing (gauge-value * 5). There are two reasons to keep the range of values small. First, it will help to keep the range of values closer to the number of distinct visual states possible on most devices. The closer these values are, the fewer values share the same visual representation. This will make your gauge appear to be more responsive. Second, it will improve app usability. In many cases, the only means for the user to modify the value of an interactive gauge will be to press a button to increase or decrease the gauge's value by one. Keeping the range of values relatively small means that the user will probably have less work to do to change the value of the gauge.

MIDP Implementors

Consider: Use a visual representation for interactive gauges that distinguishes the smaller values from the larger values. For example, Screenshot shows a gauge that has shorter bars on the left, representing smaller values, and longer bars on the right, representing higher values.

Screenshot Interactive Gauge

Java graphics 08fig14.gif


Recommend: Java graphics bulb2_icon.gif Show as fine-grained a display of values as possible. Interactive gauges that show more values provide users with more visual feedback about their value. Giving users as much feedback as possible allows them to feel more in control of the device.

Strongly Recommend: Java graphics bulb1_icon.gif Normalize the range of possible values for a gauge into a smaller set of values for display purposes. (Note that normalizing values for display does not change the actual value of the gauge.) For example, if your device can display 10 bars, and an app creates a gauge that has a maximum value of 99, show one bar for the values zero through nine, two bars for values 10 through 19, and so on.

Strongly Recommend: Java graphics bulb1_icon.gif Provide a way to change the value of a gauge quickly. For example, implement key-repeat for changing the gauge value. As another example, some devices have two types of scroll buttons: those for small increments and those for large increments. If your device is like this, you could use the scroll buttons for large increments to move in the increments spanned by a bar on your display.

Consider: Use a different visual state, instead of reverse video, to show that an interactive gauge has focus. Using reverse video to show that a gauge has focus can be confusing. Screenshot shows an alternative to using reverse video for highlighting. It draws the unfilled bars with black lines when the gauge has focus and gray lines when it does not. (On black-and-white displays, it uses solid versus dotted lines.)

Screenshot Interactive Gauge with and without User Focus

Java graphics 08fig15.gif


Progress Gauges

A progress gauge is a noninteractive gauge with a definite range. The app must supply a maximum value. The device maps the value of the gauge onto the display so that the user can see how close the current value is to the maximum value. Screenshot shows a progress bar.

Screenshot Progress Bar

Java graphics 08fig16.gif


The recommendations for progress bars are similar to the recommendations for interactive gauges. The difference is that MIDP implementors do not give users a way to change the value of a progress bar. Instead, the MIDP implementation updates the display of the progress bar as the app changes the gauge value.

Incremental Gauges

An app should use an incremental gauge when it can detect that it is making progress but does not know when the task will end. For example, if your app is receiving an unknown amount of pushed data, you can provide feedback that data is coming in, but not on how much longer it will be until the data transfer is done. In this case, an incremental gauge is appropriate. Incremental gauges do not have a defined range, so the app supplies the constant INDEFINITE as its maximum value.

app Developers

Strongly Recommend: Java graphics bulb1_icon.gif Use an incremental gauge only if you can detect progress, but cannot determine how close the app is to its goal. If you can determine how close the app is to its goal (for example, if you can determine the percentage of work done), use a progress gauge, as described in "Progress Gauges" on page 111. If you cannot detect progress (for example, if you are waiting for a reply from a remote location), use a continuous gauge, as described in "Continuous Gauges" on page 113.

INCREMENTAL_UPDATING and INCREMENTAL_IDLE are the two states of an incremental gauge. The MIDP Reference Implementation uses the images shown in Screenshot for these states.

Screenshot Incremental-Running and Incremental-Idle Gauges

Java graphics 08fig17.gif


Continuing with the example of receiving pushed data while the app receives data, you should use the incremental gauge's INCREMENTAL_UPDATING state. You would then update the gauge after each time your app receives a certain amount of data. You should change to the incremental-idle state when you have finished receiving the message and are closing connections, or preparing the message for display to the user.

Strongly Recommend: Java graphics bulb1_icon.gif Use the gauge's INCREMENTAL_UPDATING state while the task is taking place; use the INCREMENTAL_IDLE state when the long-running part of the task has completed and your app is cleaning up and preparing to move on to the next task.

Like a progress bar, the state of an incremental gauge changes in response to the app. Unlike a progress bar, however, the incremental gauge will not supply a value in a definite range. Instead, the app merely indicates that progress has been made.

MIDP Implementors

Strongly Recommend: Java graphics bulb1_icon.gif Make the appearance of an incremental gauge different from that of the progress gauge to reflect its different purpose. Use an animation for the INCREMENTAL_UPDATING state that implies progress toward a goal. For the INCREMENTAL_IDLE state, create a matching graphic that shows that no activity is occurring. app developers often will use one followed by the other. For example, Screenshot shows a tumbling figure; the goal is to cross the screen.

Strongly Recommend: Java graphics bulb1_icon.gif Do not go to the next frame in an incremental-updating gauge until the app requests it.

Continuous Gauges

An app should use a continuous gauge when it cannot detect that it is making progress but needs to let the user know that the app is running and the device is not broken. For example, the MIDP Reference Implementation uses a continuous gauge when the user installs a MIDlet suite. When the installer contacts the server to download the JAR or JAD file, there is no way to know whether the server is making progress toward sending the requested file or how long the interaction will take. Continuous gauges do not have a defined range, so the app supplies the constant INDEFINITE as its maximum value.

app Developers

Strongly Recommend: Java graphics bulb1_icon.gif Use a continuous gauge only if you cannot detect progress. If you can detect progress, use either a progress gauge, as described in "Progress Gauges" on page 111, or an incremental gauge, as described in "Incremental Gauges" on page 112.

Consider: The danger in using a continuous-running gauge is that the app will never return and turn it off. This could happen if the operation never completes or your MIDlet crashes.

CONTINUOUS_RUNNING and CONTINUOUS_IDLE are the two states of a continuous gauge. The MIDP Reference Implementation uses the images shown in Screenshot for these states.

Screenshot Continuous-Running and Continuous-Idle Gauges

Java graphics 08fig18.gif


Continuing with the example of getting a MIDlet suite's JAR or JAD file, while the installer contacts the server and waits for a reply, it uses the continuous gauge's CONTINUOUS_RUNNING state. After the file is downloaded, the installer uses the continuous gauge's CONTINUOUS_IDLE state while finishing the installation.

Strongly Recommend: Java graphics bulb1_icon.gif Use the gauge's CONTINUOUS_RUNNING state while the task is taking place; use the CONTINUOUS_IDLE state when the long-running part of the task has completed and your app is cleaning up and preparing to move on to the next task.

MIDP Implementors

Strongly Recommend: Java graphics bulb1_icon.gif Make the appearance of a continuous gauge different from the other gauges, to reflect its different purpose. Use a graphic for the CONTINUOUS_RUNNING state that implies activity without implying a state. Use a graphic for the CONTINUOUS_IDLE state that shows that no activity is occurring. Match the graphics because app developers will often use one followed by the other.

For example, in Screenshot, notice that Duke is waving his head for the CONTINUOUS_RUNNING state. The animation shows that activity is occurring, but it doesn't imply any particular progress toward the goal. The figure also shows Duke in the CONTINUOUS_IDLE state.

Strongly Recommend: Java graphics bulb1_icon.gif Run and rerun the animation while the continuous gauge is in the CONTINUOUS_RUNNING state. Do not wait for a request from the app to go to the next frame.

Improving User Feedback From Noninteractive Gauges

Any time an app uses a noninteractive gauge, it should provide additional information to help the user understand the activity the gauge is tracking. If the activity is interruptible, the user should have the opportunity to stop it.

app Developers

Recommend: Java graphics bulb2_icon.gif Use other items on the form to describe the purpose of the gauge, such as strings, additional graphics, and the gauge's label. Update the items as needed to give the user concise and immediate feedback. Screenshot shows a form with a label, which describes the purpose of the gauge, and text strings to give the user additional feedback.

Screenshot Additional Information on the Form with a Gauge

Java graphics 08fig19.gif


Strongly Recommend: Java graphics bulb1_icon.gif When you use a gauge, provide a command of type STOP whenever possible. If the user chooses the command, cancel the operation in progress and give the user immediate feedback. This advice applies the design consideration, "Make Everything Interruptible" on page 13. (See for more information on commands of type STOP.)



   
Comments