|Screen design guidelines:
lessons learned with SuperMemo 98
eSuperMemo Project, 1998-1999
University of Technology in Poznan
Project is a research project at the University of Technology in Poznan that is run to
provide guidelines for future versions of SuperMemo. The presented text refers to graphic
user interface in the current line of SuperMemo for Windows. The author, Filip Kierzek,
member of the e-SuperMemo team, presents a critical analysis of the SuperMemo 98 GUI design and points out the errors
that should be corrected in future versions of SuperMemo. The author's opinion not always
coincides with that of SuperMemo World and the text
is annotated with hyperlinks to our official stance on individual points that is
summarized at the bottom of this text in the section Our comments
Here is the summary of main GUI design errors as enumerated by the author:
Screen design (Chapter 23 of Handbook of Human-Computer Interaction) provided me with theoretical knowledge that I needed to avoid some common mistakes while designing the eSuperMemo GUI (i.e. graphic user interface). It provides a short look at the literature on the subject and concise overview of the guidelines presented in it. It also refers to many empirical studies on the subject that bring more science to the matter which may be viewed by some as inexact science.
Having learned the theory, I needed some practical skills that would make it possible for me to design the eSuperMemo interface. To do that I undertook the task of trying to find out how these rules applied to the latest commercial implementation of the SuperMemo method: SuperMemo 98 for Windows. From the start, I quickly realized that there is much to be learned from SuperMemo 98 mistakes. SuperMemo98 GUI is unintuitive and hard to use I knew that ever since I started using it [see comment]. Until not lot long ago however, I did not exactly know why. SuperMemo 98 provided me with rich ground for such study therefore I undertook a systematic study of its interface. I looked at different pieces of SuperMemo and asked myself how were the rules of good design applied there. Some of the results of this investigation are used to illustrate the guidelines in the next section. An important point needs to be made. SuperMemo 98 is a good application. I have used it myself for relatively long time, and I need no convincing to the idea of optimally spacing repetitions. In fact I believe that the idea is too good to deny the masses access to SuperMemo by using a badly designed interface.
Each of the following subsections will deal with a particular aspect of the screen design. I will try to illustrate it with examples from SuperMemo 98 and sometimes from other programs. The examples will be both positive and negative with emphasis on the latter, as they are more helpful in learning. I do not give examples from the eSuperMemo. This has to do primarily with different goals our team was trying to reach in this project. The number of programs features is minimum since we were not trying to create software that would match the product of years of development at a successful commercial company. Our product is experimental and it is a way to demonstrate a possible future direction for various lines of SuperMemo on the commercial platform.
Therefore this section, although it does not speak directly about eSuperMemo, explains rules of design that were used while designing the user interface in eSuperMemo. It is therefore included in the paper.
Amount of information presented to the user
Most guidelines specify that the amount of information presented to the user should be minimized by presenting only what is necessary to accomplish the task at hand. Determining what task the user is trying to accomplish it is usually difficult when dealing with feature-rich software packages of today. While the following example comes from SuperMemo 98, it is more characteristic for the previous versions of this program. It is a window showing various learning process parameters. Still in version 7.0 of SuperMemo, users ability to hide this information from the screen while learning was strongly limited. None of the information shown below should concern user while he is learning, since it takes away attention from what should be users primary concern: recalling information needed to answer questions and grading the quality of ones response after comparing it to the answer provided by program [see comment].
Figure -1: Window with information about item currently learned
Once the optimal amount of information has been determined, information density considerations come into play. Information density in character mode screens has been defined as percent of available character places that have been used by characters. For graphical displays, the definition is more problematic. Analysis reveals that most textual elements in dialog box are black, and that typical MS Windows font used in dialogs (8 point MS Sans Serif) takes 57.6 pixels. Therefore, one can define information density for GUI as percentage of black pixels in a dialog box.
Analysis of 171 fixed size windows and dialog boxes from commercial Windows applications shows average density of 25%. [HCI] Interestingly, the average width and height of those windows are 402 and 305 pixels respectively, which gives them a ratio of 1.32, which is very close to width to height ratio for typical screen resolutions: 640x480 , 800x600 , 1024x768. All of them have 1.33 ratio. This is explained by the fact that conforming to this ratio maximizes usable space on screen.
Why is information density so important? If user is presented with information he or she needs to accomplish the task, their performance tends to deteriorate with increasing display density i.e. time and errors increase as the number of items on the display increase. SuperMemo 98 seems to be close to optimum in most cases. A strange exception to this could be the "Leech catcher" dialog box (available by choosing View : Leeches from the main menu). Its measured density of 2% (3.6% including the grays from grouping box 8% including the white spaces from check boxes) is much bellow the average for other software. This suggests wasteful use of screen real estate in this dialog, since by simple cropping of space from all sides the size of this dialog could be reduced by 50%. It turned out that the user could do this himself since this dialog box is resizable. But why? I have found no reasonable explanation for this [see comment]. While discussing this dialog, lets turn our attention to another problem: functionality vs. the ease of use.
Figure -2: south-eastern part of the "Leech catcher" dialog box.
What is the difference between the Close and Cancel buttons in above screen shot? If you dont know, dont worry you are not alone. I asked this question to a group of friends fellow computer science students. I received answers ranging from I dont know to there is no difference. After examining the buttons with mouse pointer, a ToolTip explained to me that the cancel button would close the dialog and discard changes, while the close button would close the dialog and retain changes. The point to be made here is that the benefit of allowing user the choice of either changing the values in the dialog or discarding them is minimum and vastly outweighed by the cost of confusing most users, who are likely to use this dialog rarely [see comment]
Let us return to the problem of information density. The situation above is somewhat unusual since normally designers are faced with the opposite problem how to reduce screen clutter while maintaining functionality. Recall the statement made at the beginning of this section user should be only presented with information that is necessary for him to accomplish the task at hand. Keeping that in mind one might wonder why were the check boxes for choosing type and status of item searched left. A definition of leach item implies that it should be an item and that is has to be in memorized state. Why then allow user to chose otherwise in "Leech catcher" dialog box? Perhaps this is left to convey to the user information about what leech is? Why then allow the user to deselect those checkboxes by leaving them enabled, while disabling the other check boxes? [see comment]. It looks like the programmer who coded this reused the "element filter" dialog box in a weird way. And final question: would it not be better to add a button to this dialog that would set parameters typical for a leach instead making a separate "leech catcher" dialog box? [see comment]
Grouping of information may perhaps be the most important element of screen design, since grouping does not only significantly improve the ease of information extraction, but also implies semantic relationships between grouped elements. Some guidelines referenced by [HCI] go further and try to explain why grouping improves users performance. To understand this, basic knowledge of how human eyes work is needed. Eyes balls are not moved by eye muscles continuously. Instead they travel is short rapid moves called saccades which last for about 150 milliseconds. When the eye stops for about 50 milliseconds, it is called a fixation. Human brain blocks the input from optic nerve during the saccades so that we do not see a blurred picture of our surrounding. Therefore the only time information is received is during those 50 milliseconds the eye has stabilized on something. The eye itself is constructed is such a way that we see clearly only the area of 5 degrees to each side of the fixation point. Therefore as a guideline to screen design it can be suggested that screen should be divided into 5-degree visual areas, so that they can be viewed with just one eye fixation. If area is larger than that it will require multiple fixations and therefore take longer to process. Average distance between user and the monitor is about 50 cm. Assuming most users today use 17" or smaller monitor with viewable area of about 16" at 1024x768 resolution, calculation shows that the maximum size of a group should be about 140 pixels in diameter. This number will be smaller for users using larger monitors (not common) and users who use their monitors in lower resolution such as 800x600. However, the second resolution is common use on the still very popular 15" monitors, in which case this size equals approximately 125 pixels. Therefore this second size should be the maximum single group diameter for a product targeted at todays user base. This number however seems too small to be put into practice by most screen designers. Observation of few dialog boxes from MS Word and MS Excel applications confirms this fact. Perhaps other considerations were more important while designing these applications [see comment]
Grouping can be determined by many factors. The screen shot from SuperMemo 98 illustrates some of them. Most common grouping is achieved by the use of graphical boundaries. This is illustrated by the top toolbar where groups of buttons are distinguished by their embossed appearance. This is effective but somewhat visually confusing since buttons typically have two states: normal and pressed. Some of the buttons there appear pressed while other do not. To add to the confusion this effect is not used consequently, as illustrated by the button with red cross and others. Compare this to Microsoft Word screen where grouping is much more legible and does not cause confusion with button states.
In SuperMemo 98 grouping based on similarity of grouped elements can also be observed. This has been done for three different text format buttons on the lower toolbar of SuperMemo 98 window and for the three shape (circle, rectangle and rounded-edge rectangle) buttons. This technique used alone does not seem to provide enough visual cues. The line shape button should logically be in the group with other shapes, but since it does not contain any strong color it is visually separate. Microsoft Word also uses this technique, however relying more strongly on graphical boundaries. Here the similarity is more often achieved through shape similarity as in buttons for justifying text (not shown) or redo/undo buttons.
Placement of elements
As mentioned before it may be very difficult to predict what the user is trying to accomplish at any given moment. This implies that we will have to show user more information than he or she will use. Therefore, we need a set of guidelines to organize the layout of information that will facilitate finding what is needed from what is presented. The first commandment of screen designer is "to be consistent". One of the reasons MS Windows were so successful was consistency. User, having learned to use one application, could transfer all of his general knowledge about windows, icons, button, dialog boxes etc. to another application. He or she did not have to learn from scratch how to save or open a file, but only how to perform specific tasks of the application.
SuperMemo does seem to maintain consistency in placement of control elements. "OK" and "Cancel" buttons usually end up in the lower right of each dialog box, menus stay in the upper part of the window. It is however somewhat inconsistent with other typical windows application. An example of this might be the use of ToolTips, which first of all do not use the system setting for color (as set in Control Panel). Secondly, it often appear in cases when they are not really needed i.e. for buttons. While ToolTips are helpful if the user does not know what a given control does, they can distract and annoy power user, especially if they cannot be easily turned off by setting an appropriate option. Imagine a ToolTip that explains to you what it means that a grade is "bad" every single time during 100+ repetitions of items each day (this is quite a usual situation for many users of SuperMemo). [see comment] Before the ToolTip is shown next to the mouse cursor, it appears in yellow color in the status bar. This would not be a problem except that the status bar has standard windows gray color so that moving mouse over any control causes a strong change in the area of users peripheral vision. It immediately draws attention and distracts user from current task. Displaying a description of current control without changing the background would not impair usefulness of this help system, since users would still notice the change. This information could however be easily ignored by the user if he or she was not interested in it. We can conclude that SuperMemo seems to be "overassistive" at moments. [see comment]
Almost all guidelines specify that series of related data elements should be presented vertically in a list rather than horizontally in running text. HCI quotes results of Wolf who found that using vertical list alphabetized within each column resulted in 37% less time to locate list element that did horizontal lists in running text. Interestingly the worst time was achieved by text formatted into columns but alphabetized within rows rather that columns. It is worth mentioning that this is the standard format for DOS command "dir /w" used in column mode.
Furthermore, the alignment technique used within columns should differ depending on what type of data is being displayed. If data is of numeric type, it should be right aligned on the decimal points to make it easier to compare relative magnitudes of an item. It data is alphanumeric it should be left aligned to facilitate locating the beginning of each item, where presumably the user will want to begin reading.
Table -1: right aligned numbers and left aligned text
SuperMemo does not take the correct approach in this matter, which is easily observed in the Workload window, which displays the number of items planned for repetition each day of a given month. Note how everything is left aligned including the day of the learning process ("No.") and number of items planned for given day ("Reps"). User is also overwhelmed with the amount of duplicate information they are presented in the column containing the date. Is there any reason to repeat in each cell the month and year, since it is clearly stated at the top? [see comment]
The term label-data relationship refers to relative placement of data input or display control and its description label. There are two commonly accepted techniques for labeling above the control and to the left of it. The later has the drawback of wasting large amount of screen real estate if labels are highly variable in width. This is visible in the "Leech catcher" dialog box, which has been presented earlier [see comment]. Looking over dozen or so dialog boxes from MS Word, I noticed that it uses both types of label-data alignment. Labels are placed above usually in dense dialog boxes with lot different options to choose from such as "Font dialog box". When there is more space or the controls are arranged in the list fashion, the labels are usually placed to the left and are left aligned relative to each other.
Figure -5: Workload window
We have consistently demonstrated that such outcries are temporary and fade away as soon as we tackle the complexity with new solutions. For example:
Last but not least, SuperMemo is a novel application with a number
of new approaches that are truly difficult to bring to a first-time customer. In 1996, we
opted for introducing the concept of levels and all
new users are practically required only to become accustomed with two operations: Add new and Learn.
The number of levels will be extended in the future and we are proud to be one of the few
applications on the market that provide a true stepwise introduction of an inexperienced
user into complex functionality of the novel aspects of SuperMemo