This is a new browser window. When finished viewing, just close this window.

Author: Jeff Johnson
UI Wizards, Inc.

[Excerpt from Jeff Johnson's book: GUI Bloopers: Dont's and Dos for Software Developers and Web Designers]

Several years ago, the developer of a music-instruction program called RhythmTutor asked me to review the program's user interface. RhythmTutor's purpose is to help people learn to read music by providing practice in reading rhythm notation: note durations and rests. Users perform exercises by pressing the computer's SPACE bar in time to displayed music and metronome tones. At the end of each exercise, RhythmTutor evaluates the user's performance, indicating how many notes the user missed, how many extra (unwritten) notes the user played, and whether the user started and ended notes late, early, or on time.

The first release of the software presented all of the feedback numerically. To indicate whether the user was starting notes early, late, or on time, RhythmTutor calculated and displayed two pairs of statistics, one pair for note-onset, and one pair for note-release. The statistics for note-onset were:


Feedback display before the redesign.

In my review of RhythmTutor's user interface, I commented that the feedback display was too textual: the note-tallies were "buried" in prose text sentences. More importantly, the bias and error statistics were very difficult to interpret. I advised the developer to redesign the display to make the "Missed Notes" and "Extra Notes" scores more prominent. I also suggested that the numerical Bias and Error scores be replaced by a graphical display using histograms to show how the user's note-starts and note-ends were distributed around where they should have been. The developer took these suggestions and redesigned the feedback display as follows.

RhythmTutor Score Display: After

Redesigned Feedback display.

In my opinion, the developer did a good job of redesigning the feedback display based on my suggestions. I might have made the histograms vertical instead of horizontal so that time would proceed from left to right for both graphs, but that's just a minor detail, and there are some advantages in the histogram design the developer used. Overall, RhythmTutor's feedback display was greatly improved.