Screen design guidelines: Lessons learned with SuperMemo 98

Introduction

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 program’s 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, user’s 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 user’s primary concern: recalling information needed to answer questions and grading the quality of one’s 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, let’s 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 don’t know, don’t worry – you are not alone. I asked this question to a group of friends – fellow computer science students. I received answers ranging from I don’t 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

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 user’s 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 today’s 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 user’s 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]

Spatial relationships

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 it’s 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

---

Our comments

1. Does SuperMemo have to be unintuitive? - Over the years we usually experienced a customer outcry in reference unintuitiveness each time new functionality was introduced. Historically, the most criticism was attracted by the following steps:
   • moving to the Windows platform in 1992
   • introducing the knowledge tree in 1995
   • departure from simple question-and-answer paradigm in 1995

   We have consistently demonstrated that such outcries are temporary and fade away as soon as we tackle the complexity with new solutions. For example:

   • the Windows version was accepted as an increasing number of users accepted the platform and as we were able to closely follow user criticisms as to the departure from Windows standards
   • the problem of knowledge tree became less painful with the introduction of categories which evolve and are enhanced with new functionality with each release
   • the problem of hypermedia was tackled with templates and a major breakthrough came in 1997 with Merge with template operation that continues to evolve to make templates come closer to styles known from Microsoft applications

   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
   

2. Why is there so much data on the screen? - we agree with the idea of minimum information in proportion to a given task. However, we cannot agree that this pertains to the statistics windows. These windows do not standardly appear on the screen during the learning process. The user may but does not have to bring them up and use them during repetitions. Our research shows, however, that the more advanced the user is, the more likely he or she is to use F5 to bring up statistics windows during repetitions. Those windows present information that may or may not be useful in the learning process. Apart from most often inspected data such as the number of repetitions left in the queue (Outstanding) there is a great deal of information useful in managing information in accordance with Six steps to excellent memory. Individual pieces of data can be useful at different moments and there is no simpler solution than simply presenting all valuable information on the screen. The statistics windows should act as a flight deck for an experienced SuperMemo pilot who wants to supervise all critical parameters in flight
   
3. Ugly dialog boxes may not result from bad design! - we agree that some dialogs in SuperMemo do not look well (as the presented Leech catcher example). The problem here does not come from design but from implementation. For some reasons the Scaled property for dialog forms in Delphi (the language in which SuperMemo was written) does not always work as expected. This results in wrong scaling (only in some combinations of resolution and font size setting) that makes dialog boxes look "bloated" with wasteful space on the margin. Once we figure out how to go around it, the problem will be gone for good
   
4. Confusion: what is the difference between Close and Cancel? - Actually there is a difference between Close and Cancel in the leech catcher dialog box. Both buttons abort the leech hunt operation; however, Close saves the new filter setting while Cancel does not. If the users wants to quit leech hunting but still would like to save the newly selected leech parameters, he or she should choose Close. Naturally, we agree that in the contexts of the generated confusion, we should either remove the Close button or better document it
   
5. Bug - all leeches by definitions are memorized items. Unselecting the Memorized checkbox does not have any effect and should be considered a bug
   
6. Why are filter and leech dialog boxes separate? - One of principles of programming is orthogonality and reusability. This may sometimes conflict with the user-friendliness criterion; however, we disagree that this is the case with filter and leeches dialog boxes. Both dialogs use the same form and as such make it easier for the user to learn to use one dialog box after becoming familiar with the other
   
7. Hints can be turned off - Hints in SuperMemo can be turned off (Window : View : Hints). As for the hint for the Bad grade button, we must disagree again. We agree it can be annoying for a power user (who can always turn hints off). However, our main goal at SuperMemo World is to bring SuperMemo to an ever increasing circle of users. We have confirmed again and again that theoretically SuperMemo might become as popular an application as word processors and spreadsheets (our surveys showed that many would rather part with their MS Word than with SuperMemo). The main reason we are still far from this goal is the difficulty in attracting a new user who may not necessarily be aware of his or her own need to own and use SuperMemo. On the other hand, many beginners ask repeatedly about grading. They do not know when to choose Bad and when to choose Null. Buttons hints are the shortest way to quickly assist new users with solving this problem. And this cannot be stressed enough: for a new user choosing grades can be a huge problem! A problem that can grow to proportions that actually may discourage many from continuing to use the program! 
   
8. The annoying flashes on the status bar - the idea of displaying hints on the status bar came from the simple limitation of Delphi (ultimately derived from limitations of Windows API) which does not provide tool-tip hints for menu items. We did not want the user to be left without assistance in his or her effort to understand individual menu items and we opted for displaying hints on the status bar (which at the time of implementing the idea was the simplest and most reliable solution we were aware of). However, we quickly realized that hints often go unnoticed and decided to make them show more prominently by setting them off to the yellow background. And yes: we do like the word "overassistive". As noted earlier, winning new users of SuperMemo is currently our utmost priority. We have seen it in hands-on research what simple obstacles can put a potential user off and we try very hard to make sure this does not happen. Rarely this effort should hinder a power users though. If you turn off hints with Window : View : Hints, the flashing on the status bar will be gone
   
9. The attempt to compute the optimum size of a dialog box or dialog box group on the basis of the visual field focused on the macula is, to put it mildly, very controversial! This is not a matter of feasibility for interface designers! After all, interface designers are also users of software and they do have a reasonable sense of the comfortable!
   
10. Workload alignment is ugly - we agree with this opinion. The reason is quite trivial. The workload is implemented using a very flexible and reliable TStringGrid component in Delphi. This component does not have an alignment customization for individual cells; not even for the whole grid. Custom grids can be designed as well but we did not find them reliable. On the other hand, the formatting of data in Workload has been a subject of unending storm of contrary ideas and propositions coming from users of SuperMemo. The observation that months do not have to be displayed in each row as the whole column is labeled with a single month is correct. However, we have received a specific request from a customer to add months and years in each row. Once this was implemented, others protested. Yet others proposed adding the day of the week! Ultimately we arrived to the conclusion that we will only be able to reconcile those different opinions by providing users with a selection of formats to choose from. This customization will be available in future releases