CS 66.460
Introduction to Graphical Human-Machine Interfaces
Spring 1997
IN-CLASS EXERCISE #2
Monday, February 10, 1997
User Interface Widget Design

The Goal: To gain experience in the design of a user interface component. In particular by exploring alternatives and trade-offs in the design of a ``widget'' for a graphical user interface toolkit.

The Problem: Recent advances in technology have led to the development of small, portable devices such as palm-top computers like the Apple Newton and pocket computers like credit card size phone directories. The small size of these devices have pressured designers to create easy-to-use interfaces with non-keyboard input devices.

Other situations also require non-keyboard input. For example, physicians using medical image workstations in hospital settings need direct and instant responses in order to make prompt and accurate diagnoses. Physicians should not be required to take their eyes from the images in order to operate the workstation, and many of them do not want to operate keyboards to retrieve patient data.

Data visualization systems use graphical techniques to display large datasets. Users filter the data and look for patterns on the display. Non-keyboard input is desirable so that users may watch the display as they perform the filtering.

Voice recognition and handwriting recognition are certainly good possibilities for non-keyboard input. But even today, both of these options are limited in their application because recognition and response rates are not fast enough, and end-users also have to adjust their speech or handwriting patterns to make the recognition reliable.

Instead, what is needed are graphical objects or ``widgets'' that can be manipulated with a pointing device (a mouse, pen, or finger) without the need for keyboard input.

The Objective: Sliders (see the last page) are a general purpose user input mechanism enabling users to specify a single input value from a well-defined range. They are widely used in all graphical user interface systems including Motif, Sun's Open Look, Apple's Macintosh, and Microsoft Windows.

In this exercise, you are to see how many fundamentally different designs for sliders you can come up with. This means we are not going to concentrate on minor variations in color or shape but rather on more qualitative distinctions in functionality. I don't want to say more so as not to constrain your thoughts in any preconceived directions.

What To Do: Divide up into small groups of 3-4 people. Feel free to rearrange the seating in the room so as to facilitate interaction among members of your team.

You may wish to begin by coming up with as many different designs for sliders as you can. You may wish to take into consideration the user's task at hand. For example, how would you design a slider to support the selection of alphanumeric data, such as, movie titles in a huge database of movies? Or, for scientific visualization tasks such as the examination of average number of frost free days in each of the 50 states?

Try to come up with as many different designs as you can. Make a sketch of each one.

Here are some design issues you may wish to consider:

1. The slider widget cannot be too large if it is to fit on a small display.
2. Because of its small size, there is not room for more than one or two lines of text.
3. The slider should be operatable without looking at it continuously. This is because the user's eyes may be focused on the output of the data, rather than the input (manipulation of the widget).
4. The widget is used to select items from very large datasets. This means that there are a large number of items to a small number of pixels. You will not be able to map every item in the dataset to a pixel. Your widget must somehow allow the user to manipulate or select any item in the dataset.

Once you have come up with a set of possible sliders, try to rank them as best you can according to potential user preference. Which ones would you prefer to use? Try to rank them from most preferred to least preferred.

The Deliverables: In class you will transfer some (or all) of your slider designs to transparencies. We will attempt to gather as many different designs as we can come up with. We will then review them together and try to agree on a ranking for them according to potential user preference.

As usual, after the conclusion of the in-class part of the exercise each team should summarize its designs and the lessons learned in a written report which will be due Friday, February 21 by 5PM in Rick Kline's mailbox.

Your report should include:

1. a cover-sheet listing all of the participants in your group;
2. sketches of each of your designs; if necessary you may wish to add some notes to the sketch to make it clear how the widget operates;
3. a ranking of your designs, from best to worse, in terms of its usability. Which of your designs do you feel users will prefer?

Please hand in typed up reports. Your sketches may be done by hand if you wish.