JFC and Swing            Back to the introduction

---

Graphical User Interface Concepts

A GUI is a user interface that provides graphical two-way communication between the user and the application. It consists of menus, windows, widgets, input devices (keyboard, mouse - point-and-click), output devices (audio - the "beeps" and other sounds the computer makes, video), and in general, all the information channels. The GUI uses these channels to communicate with the user. It should be noted that the GUI also includes documentation.

GUI Design

Task-Centered Design, also known as User-Centered Design, is a GUI design approach that focuses on the tasks the users perform in order to accomplish their work. Note that the users may not be currently performing these tasks using computer software applications (if you were writing an application to replace an older system).

The steps in the Task-Centered design are:

1. Analyze

   Learn:

   • Who the users of your software will be.
   • Why these users need your software.
   • What are their goal(s) in using your software.
   • How the tasks are currently performed.
   • How your software will fit with the current way they do their work.
   • What the users want to do with the software.
   • What the tasks are.
   • What steps the users do while doing these tasks.
   • How the users know their tasks have been accomplished successfully.

   The goal of this analysis is to produce task descriptions. These descriptions are to be used not only in the design of the GUI, but in the evaluation of the GUI as well.

2. Design
   • Create initial GUI design (sequences of screens) on paper illustrating how users would accomplish tasks using the software.
   • These sequences of screens should be hand-drawn or B&W computer-generated. This makes it easy for the users to comment the GUI and for us to change it. Elaborate computer-generated sketches intimidate users. They tend to think of the design as "finished" once they see a computer-generated image. Thus, they might provide less feedback thinking the design is difficult to change.
3. Evaluate

   Is the software usable? Does the software do what the users wanted it to do?

   Once you have a task description, evaluate it.

   • Without users, perform a Cognitive Walkthrough. The goal of the walkthrough is to catch black-holes. These are areas where users would not be able to determine the next appropriate step to complete the task at hand.
   • Make sure you know the right steps needed to perform the task, as if you were a user.
   • Proceed step-by-step through the task description. At each step ask:
     • Would the user know what to do?
     • Would the user know how to do it?
     • Would the user see the related interface element?
     • Would the user understand the provided feedback?
   • With users, perform a demo.
   • While the user is using your GUI, sit nearby and record:
     • When and in which part of your GUI the user is not able to determine the next appropriate step to complete the task at hand.
     • When the user does not understand the provided feedback
     • Any suggestions, comments, concerns made by the users.

4. Iterate

   Once the 3 steps above have been done, REPEAT them at least twice.

GUI Guidelines

You often hear that a GUI must be user friendly and that people will not use your software if they find it difficult to use. But what does user friendly mean? How do we achieve user friendliness?

A GUI should:

• Be simple

  Keep the interface simple and straightforward. Do not compromise usability for an excessive number of widgets (objects) and functions. Keep the number of objects and actions to a minimum while still allowing users to accomplish their tasks.

  A poorly organized interface is cluttered with irrelevant or rarely used information, as well as with too many advanced functions. Such interfaces distract users.

  A well-organized interface that supports the users tasks fades into the background and allows the user to work efficiently. Such interfaces focus the users attention on the most important and relevant part of the GUI.

  Do not eliminate extra space in your image just to save space. Use white space in your GUI to provide visual "breathing room".

• Speak the users language

  Use words and concepts from the users world. Do not use computer science or engineering specific terms to describe functions of the GUI.

• Maximize users prior knowledge and minimize memorization

  Allow users to recycle prior knowledge. This knowledge may have been gained from experience in the real world, and/or from using other software applications. Users should not have to learn new things to perform familiar tasks.

  Minimize the number of tasks the users need to memorize and learn:

  • Functions should be designed so that they are easy to conceptualize and their associated actions are easy to remember.
  • Menus should be structured so that it is easy for the user to find the desired menu item.
  • Group similar types of information together in windows/dialog boxes so that it makes sense to the user.
  • Design icons so that their visual look implies their action.
  Do not make the user remember things from one action to the next. You can accomplish this by leaving information on the screen until it is not needed.
• Be intuitive

  Make widgets (visual representation), how they are controlled, and their actions intuitive to the users. Where you can, use real-world representations and direct action in the interface. These give the interface a familiar look and feel and can make it more intuitive to learn and use.

• Be consistent

  Users should be able to learn an action sequence in one part of the system and apply it again to get similar results in other places. Consistency allows the user to re-use knowledge previously gained (from using other applications). Ideally, all systems running on one platform should strive for consistency among each other.

  Be consistent in:

  • Placing windows, menus and widgets in your GUI.
  • Naming your menu items, widget labels, choosing the wording of your commands, and the style of your instructions in your dialogue boxes. For example, is it the command named Delete or Clear?
  • Defining keyboard short cuts, etc.
• Provide feedback

  Interfaces are dialogues between the system and the user. Interfaces should clearly indicate whether the input provided by the user was accepted by the system or not. If input is unacceptable, an interface should show the user why the input is unacceptable. Interfaces should also notify the user of the progress of the systems actions, especially when the action takes time to perform. For example, an hour glass icon, or a progress bar can both be used to tell the user that the system is busy performing some action.

  Immediate feedback also allows users to assess whether the results were what they expected and to take alternative action immediately. For example, when a user chooses a new font from a menu, the font of all applicable text, or of some sample text, should change immediately to provide some feedback to the user.

  Offer a preview of the results of an action when it would be inconvenient (slow) for a user to apply the action and then reverse it. For example, if a user wants to bold, underscore, and use helvetica font in certain places throughout a document, provide a sample part of that document with those changes applied, allowing the user to decide if that is the right action to take.

  When an error occurs, your feedback should describe the problem in such a way that the user can understand the problem and it should suggest recovery actions.

  Provide appropriate online help with the right amount of details, depending on the context. For example, online help should range in format from point-form style all the way up to complete tutorials for each major task performed by the program.

• Give control to the user

  Always allow the user to undo an action, to exit, or cancel by providing a clearly marked way of doing so. This permits the user to experiment with the system without heavy penalty. If an action cannot be undone, like emptying the trash can, provide a dialog box to notify the user and to ask for confirmation (or to cancel).

  Avoid bundling actions together, because the user may not anticipate any side effects. For example, if a user chooses to cancel a request to send a note, only the send request should be cancelled. Do not bundle another action, such as deletion of the note, with the cancel request.

• Prevent errors

  Users should be protected from making errors. The burden of keeping the user out of trouble rests on the software and GUI designer(s). The interface should provide visual cues, reminders, lists of choices, and other aids, to help the user avoid making any errors. In order to design such an interface, the software/GUI designers must anticipate and disallow actions that could lead to errors. For example, when the user is saving or opening a file, ensure the filename is valid before making a system call to write the file to disk.

  Use default values to initialize widgets such as text field or slider. This allows the user to quickly deal with the selection of setting values without causing errors such as leaving a field empty.

  Users should never have to rely on their own memory for something the system already knows, such as previous settings, file names, and other interface details. If the information is in the system in any form, the system should provide it to the user via some interface. Relying on the users memory is very error prone and should be avoided by a cleverly designed GUI.

• Accommodate multiple skill levels

  Provide several ways of performing a task to accommodate users with different skill levels. For example, mouse actions, menu options, and keyboard short cuts (speedy for the experts) can provide multiple ways of performing the same task.

  Design your GUI so that performing common tasks can be trivial and quick. Shortcuts can help experienced users avoid lengthy dialogs and informational messages that they do not need.

  Allow more experienced users to customize the interface to their needs and desires. Customization can help make an interface feel comfortable and familiar and lead to higher productivity and user satisfaction.

Conclusion

Your GUI should help the user (all users) to build a correct conceptual model of your system (what it does and how it does it). Remember to create your GUI to keep users frustration level to a minimum while giving users a sense that your program is fun and easy to use.

---

JFC and Swing            Back to the introduction

---

Copyright (C) 2000 - 2002, The University of British Columbia