Originally published in User Interface Design Workbook, Multimedia Computing Corporation
Hypermedia, sometimes called interactive multimedia, offers one of the greatest promises for computing. It brings together numbers, text, drawings, photographs, animation, video, and sound, presenting them in an interactive and therefore nonlinear format.
Such a rich, new medium almost invites confusion. With no tradition to follow, and so many media available, information often becomes hopelessly complex and obscure. Sadly, early results have often been a confusing mess.
Still, the potential for hypermedia is great. The challenge for designers and authors is to find ways to make interactive multimedia clear.
These are not a pencil, a paint brush, a spray can, and a paint bucket. They are images of tools appropriated to represent computer tools. These images make users more comfortable with the new tools. Perhaps because we still don’t see computers as independent of the tools we use them to replace, it’s difficult to think of using other images for the computer tools.
Inventing new media
Understanding the forces that shape all new technologies may help us better understand hypermedia.
People are always looking for easier, faster, cheaper ways of doing things. This desire to improve efficiency leads to changes in technology. At first, a new technology is often seen as an improvement on an older way of doing things. In time, people stop comparing the new technology to its predecessors and start finding new uses, new methods, and new techniques for it.
For example, when photography was invented, some people thought that it would replace painting because photographs were obviously a more accurate way to record images. While photography certainly affected painting, the two are now seen as different—not competing—arts.
When movies were new, they were considered an offshoot of theater. Books instructed directors to place the camera “far enough away from the stage to record all the actors.” Later, directors discovered they could move the camera and, with it, the audience’s point of view. Along came new techniques like pans, close-ups, and cuts. Instead of replacing live theater, film became a different way to tell a story. Filmmakers developed their own way of telling stories—a language of film.
Film techniques such as close-ups let a director stage a scene differently from the way he or she might for a live theater performance.
Like all new technologies, personal computers began as an easier, faster, cheaper way of doing things—accounting, writing, sorting, and tracking records. For designers, they’re a new tool for setting type, drawing, and laying out a page. For people who make videos, they are a new tool for animating and editing. The new tool can be useful for producing finished work in older media—ink on paper or video tape.
While the computer will continue to improve as a tool for working in other media, it is also becoming a medium in its own right. As we try to understand and work with this new medium—to develop interfaces to it—we will certainly draw on our experience with older media, but we will also have to develop a new language for the new medium.
Defining the problem
Designing an interface is more complicated than just picking up this year’s design annual and imitating a popular look. Hypermedia is still so new that it’s at once a blank slate, a multi-dimensional slate, and not a slate at all. With no existing traditions, you have to start somewhere. In order to determine which existing conventions and techniques are useful and to evaluate new ones, we must set criteria.
Like all communications, hypermedia should be clear, concise, and appropriate. The only way a designer or author can meet these criteria is by having a full understanding of the communication problem and then evaluating options based on the requirements of the problem.
The more people involved in a project, the more complicated the process of defining the problem. Define your communications objectives as clearly as possible. Don’t stop with “I want it to be jazzy” or “I like bright colors.” What’s the major point you want to make? What are the secondary points? What evidence or examples do you have to illustrate those points? Who’s the audience and why should they care about what you’re saying? Is hypermedia really the most appropriate way to communicate the message? Why does the message need to be delivered in an interactive form?
Defining your objectives begins with a lot of conversation about your purpose, followed by a lot of testing of the results. Once you have a thorough understanding of what you’re trying to accomplish, you can start to figure out how.
Because hypermedia is such a new way to communicate, the most important goal to keep in mind is to be clear in what you say and how you say it. There is no room for sloppy design in hypermedia. An image that isn’t clear will be overlooked or misinterpreted. If a path that leads to a crucial piece of information isn’t obvious, that information may never be found. If the information isn’t clear right away, your audience won’t stick around to try to puzzle it out. Clarity of design will make the difference between a piece that’s used successfully and often, and a piece that isn’t used.
For centuries, people have used symbols to communicate. The meaning of this New Mexican petroglyph was clear to its makers, but is somewhat obscure now.
The myth of the intuitive
The easier an interface is to understand, the easier it is to use. Programmers, designers, and computer companies often talk about designing interfaces with the goal of making them “intuitive.” But any symbol is intuitive once you know what it means. Symbols have meaning, not because of natural rules, but because people agree on meanings and teach them to others. If you set up an interface based on a set of symbols, then people must learn what the different symbols mean before they can use the interface. That requires a lot of effort on their part, especially if you use familiar symbols in new ways. If the same symbol has a different meaning every time it appears, then the viewer must unlearn the old associations and learn a new one each time he or she encounters it. That’s why symbols can be so confusing.
When you design with symbols, you need to understand that the assumptions that you have about a symbol may differ considerably from the assumptions that your audience has. When people see a symbol on the screen, how will they know what it means? If a symbol is also an interactive object, it requires the viewers’ participation. How will they know that it’s interactive, or what they’re supposed to do with it?
Here’s a more familiar symbol. You might say its meaning is intuitive. It certainly seems more so than the rock painting, because we’re used to seeing it on doors. We know what’s behind the door. Right?
This? Or this?
Actually, it’s this. There’s no direct relationship between
the symbol’s shape and its meaning. You wouldn’t be able to
guess what it means if you hadn’t seen it used this way before.
Things should look like what they are
One approach to interface design is to take some real world environment or real world object and use representations of it to stand for information or tools. The Macintosh desktop interface is a metaphor that people call “intuitive.” After all, many people are familiar with documents and folders and trash cans. But the success of the desktop metaphor actually has little to do with the metaphor. Its success is based on the fact that icons are objects and that you can directly move those objects. You can move a file into a folder or copy it onto another disk. You can put a file in the trash to throw it away. So you might expect that putting a disk in the trash would erase it. Instead, that ejects the disk. That’s one inconsistency in the desktop metaphor. The more inconsistencies you have, the more confusing the interface.
There’s a direct relationship between icons on the desktop and the files or actions they represent. What you do to the picture, you do to the document. Place an icon in the trash, and you delete the document.
Some hypermedia documents are designed with a table of contents that looks like some part of the real world such as a tree, a road, or a building with different rooms representing different parts of the document. But these metaphors don’t necessarily make the information clearer. If the index looks like a tree you’d expect it to resemble a tree in other ways, and it probably shouldn’t look like a house unless it’s structured like a house. It’s hard to see how these metaphors help. Making the information look more interesting should not be a criterion. Making it clearer should be.
It’s tempting to start designing an interlace by taking some real world environment or object and using it as a “metaphor.” Problems arise when the metaphor doesn’t precisely match the information or function that it’s intended to represent.
Designers searching for interface metaphors often think of books. Books are a traditional place to put words, numbers, and pictures, and might seem like a natural model to follow in designing hypermedia. Some designers create computer screens that look like they have “pages” with “spines” running down the middle or the side. The premise is that this is “friendly.” Whoever came up with the basic structure for a book probably wasn’t trying to be friendly. Books look like cardboard and paper because they’re made of cardboard and paper. Books have pages because pages are a convenient place to put words. Books have spines to keep the pages from falling out.
This HyperCard card imitates a book’s form but not its function.
If the computer screen looks like the first page of an open book, you can’t tell much by looking at it. You can’t tell which “page” you’re on, how many pages there are, or what order they’re in. You might think you’re “turning the page” to go to the “next page,” when in fact you’re actually jumping to a different “book.” You’re led to expect what you see on the screen to work like a book—that is, to be a series of pages, one after the next. If it isn’t, the image is misleading and confusing. If it is, the question remains: why put a picture of a book on the screen? This is a little like printing a photo of a page on a page before putting words on it.
You can’t solve the interface problem just by borrowing the image of a familiar medium (like storing words on pages connected by a spine). Instead, we must find new solutions appropriate to the new medium. The question isn’t whether hypermedia should look like a book, a movie, television, or anything else, because the answer is probably no—hypermedia should look like hypermedia. And we need to figure out what that means.
We can’t afford gratuitous decoration
Decorative images such as dot patterns or frames are often used in hypermedia. This approach is not new in graphic design, product design, or even furniture design. Take wood-grained formica. You’ve probably seen a plastic tabletop made to look like a natural material. But it doesn’t fool anyone. And it doesn’t improve the table. In fact, it might have been a perfectly good metal and plastic table if the efforts to make it look like wood weren’t so pathetic.
Many Victorian cast-iron stoves are covered with “carvings” like those on wooden furniture—leaves, claws, and all sorts of filigree. These decorations grew out of an earlier tradition. They were an expression of wood carvers’ skill with their tools and of their love of their craft. The decoration isn’t appropriate for mass-produced imitations made of a different material. Are these the kinds of things we need in our homes? Are these the kinds of things that we need in our interfaces?
Decorations on some handmade furniture are an expression
of the wood carvers’ love of their craft. Such decoration has
no place in mass-produced objects made of other materials.
This is a pretty frame …
… and this is how much screen space it uses up.
That space might have been better used for information.
“Computer art” is an oxymoron
If imitating an old design is tempting, so is the flash and sizzle of something new. It’s easy to assume that the more you exploit the computer’s strengths visually, the better the results. Such an emphasis on technique rather than substance makes us cringe when we hear the term “computer art.”
If you’ve ever been to a computer graphics show, you’ve probably seen many pictures of metal people and chrome corporate logos whirling in space. Maybe you can paint shinier chrome with a computer than you can capture in a photograph, but what’s the point? When they don’t add anything to the message or when there’s no message to begin with, these effects are just as meaningless and silly as plastic pretending it’s wood.
Still, animation can be very effective as a communications device. It can be the best way to show a process happening over time, or how something works. With computers, you can animate things that are otherwise impossible to see, like the inside of a beating heart, or the fl ow of air in a thunderstorm. Animated icons are intriguing. They could be a useful way to show the user what’s going on. For example, a printer icon might appear to print a document to show that the real document is being printed in another room. But animated icons lose their effectiveness when every object on the screen is moving.
Examining narrative structures
The attempt to base interfaces on metaphors is really an attempt to define a structure. Examining structures in other media may help us develop structures in hypermedia. In other media, structures grow out of a compromise between the physical constraints of the medium and the content of the message. Text in a book lends itself to a linear structure.
Some messages have simple structures. A poster or an ad might make just one point. A stop sign is another message which you read all at once.
Books and films have more complex structures. These are linear or serial forms—they have a beginning, a middle, and an end. Usually you start at the beginning and go on through the middle until you reach the end, and then stop. Although the format might be linear, the story often isn’t. You might go back in time, then skip forward.
Similar techniques apply to all kinds of narratives. You can use flashbacks, dreams, a story within a story, or interwoven stories to present an idea that doesn’t fit into a linear structure. Some of the effects used in film are ways to get around the limitations of the physical medium. A visual dissolve shows that time has gone by. Or a montage of a lot of different quick shots might show a lot of things happening at the same time.
A diary is a good example of a simple narrative.
Each day in the diary corresponds to one day in real life.
Live TV coverage of an event has a similar structure.
A cooking program is different. You watch Julia Child put
together the ingredients of a dish, but you don’t sit around
watching it bake. The show skips forward in time.
“Little Red Riding Hood” is more complex. Through a flashback
(“meanwhile…”) we find out what the wolf has been doing
while Red Riding Hood was still travelling.
Hypermedia has few of the physical limitations of linearly structured media. Because it’s non-linear, it can appear to have no structure at all, which can confuse the audience. In a book or movie, you don’t have to worry about what to do next. Without a linear structure, three questions become important to the audience: Where am I? Where have I been? Where can I go?
Looking at a book, you rarely stop to think about where you are. You know that the stack of paper in your left hand is the part you’ve already read and the stack on the right side is what you haven’t read yet. As you go through the book you always know how close you are to the end, because one side grows while the other shrinks at a rate directly proportional to the speed at which you’re reading. But empty computer disks look the same as full disks. You can walk all the way around the computer, or open it up, and still not see the data, what you’ve already seen, or what you’ve missed. That’s why designers need to make the structure of hypermedia documents clear.
When faced with a book, most people have certain assumptions
about where to start and where to go next.
Defining hypermedia structures
If we can identify and label structures within hypermedia, then we can start to develop a vocabulary for discussing them with each other, with our colleagues, and with clients. The structures give us tools for designing hypermedia systems and making them easy to use. We’ve identified seven basic structures: series, spatial zooms, parallel texts, overlays, hierarchies, matrices, and webs.
The most familiar structure is a linear series, like pages in a book or slides in a slide show. The HyperCard metaphor, a “stack of cards,” implies a linear structure. You might also extend that idea and create several interconnected linear structures. For example, the history of painting, the history of architecture, and the history of music might each be represented by a time line. They might be connected through events that influenced all three.
A spatial zoom lets you move between distant and closer views of the same information. This could work in a literal way, say, zooming in for a closer view of a map or a diagram. You might also think of it metaphorically. “Clicking” on a word to expand it for a definition—like looking for a footnote—is a kind of zoom. Thus a paragraph giving a general overview of a topic might have “clickable” phrases which can zoom in to more detailed information.
Parallel texts can be variations of the same document or different documents with links between relevant parts. You could skip back and forth by following the links. You might use this structure to represent different language translations of the same text, different points of view on the same topic, or different drafts of the same document.
Parallel texts shown on the left. Overlays shown on the right.
Overlays allow you to make comparisons by looking at different views of the same information. You might start with a map with many different overlays so different people could choose political, historical, or geographical views of information. Displaying two or more different sets of data on the same map can lead to startling discoveries.
Edward Tufte has described how, in 1854, Dr. John Snow ended a cholera epidemic in London by plotting the location of water pumps and cholera deaths on a map of the city. Overlaying these three pieces of information clearly showed that most of the deaths occurred near a single pump. Dr. Snow had the pump handle removed and ended the epidemic. Peeling away overlays can also reveal structure, as in transparent anatomy drawings.
Hierarchical structures are among the most commonly used in hypermedia. They start with a main menu that branches to a number of different paths. Typical examples are organization charts, family trees, and most training projects where students make choices to follow different paths of study. These trees are often modified to provide connections between branches. For example, a hypermedia organization chart might show all the departments in a company. Connections between branches might show the fl ow of projects through the business.
Tree or Hierarchy
Though these may not look like trees, they share the same structure.
A web or network structure doesn’t follow a hierarchy or path. The nodes are connected to each other based on relationships seen by the author. Associations you make in your mind work this way. So do airline routes.
Web or Network shown on the left. Matrix shown on the right.
A matrix is a multi-dimensional grid, most familiar as a Cartesian coordinate system. Several linear paths intersect to take you to one particular point in a matrix (x,y). You might find your way there by answering a series of multiple-choice questions. Your answers define a unique point in the matrix. For example, a shoe store is a sort of matrix of shoes. Your purchase is defined by a point in the matrix: men’s, black, leather, size 9, wingtips. A linear structure is a one-dimensional matrix.
This is by no means a definitive list of structures. There are probably others. They are rarely found in isolation. In practice, most hypermedia documents make use of several combined structures. You can use these structures to organize information and to give users a sense of where they are, where they’ve been, and not only where they could go, but also where it could be most interesting to go next. Of course, you still can’t open up your computer and see where you are—but you shouldn’t need to.
These two diagrams show how a point might be defined
on a two-dimensional matrix. We first saw this sort
of diagram in a stack by HyperPro.
This is one way a point could be defined on a three-dimensional
matrix. We first saw this sort of diagram in a stack designed
by Paul Souza.
Once you’ve defined a structure, there are a number of ways you can make it visible to the viewers. You can start with a simple diagram showing the stack’s structures and the connections between them. You can design navigation tools to reflect the structure of the stack, for example, users might click on parts of a grid to find information in a matrix, or they might click on text buttons to define criteria and then see the corresponding point highlighted on a drawing of a matrix.
Finding ways to make hypermedia structures clear is an area which needs a lot of work, and which offers tremendous opportunities for designers.
Making HyperCard stacks clear
Many of the designers now working with hypermedia are using HyperCard to create “stacks” of interactive “cards” on the Macintosh screen. Clicking on “buttons” on the screen can take you across “links” to other cards or stacks. This section covers techniques that we’ve found useful in making the interface to HyperCard stacks clear. These techniques could also apply to other hypermedia systems.
A scrolling or wiping movement to the right or left shows
Scrolling or wiping up and down shows movement between
different levels in a hierarchy.
Zooming in and out shows movement to more detailed
or more general information.
A dissolve shows a transition to a different structure or topic.
Borrowing from the language of film, you can use visual effects to show movement within a structure. The way one card is replaced by another can tell users whether they’ve moved one node along a linear progression, dived down a path in a hierarchical structure, or travelled to another structure altogether. When you move forward or backward along a path, the image on the screen might appear to slide to the right or left. If you’re following a layered structure, the image might appear to scroll up or down as you travel between layers. Zooming in and out reinforces the idea of moving to a closer or more general view on a topic. Visual dissolves are often used in film for transitions to another place or time. In hypermedia, they’re useful for moving to a new topic or a new structure. If you establish and follow simple conventions, viewers will find it easier to orient themselves within the structure.
Visual effects are one way to make sure people know when they’ve clicked on an interactive area. Other forms of feedback, such as designing buttons so that they highlight briefl y when clicked, are also helpful. When a complicated program or script is involved, several seconds may pass between the user’s click and the screen’s reaction. During this time the user may think that he or she clicked in the wrong place, or that the computer isn’t working. If they can see a response immediately, most people will wait for the action. If nothing seems to happen, they may get frustrated and confused.
It’s helpful to see feedback when you click on
an interactive object.
Audio feedback is a risky alternative. How long would you keep reading a book that made a noise every time you turned the page? On the other hand, sound that comes up only a few times during the exploration of the stack might provide a welcome surprise or reward—perhaps at the end, or when a problem is solved. Find out about the environment in which the stack will be used, then decide whether sounds are appropriate. Visual feedback is just as immediate as audio feedback and sometimes easier on the nerves.
Where there’s a structure, there should be a map. The map doesn’t have to show every card in the stack, but it should show the general structure and the relative size of each section. It should show users where they’ve already been, and where they can go. You can use highlighting to indicate areas that have already been explored. You might also point out the most recently visited area and make the map interactive so users can jump to parts of the stack by clicking on the map.
If you can’t picture where you are, it’s hard to know where
you can go. A map provides an overview of an entire stack.
No matter how simple your stack is, it should include a help system. You can’t assume that everybody will understand how to use the stack the first time they see it. Nor can you assume that printed information you send with it will be read— or kept. Build a help system into the stack and make it accessible from anywhere within the stack. A help system can be as simple as a single card with all the stack navigation buttons labeled and explained, or as complicated as a series of cards that animates all the stack’s functions and shows different information depending on what part of the stack the user is in.
Explain the function of every part of the stack.
Reading a computer
Text is hard to read on a computer screen, even if you like to read. Most people get around this problem by not reading text on the screen. The more text, the less enthusiastic people are about reading it. Fortunately, hypermedia is good for dividing information into chunks. Experiment with different ways to format text. Instead of filling up a screen with words, put a readable amount of information on each card and then link to other cards for more. Or try editing your copy down to a summary full of buttons that link to supplementary paragraphs for those who are interested.
Avoid stuffing a lot of text into scrolling fields. They’re a good way to store a lot of information in one place if you need to look up data from a list, but they’re hard to read and hard to print. Often, people don’t bother. If you put so much text on each card that you have to scroll through it to read it, why are you publishing in hypermedia? Consider paper—it’s generally cheaper than a computer and weighs a lot less.
Choosing a screen font
Once you’ve made sure you’re presenting a readable amount of text on each screen, choose a readable font and style. Your choice should reflect compassion for the reader more than artistic taste.
Remember that a computer screen is made up of many rows and columns of rectangles which are either light or dark. Italic fonts are hard to read on the screen because they don’t take advantage of the fact that you can stack these rectangles on top of each other and make a straight line. On a computer screen, a slanted line looks jagged. Outline fonts seem to disappear on the screen, and it’s hard to make out the details that distinguish one letter from another. When projected, white type on a black background looks sharp, but small white type on a black screen is harder to look at, and should probably be avoided.
Type that’s italicized or outlined is hard to read on the screen.
It tends to look jagged and messy.
These fonts were designed to mimic metal typefaces.
They generally look better printed on paper than on the screen.
Some fonts are better than others for screen display. Helvetica and Times are clean and readable at large sizes. At small sizes, however, they get messy on the screen. Switch to their cousins, Geneva and New York, which were designed for the Macintosh screen. Fonts designed for the screen are generally easier to read than fonts that are designed for paper (though the latter might look better when printed).
These fonts were designed to be read from the screen.
They generally look better on the screen than on paper.
Be clear and consistent
In hypermedia, some words and graphics on the screen are interactive objects. If you want people to click on the correct images, you need to tell them where to click. Marking the interactive areas can be as simple as using a consistent font to label them or keeping them in the same place from screen to screen. Buttons don’t necessarily need thick borders around them, arrows pointing to them, or angels dancing around them. Find the most appropriate way to define and differentiate interactive objects.
What’s the clearest way to differentiate buttons
from other images on the screen? It’s not necessarily
adding a lot of visual noise.
Grid shown on the left. Card based on the grid shown on the right.
There’s no need to make each screen different—in fact, it’s confusing. Similar information should have a similar form. Then people will quickly understand where to look and what to look for if they want information, instructions, help, or navigation tools. If you use a button the same way throughout the stack, it should always look the same, work the same way, and appear in the same place. A consistent layout will make your stack easier to look at, since the text and images on the cards won’t appear to lurch back and forth and up and down as you move through them. If your design is consistent and clear, your stack will be easy to understand and use and people will be more likely to use it.
The potential of hypermedia
One of the first people to write about architecture, Vitruvius wrote that the three principal concerns for design should be solidity, commodity, and delight. That is, a building must stand up, be useful, and give pleasure. These principles apply to hypermedia design as well. The programming must work without bugs. The message and its structure should be clear. And the experience should be a delight. Clarity comes first because the message and its structure determine the necessary programming. And delight is hard to find amid confusion.
There’s tremendous opportunity here, and some real challenges. But if designers blindly try to fit hypermedia into pre-existing molds, it won’t be as effective as other ways of communicating. Instead, just as film did earlier in this century, hypermedia must continue to evolve and develop its own language. We need to strike a balance between what we’ve learned from earlier media and the new possibilities that are opening up now.
This is an exciting time to be a designer. When was the last time a new medium was invented? This is a great time for experimenting with hypermedia. Everything is new. Everyone can contribute to the creation of a new way to communicate.
About the authors
Doris Mitsch and Hugh Dubberly worked together designing communications materials for Apple Computer. Their work includes brochures, posters, animation, videos, HyperCard stacks and interactive multimedia. Doris is now an Art Director and Multimedia Producer at Clement Mok Designs in San Francisco. Hugh is Chair of the Computer Department at Art Center College of Design.