Articles Comments

GUI Journal » Automatic Features, Featured, GUI Design, Mistakes » GUI Design: Auto Outlines

GUI Design: Auto Outlines

If I were the type to post warning signs I would be tempted to post this:

Beware of Automatic

There’s often the assumption by designers that an application can “know” what you want and can make things “easy” for you by automatically doing what you intended. Microsoft® began making extensive use of this idea in its products in the 1990s, and more often than not, I found it to be more frustrating than it was worth—mainly because it was often so difficult to undo what had been automatically done. One example that persists today is automatic outlines in word processors.

MICROSOFT WORD®

Figure 1. Microsoft® Word® 2010 Automatic Outline

I remember vividly the first time I experienced automatic outlines in Microsoft Word. Figure 1 is a screen shot of Word 2010 with some text in a new document. The first two lines appear exactly as I typed them up to the text “1.” followed by the caret. As soon as [Tab] is pressed, Word automatically indents the line with the “1.” and is now in “automatic outline” mode.

The remaining text in Figure 1 was created by typing “Text” [Enter] followed optionally by [Tab] or [Shift]+[Tab] to move the outline level further to the right or to the left. All of the subsequent markers for each level (2, a, b, i, ii, etc.) were created automatically by the application. These are correct for each level of the outline and the feature seems pretty great.

The reason I remember my first automatic-outline experience so well is because I did not want the line indented; I wanted my “1″ and my “2″ to be at the left margin. I was new to the application and could not figure out how to get the format I wanted. And try as I might, I could find no way to enter my text into the document without Word putting itself into outline mode and changing things that I did not want changed. Frustrating.

Figure 2. Word® 2010 Paragraph Dialog

I now know that if I look at the paragraph formatting I will see that there is an Left Indentation value set that can be changed back to 0.0 (or whatever else). Figure 2 is a screen shot of my attempts to get the first level of my outline to be at the left margin and the Paragraph dialog that displays the automatic indentation that was applied when Word decided I must want outline mode. However, it still has the problem that changes to the indentation value only apply to the current caret location, or the selected lines. This means that if I select the entire outline and set the indentation to 0, then all levels are at the left margin. If I set only the first line at 0 and then enter a new line (as I did for Figure 2), it will also be at the left margin. But as the example shows, if I subsequently add new lines at new levels, then when I return to the first level the lines labeled with “3.” and “4.” are not correctly aligned with “1.” and “2.” That means that I must invoke the Paragraph dialog each time I return to that level of the outline. What a pain.

OPENOFFICE® WRITER 3.1

Figure 3 is a portion of a screen shot of OpenOffice Writer 3.1 with automatic outlines in the document and my attempts to get to the first level to be at the left margin. Like Microsoft Word, OpenOffice automatically detects that I must want to be in outline mode and (also like Word) OpenOffice indents the first level of the outline.

Figure 3. OpenOffice® 3.1 Automatic Outline with Decrease Indent Feature

There is something that looked hopeful that is shown in the second outline in the figure. I placed the caret at the end of the text on the second line and selected Decrease Indent from the toolbar (before the following lines were added). There are two problems: 1) The indent moved too far left (and no subsequent clicks of either Decrease Indent or Increase Indent seemed to be able to get the alignment on the left margin), and 2) Every subsequent line I added to the outline was also too far to the left (only the text indented correctly). Ugh!

Another issue is the fact that only numeric digits are used by default at each level of the outline. That is very unreadable, and became glaringly obvious when the numbers all aligned at the same (incorrect) location.

COREL® WORDPERFECT® 9

Figure 4. Corel® WordPerfect® 9 Automatic Outline

Figure 5. WordPerfect Changing Label from A to K

The only thing worse than an application that guesses badly about what I want, is when the “feature” also has frustrating bugs in it. Figure 4 is a screen shot of the WordPerfect® 9 automatic outline feature that I tried to use after my frustrating Word experience. This application also automatically put itself into outline mode, but when I tried to create a sub-level, only the text position changed, not the label position or label value.

Figure 6. WordPerfect with Correct Sub-level Indentations

Figure 5 is a screen shot of my attempts to get the correct label on the sub-level. I deleted the “3.” that was automatically inserted and replaced it with a [Tab] and “A.” at the desired location. All went well until I entered another [Tab] at which time my “A.” was converted to “K.” and that became the starting point for the rest of the labels at that level. (The lower right inset in Figure 5 displays the change.) The good news is that at this point WordPerfect understood that I wanted indentations at each level and from here on out all of the changes either to the left or right were displayed correctly as shown in Figure 6. I no longer was required to enter any tabs or labels.

Figure 7. WordPerfect with Non-sequential Labels at First Level

Figure 7 shows my initial attempts to convert the “K” back to “A” by opening the Reveal Codes panel and adjusting the value of the associated Paragraph Number. The change in Reveal Codes correctly converted the labels of the second level to “A.” and “B.” but the last line also changed from “3.” to “2.” so that the first level of the outline is now displayed with non-sequential digits. The point of all this is that it would have been much easier (and quicker!) for me to just have entered the outline labels myself instead of fighting with the poor implementation of this automatic feature.

WORDPERFECT X5

Figure 8. Corel WordPerfect X5 Outline Feature

The good news is that whereas Word and OpenOffice Writer still have frustrating implementations, WordPerfect figured it out. Perhaps in fixing the bugs in older versions that I described in the previous section the designers came to the same conclusion that I did: it would easier without the automatic feature. Figure 8 shows two outlines in WordPerfect X5. I entered the first outline by typing each of the outline labels and tabs myself, without the help of anything automatic. It was quick and easy. The second outline was created by selecting the Insert menu and then choosing the Outline/Bullets & Numbering… sub-menu.

Figure 9. WordPerfect X5 | Insert | Outline/Bullets & Numbering Dialog

Yeah, ok, the sub-menu name is a little clunky, but it presents me with a dialog (Figure 9) of various layouts and options appropriate for outline mode. That means that until I specifically tell the application that I want an outline, nothing is automatic. Fabulous! Now I’m not surprised by what happens and—more importantly—I’m also not left wondering where to go to make adjustments. Well done!

KEY DESIGN POINTS

  1. Beware of Automatic! If you’re doing something automatically for the user, then you’d better make it easy for them to undo it in the case that what you thought was obvious turns out to not be what is wanted.
  2. Never implement the automatic mode as the only mode.
  3. Make it easy for the user to know what the default values are and where to change them.

GUI Design

GUI Design Guidelines

Graphical User Interface

User Interface

Graphical User Interface Design

Graphical User Interface Design Guidelines

Written by

Carl Andersen currently works for Micro Focus International as a Senior Development Manager. Carl has led teams at NetIQ, Novell, and WordPerfect and been the principal designer of multiple GUIs which have received analyst acclaim.

Filed under: Automatic Features, Featured, GUI Design, Mistakes · Tags: , , , , ,

Leave a Reply

*


+ 2 = seven

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>