CS789, Spring, 2005

Activity instructions, Week 3

This week's activity: Explore the state diagram of a simple user interface.

It is extremely useful to have a formal model of any specific user interface, just because it is then possible to draw reliable conclusions about the control properties of the interface. (E.g., Does the interface always return to the start state? Do all paths to a particular state run through a particular antecedent state?) Many simple user interfaces can effectively be represented as state diagrams. To get a feeling how this works choose a simple interface -- withdrawing money from an automated bank machine, for example -- and reverse engineer the state diagram that describes its behaviour.

  1. Choose a simple interface. An automatic teller machine is one possibility; the course web pages are another; the university phone system is another.
  2. Observe the start state.
  3. Move through a normal interaction sequence, identifying states and transitions.
  4. Ask yourself how the machine behaves if you deviate from the sequence?
  5. Hypothesize a state diagram, and roughly sketch its topology.
You can get to this point by thinking about an interface you have used in the past, or by actually using one making observations as you go along. From here the activity can continue in any one of three ways; choose one and follow it.
  1. Test and elaborate the hypothesized state diagram by interaction with the real interface.
  2. Change the sketched state diagram into a better state diagram with equivalent or enhanced functionality. Consider such things as regularity, consistency and modularity in your design.
  3. Make some primitive web pages that have a transition pattern similar to the one you identified. Try interacting with them, and consider changes you might want to make on the basis of your experience.

Return to: