by Craig Marion
Interaction design -- as it has been broadly defined in part one of this article as creating compelling experiences -- applies to information design in many areas besides user assistance. I've listed some in the beige sidebar. But interactivity is such an important factor in providing user assistance that it deserves focused attention.
|
Some other areas where interaction design and information design intersect are:
|
The mainstream history of online user assistance can be recounted in a few sentences. In ancient times, on mainframes, it was placed on help screens summoned by the F1 key. In the PC world, DOS systems maintained this convention and developed the screens into contextual help systems. Then Windows came along and presented a new dominant platform -- with its own built-in "help engine." Maintream thinking about how to provide user assistance embraced this model. Online user assistance became synonymous with "help systems." And, following the same logic as the applications they supported, the help systems became more sophisticated and complex. Many became more difficult to use. At the same time, spurred on by the ascent of the Web and its independence from Windows traditions, a number of information designers began exploring alternative structures for providing online assistance. Many focused on evolving the help system model. They made help systems more visible, more useful in clarifying task structures, and more interactive with applications. (See, for example, What Is Embedded Help? A Simple Idea, Really by Cheryl Lockett Zubak, who is a leader in this area.) Others explored alternatives outside this model. They used a wide variety of approaches to weave information into software however and whenever it would be helpful. |
This paper is an attempt to map the current landscape of techniques used to provide online user assistance. I've drawn them together and categorized them so that they can be assessed in terms of their effectiveness, used to their greatest advantage, and contribute to the development of new and better techniques.
I've based my typology on a simple and fundamental distinction: that most assistance within user interfaces either explains something or helps users do something. This distinction lets us look at user assistance on a sort of continuum. I've called its outer boundaries -- whether the information explains something or helps users do something -- Explanatory Interactive Assistance and Interactive Performance Support. In between them are ways to present information that does more than explain -- it suggests or guides -- but it doesn't enable users to complete entire tasks, the way performance support elements do. I think that these techniques are best called Suggestive or Guiding Interactive Assistance.
Figure 1: At one end of the Intreactive Assistance Continuum, information is used to clarify options, what's going on, or what needs to be done. In the middle, it does something, suggests something, or offers corrective guidance. And at the other end, it contributes to the accomplishment of actual work.
I'm proposing this typology both an aid and as a challenge to information designers. It's an aid insofar as it's helpful in clarifying choices and techniques. It's a challenge in that it asks information designers to look beyond an inward focus on information itself -- on the clarity of its presentation and the accessibility of its organization -- and to concentrate on its contextual appropriateness and usefulness. Information designers need to keep in mind that the value of information within software is a function of its effectiveness in enabling users to achieve their goals. Interactivity needs to be seen as an attribute of information design towards that end.
Moreover, to perform their work effectively, information designers need to acquaint themselves with these techniques so thoroughly that they come to regard them the way artists regard paints on a palette. When they apply information to software, they need to select the technique as consciously as they craft the content.
Let's look, then, at each of these information types in turn. And let's consider each in light of how well it achieves integration into the work the software is being used to perform.
Explanatory interactive assistance presents information its authors think users want or need to know, or information they want them to know. It clarifies options, what's going on, or what needs to be done.
Explanatory interactive assistance is the oldest form of interactive user assistance, and still the most prevalent. It falls into these classifications:
I didn't include hypertext as a category on this list both because it's such a basic element that it's used within many of the others and because a thorough treatment of its varieties and uses would be outside the scope of this overview.
In the late Eighties and early Nineties, mainframe applications that were originally documented on paper frequently had manuals placed online and made accessible from workstations through a variety of SGML-based tools such as IBM's BookMaster and BookManager. These books improved information accessability through powerful search engines and were often linked to applications contextually, like help systems. At the same time, they were easier and cheaper to distribute than their paper predecessors. Interactive Books have increased in popularity because of Adobe's PDF format, which operates across platforms (Figure 2).
Figure 2: Adobe uses an interactive book as help for its popular Acrobat Reader. Hyperlinks in the navigation bar on the left and within the text itself make it easy to navigate.
|
|
|
The Microsoft approach to user assistance is explained and illustrated in Chapter 13, User Assistance, of Microsoft's The Windows User Experience. The basic elements are presented in the User Assistance Roadmap. The chapter then goes on to divide User Assistance into Contextual Help, Procedural Help, Reference Help, and Conceptual Help. The section on HTML Help explains its components and contains a brief description of Shortcut (Do-It) buttons. A final section on wizards completes the chapter. |
From their earliest days as simple help screens, help systems have provided assistance that was easier to access than going to a book. WinHelp, the system that runs under Windows, has dominated the online help arena for much of the Nineties. Its successor, HTML help, i s virtually identical to WinHelp in structure. Its elements are delineated in the green sidebar. The great advantage of HTML help over WinHelp is that its hypertext links can go out to the Web as well as into a help system.
|
Figure 3: The example of WinHelp on the left comes from Quicken 4 (1994); the one on the right from Quicken99. While there are some design differences, standard WinHelp has not changed a great deal over the decade. Solid underlines and buttons indicate hypertext links. Broken underlines indicate pop-up links. The essential model has been carried forward in HTML help, except that the viewer defaults to displaying both a navigation pane and a topic pane, rather than just a topic pane, as you can see in this example from Microsoft.
Some information that pops ups within applications displays as programmmed. Error messages are the most common example. Status bar messages, which Microsoft explains and illustrates as a kind of Contextual Help, is another.
Other information that pops up displays at the user's request. With it's Windows 95 Help engine, Microsoft introduced a type of pop-up help called What's This? Help. What's This? Help could be evoked from the Help menu or by clicking a question mark in the upper right corner of the screen. The system would then go into help mode, the cursor would change to a question mark, and the user could drag it to any object on the screen to see help for it (Figure 4).
Figure 4: This example of What's This Help from Microsoft Image Composer illustrates the pop-up description that displays when the question mark is dragged over an object on the interface.
A number of variant approaches to pop-ups have been developed. On a project I worked on in early 1999, for example, our team didn't want to provide assistance for every element on the interface. We just wanted to provide assistance at a few points where there were important things to say that we couldn't work into the interface in other ways. We put a red border around elements that required this extra information (Figure 5). Clicking on the border or the label within it brought up the information in a balloon. We called the information balloons "blurbs."
Figure 5: This is an illustration of the blurbs of information that Strohl Systems has included in its Incident Manager product. The border (which is red) indicates the presence a blurb. When the user clicks on 'Account Information' (left) or the border around it, the blurb appears (right).
Another interesting variation on pop-ups is Erik Bosrup's overLIB. Scroll down to the topic captioned "What overLIB does" and position your pointer over the links in this paragraph to see the variants that Erik has developed. Then look at how this approach is used in applications such as the Manilla Zoo or Tulling-Toppen. A similar approach to overLIB is used by the UMBC Agent Web.
When information pops up as a result of moving the pointer over an area of the screen rather than clicking on it, it's called a rollover.
|
|
Rollovers change the display in some way when a pointer touches a designated area of the screen. Two of the earliest uses of rollovers were Microsoft's ToolTips and Apple's balloon help. ToolTips displayed explanatory messages when a mouse rests on a screen object. (Information displayed using the NAME tag in HTML displays in a similar way.) Balloon Help performed the same function as Microsoft's What's This? Help, but it was easier to access. Applications such as Lotus Notes have adapted this approach in a Windows environment as well.
Figure 6:. On the left is an example of Apple's balloon help is from its Eudora product. On the right is an example of a ToolTip in Microsoft PowerPoint. In both instances, positioning the pointer over a screen object displays the assistance.
|
An increasing number of sites are using rollovers to expand the meaning
of headings. Look at the way Rochester
Institute of Technology uses them to change explanatory text in a
fixed box. Peachpit Press uses the
same technique in a more playful way. Media Alchemy doesn't confine the
rollovers to changes in a fixed area. Interval Research puts another
creative spin on essentially the same technique. Interaction Design has a simple but
elegant approach that incorporates animation. And the Theban Mapping Project has the
text explain categories that are otherwised identified only by pictures.
Look at the way OnHand illustrates the features of the display of the
world's smallest
computer and the way Temple Brith Achim presents its calendar. Do History uses a combination of full
colors on fades and descriptive texts. Maison de la France's Meet the Regions of
France displays both maps and the names of regions. |
While hypertext provides a link with a click, and may maintain the current context or jump to another context, rollovers provide information by just touching an object on the display with the mouse pointer. There's no clicking, and they always remain within the current context. Rollovers are powerful device that have just begun to be used in the late Nineties to present information effectively. Like hypertext, they can use text, images, or any combination of the two. PhotoDraw, from Microsoft's Office 2000 suite, uses them well. Figure 7 appears when the eight-module tutorial is launched. As a user slides the pointer over any one of them -- either the names across the top or the graphic icons surrounding the center -- each icon changes from pale gray to full color and an explanation appears in the center of the screen.
Figure 7: In Microsoft PhotoDraw, when users move the pointer over the name of the module at the top or one of the grayed icons that appear in a circle around the information box in the center, the icon becomes colored and an explanation appears in the center of the screen. |
|
|
Text, pictures, and any combination of the two can be made to move or animated in a variety of ways. Movement can be initiated or controlled by users or controlled by the system.
Swapping displayed information. Every picture that appears on a Web site is a file that's loaded into a Web page. One of the most common formats for these files is called GIF. Animated GIFs are more complex files that control the display of several of these images in sequence. Look, for example, at the banner at the top of Planet Animate. At this writing, it alternates two pieces of information, displaying each for about two second. Or look at the one on top of the Forbes 500 Annual Directory. It shows three pieces of information for about a second apiece, then two larger pieces for about three seconds each.
Animated GIFs offer a great many possibilities for presenting information effectively. Some others appear under Animated Explanations, below.
System-controlled Scrolling. A simple but effective technique has text scroll horizontally or vertically, as in a movie marquee in the thirties. Look, for example, at the way E-SIM uses horizontal scrolling to communicate a smaller amount of information. Another varient of this approach is used by John Deere. Information appears to be typed, and then scrolls vertically.
While not user-initiated, scrolling text certainly contributes to the user experience. Having text scroll can make it more prominent than changing its font, color, or size. CBS Sunday Morning, for examples, has the day of the week scroll across a full-screen stationary weather map every week. The fact that this is the only moving element on the screen increases the likelihood that it will be noticed.
User-controlled Scrolling. Sometimes it's not necessary for users to see an entire display all at once. This can be used effectively by creating displays that intentionally require them to scroll. TheCentury Timelines by ABC News (Figure 8) uses this approach effectively.
Figure 8: On ABC News' TheCentury Timelines site, after selecting a decade at the top of the screen, viewers can scroll for information on each of its years. The scrolling enables them to participate in the site.
Animated Explanations. Besides displaying text, animated GIFS can present information visually and aid in its communication. Isys Information Architects, who maintain the Interface Hall of Shame, have been using them effectively in this regard for years. On the Controls page, search for 'Unisyn's Automate Pro' and look at how showing the tab or in sequence is so much more effective than presenting it in a flat display. The visual elements page has many other examples. Search, for example, for 'The Text function in Microsoft Paint'. The single animated GIF takes the place of at least four figures that would have to be shown otherwise, and makes the point much easier to grasp. Another example of an animated GIF is Figure 16 in this article.
Microsoft uses animated explanations in a similar way in its Office 2000 Tour.
|
|
Sound, video information that's more elaborate than the animated GIFs, and the combination of the two are a final category of interactive explanatory assistance.
Sound.In Microsoft Money 99 (when the CD is accessible), each time users go into a new section of the program they receive a brief description of what they can do there. In the same vein, CD-ROM dictionaries commonly let users click on words to hear them pronounced. Because of the large size of sound files (at this writing -- Fall 1999), Web sites have used sound much more sparingly, but some use it effectively. I enjoy particularly the soothing surf sound of Lighthouse on the Web.
Video. Lotus ScreenCam can produce interesting video explanations of computer displays by recording a sequence and letting comments be added afterward. The comments can be visual, audial, or both. The size of the audio component increases the file size so dramatically, though, that often the audio component is not used. Lotus uses cards containing information rather than audio in its own examples. PC Show and Tell uses audio.
Demoshield is a similar product. It illustrates its capabilities in this gallery.
Multimedia. Multimedia, broadly defined, has been around for a long time. It's the integration of multiple art forms into a multisensory experience. In the PC world, much of the most creative work in multimedia was distributed on CD-ROM in the early and mid-Nineties and then shifted to the Web. A good introduction to the techniques currently in use is presented by the Web Developer's Virtual Library.
The most broadly used multimedia platform is Shockwave, which has been distributed for free since its inception. The Site of the Day Archive has hundreds of examples from early 1996 to mid-1999. Look, for example, at the Microsoft Office 98 Macintosh Edition Demo. It's straightforward, clean, and effective. The demo of Compac's Armada is more artistic and looks like a high-quality advertisement. The NSX by Acura site features 3-D navigation "designed to reflect the characteristics of the NSX automobile -- agile, sophisticated and fun."
|
|
Suggestive or guiding interactive assistance either demonstrates how to perform a task or presents possibilities to users they may not be aware of.
Do It Help enables the user to have the system perform a step or sequence of steps in a task for which he or she has requested assistance. A good is example is Microsoft's Show Me Help. If a user were to request help on inserting page numbers in Word 97, for example, Figure 9 appears.
Figure 9: If you click the Show me button in many Office 97 help topics, the system performs the task or subtask for you.
When the Show Me button is clicked, an automated cursor moves up to the Insert menu, selects Page Numbers, and the Page Numbers dialog box is displayed. A yellow prompt stating "Click where you want Word to insert page numbers" then appears under the Position field, and the user completes the task.
|
|
Another form of this type of assistance determines a user's probable goal on the basis of antecedent actions and then provides assistance towards attaining that goal. This is called Baysean inference.
Microsoft's IntelliSense technology uses this principle. In Microsoft Publisher 97 (Figure 10), for example, a yellow box containing information pops up when the user resizes an object. The user didn't request the assistance. The system ascertained its appropriateness.
Figure 10: This piece of information is presented by Microsoft Publisher 97 when a user resizes an object. In this instance it contains an amount of information small enough not to interfere with the task. This isn't always the case.
|
|
Corrective guidance provides intelligent feedback to enable a user to meet established criteria or achieve a declared goal.
Intuit's TurboTax does this especially well. It provides feedback to its users in a much more effective way than standard error messages, which typically appear in a box that must be closed before an action can be performed. Instead, TurboTax validates input when users tab to the next field, and if the input doesn't meet established criteria, displays an error message in the form of a Tooltip (Figure 11).
Figure 11: In Turbotax, user entries are validated when the user moves on to the next field. If an entry is invalid, a helpful error message is displayed immediately.
On his EPSS Infosite, Bill Miller explains how to create these pop-up messages on Web pages with and without cascading style sheets.
A prototype for Strohl Systems project I was involved with in 1998 provides another example. To work with the system, users selected tasks from short lists. This alerted the software to the user's goal. The software could then provide feedback and guidance to enable them to achieve these goals. If something inappropriate were entered, the system could be quite specific about what needed to be done.
|
|
Performance Support - help in getting work done -- doesn't need to be interactive. Sometimes a quick reference card, or instructions embedded in an interface, are all that's needed. Making these elements interactive doesn't necessary enhance their effectiveness. It can diminish it.
On the other hand, interactive elements used appropriately can frequently make performing work easier. Wizards guide users through the performance of simple tasks. Cue cards and coaches help them with navigation and the performance of more complex tasks. And interactive instructions can provide greater assistance than both of these and guide users through the completion of tasks with minimal effort. Interactive instructions are most effective when they are integrated into intuitive applications that are designed to optimize human performance.
Wizards step users through the completion of tasks that have clear structures. Microsoft includes them in its user assistance toolbox and provides guidelines for designing them. User Interface Engineering provides complementary guidance on When to Develop a Wizard.
Figure 12: Wizards typically display a series of panels. On each one the user makes one or more choices. The last panel contains a finish button that processes the set.
The problem with wizards is their linearity. Although in applications such as Publisher 2000, Microsoft goes to great lengths to use them to let users make a wide variety of choices, they're most often used for relatively simple tasks. Still, since many tasks are simple linear, wizards are often the desired form of user assistance. A tool to help create them is GURU's GuruWizard.
|
|
Cue Cards are displayed on a portion of the screen (usually a column on the right) of the main application. They structure tasks and provide step-by-step guidance towards accomplishing them. The tasks they support can be linear or involve branching.
Figure 13: This example of Cue Cards from Microsoft Publisher 2.0 illustrates them clearly. Publisher 2000 now uses sets of sophisticated wizards to capture the functionality it presented earlier through Cue Cards.
They can also include links and launch actions and, in some applications, can communicate with the application and customize the instruction based on this communication. In this way, Cue Cards serve as a customized tutorial.
|
|
Coaches provide greater versatility than Wizards. They assist in tasks that aren't necessarily linear. Look at the coach that Lawson Software developed for purchase and inspection, or the coach that Strohl Systems developed to help inexerienced users build business recovery plans. These versatile devices provide essential forms of support such as task structuring, knowledge, navigation support, and other performance support elements to help users accomplish more complex tasks than Wizards can support.
|
|
Interactive instructions can be created in a variety of ways. Some approaches strengthen task support by providing assistance a step at a time and clarifying each step. Others link instructions with tasks in a more integrated manner and provide stronger interactive feedback.
WexTech's Help Xtender is an one example of the first type. It's a tool for building interactive step-by-step instructions. The user is presented with an embedded help window as part of the application. Each step the user needs to take is highlighted. When the user completes each step, the next one is highlighted until the task is completed (Figure 14)
Figure 14: WexTech's Help Extender coordinates the steps of task help with actions taken on the interface, guiding users through the completion of task.
A more sophisticated implementation of the same principle is Apple's Guide. It presents instructions a step at a time an assistance window. At the same time, it draws a bold circle around the element of the screen that needs attention (Figure 15). When each step is completed, the next one is displayed.
Figure 15: Apple's Guide applications coordinate step-by-step instructions with indicators within an application pointing out where action needs to be taken. When a step is completed successfully, the next one appears.
We're exploring the other approach at Strohl Systems. One of our designs has users select the task they want to perform so that the system can switch into a mode geared to the performance of this task. Like Apple's Guide, it will present steps in sequence, one at a time. Rather than simply show users where they need to take action, however, it will support them with a variety of forms of interactive feedback through the completion of each task. These ten slides (slide 36 advancing to slide 45) explain and illustrate the technique.
Figure 16 illustrates another Strohl Systems design using this approach. By answering a series of questions that appear one-at-a-time, users modify a visual representation of a structure they need to create. Each time they make a choice, they see its consequences.
Figure 16: Another variant of interactive performance support being developed by Strohl Systems involves interactive instructions that modify visual representations. Users are presented with simple instructions and see the consequences of their choices on the screen. I'll be speaking on how we designed and developed this approach in depth at Performance Support 2000.
|
|
The importance of interactivity has been recognized by information designers
for some time. In the February 1999 issue of Contentious, a Web-zine for writers
who create content for online media, editor Amy Gahran published the results of
her first reader survey. Under the heading Topics to
Cover she listed 32 that the 401 readers who responded to the survey wanted
to see in future issues and the percentage of readers interested in them. Number
one, with 56%, was "the overlap between design, programming, and content." That said, there are no simple, out-of-the-box solutions for creating this
overlap. While I've presented my typology of interactive assistance as a
continuum, the value of one technique over another must always be determined by
context. That's why a palette is a good metaphor for grouping the techniques. No
colors on an artist's palette are "better" than other colors. Their
appropriateness depends on the totality of the rest of the picture. Figure 17: The Information Designer's Palette
of Interactive Techniques. The information designer's challenge is to select the
appropriate interactive techniques and use them in concert with non-interactive
techniques to provide the best support possible to enable users to attain their
goals. The whole issue of making information interactive is particularly significant
to documentation and development groups that rely on online help. Standard
online help forces users to break their workflow and find answers to their
questions. Variations such as embedded help and cue cards anticipate questions
and often provide helpful task structuring. These variations are significant
moves in the right direction, but they can only take integration so far. So long
as user assistance is developed separately from applications and structured to
complement them, it will never achieve its proper form as an integral dimension
of unified products. So: information designers, take heart, read the handwriting on the wall, and
continue to build your skill sets. As users discover the effectiveness of
interactive assistance, they'll come to expect it, their expectations will drive
its growth, and its growth will spawn new and more powerful techniques. It will
also cause information design to be recognized as a dimension of software
development that can no more be isolated from software development than visual
design and interaction design. It won't be too far in the future when software that requires help systems to
prop it up will be regarded as primitive. Users will expect software to be
obvious as a matter of course. And information designers who understand
interactivity, and can integrate information into software to make its use
apparent to its target audiences, will commonly be regarded as among the most
valued members of the teams that build it. Figures 5 and 16 are copyright Strohl Systems and used with permission. Craig Marion is an information designer building his skills in
performance-centered software design. He is currently working on a team at
Strohl Systems that is using a combination of interactive instructions and
visual representations to guide users through tasks that previously relied on
complex dialog boxes and will be speaking on this at Performance Support 2000. An abridged version of this article entitled "The Information Designer's
Palette of Interactive Techniques" was originally published in the May 2000
issue of News and Views, the publication of the Philadelphia Metro
Chapter of the Society for Technical Communications. You can find more
information about designing information interactively on the Click here to send an email to the
author.
page of his Web site, the 
.
While information can be presented extremely
effectively within interactive books, using them requires software users
to break their work flow, switch from a doing to a research mode, find the
information they're looking for, comprehend it, and then apply it. The
system may take them to an appropriate topic with a contextual link, but
they have to seek the details they need.
