Interface Design Tips

Go To Create and Recognize Effective Interface Designs

 

Designing for Interaction Navigation Ten Qualities of Successful Navigation
Questions to Ask When Evaluating Your Navigational Scheme. Flowcharts How Does the Flowchart Translate into Navigation Pathways?
Good Navigation Design Orienting the user to the interface. Splash Screens, Main Menus, and Home
Pages
What Goes on a Main Menu Screen? Metaphors Three click rule
Interactive Controls Usability and Functionality Placement of interactive Controls
Within the Screen Real Estate
Grouping Navigation Controls Transparency Give the User Control

 

Critical tasks of interaction design

Create a guidance system to orient users

Design the navigation and access routes

Define what happens in each screen

Design controls for interaction

Create a storyboard

 

Interface Design

Design Considerations

Users of western languages...

Remember C.R.A.P.

Contrast: Changes or similarities in style, color, size, or any other quality can indicate what information goes together and what doesn't.
Repetition: Repetition emphasis what information you want the user to remember. Especially important to instructional/educational work.
Alignment: Can indicate items or points of the same relative importance. It also gives the interface a sense of order.
Proximity: Items located near each other often seem related in some way, such as how control elements are often grouped together. This helps the user by signifying their common purpose, as well as providing a common area for these elements.

Designing for Interaction

Navigation

Moving through the levels of interactivity in a project requires a clear navigation scheme. Navigation is the process by which a user explores all the levels of interactivity, moving forward, backward, and through the content and interface screens. Users navigate through the project by clicking on interactive controls such as buttons, imagemaps, and hypertext, while clues such as special colors, backgrounds, or interface sounds help orient them to where they are at within the levels of interactivity. A good navigational scheme will leave the user with little question about where they are in the document and where they can go from there. On the other hand, trying to navigate through a poorly arranged interface searching for information is like looking for a needle in a haystack. Without knowing where you are at, or how the current screen relates to other topics, it is difficult to find the right information.

 

Ten Qualities of Successful Navigation

  1. Be easily learned
  2. Remain Consistent
  3. Provide feedback
  4. Appear in context
  5. Offer alternatives
  6. Require an economy of action and time
  7. Provide clear visual messages
  8. Use clear and understandable labels
  9. Be appropriate to the site's purpose
  10. Support users' goals and behaviors

 

Questions to Ask When Evaluating Your Navigational Scheme.

  1. Are all icons and imagemaps clear and understandable?
  2. Do all the interface controls look like they relate stylistically to each other? Do they look like they are part of an overall system?
  3. How easy or hard is it to navigate back to the main menu or home page?
  4. Can the user quit at any time?

Flowcharts

A critical step in creating and implementing a good navigational scheme is the thoughtful analysis of where information will fall within the overall interactive structure. The sooner you start to think about how the user will move around within the project the better. The best time to really think about your navigational scheme is when you are developing flowcharts. Keep in mind, though, that flowcharts are the initial step of your design and that, as you work on the project, your design will naturally evolve. It is not unusual to continue to refine the navigation scheme well into the storyboard stage and beyond.

Back to Top

How Does the Flowchart Translate into Navigation Pathways?

A well-developed flowchart is the map that will help you design your navigational scheme. This map will help you shape the strongest and most direct access to any two points in the levels of interactivity. Translation of a flowchart into a working navigation scheme, however, often takes some work and revision.

Since flowcharts are living documents that grow and change along with the project, remember the items in the following list when reviewing your flowchart.

  1. Every link shown on the flowchart depicts a navigation pathway you will have to design.
  2. Every link requires a corresponding interactive control the user will activate to either take them to a different screen or bring additional information to the current screen.
  3. You will have to design interactive controls that fit stylistically and conceptually with the content, and that do not take up too much screen real estate (the available space onscreen).
  4. You will have to flesh out the implied navigation links. Flowcharts usually depict direct access to information between interactive levels. As the project evolves, however, you may discover the need to create additional access routes to help clarify and organize information. This means you will have to rework the flowchart and add more links to your document.
  5. You will have to look for opportunities to simplify the access to the information. One of the main tasks of an interactive designer is to make sure that users can take the most direct path between any two points in a document. Ask yourself as you review the flowchart, "Is this the simplest and easiest way to access this information?" At times you may decide that the navigation scheme developed in the flowchart is too complex and must be streamlined for better access.
  6. You will have to decide whether it is better (depending on the circumstances) to take the user to a new screen or bring the new information to the current screen.
Good Navigation Design

A good navigation design will clarify the content and interactive structure, enhance the document's usability, and accommodate the user's needs.

Good navigation design clarifies the content and interactive structure by:

  1. Quickly orienting the user in the first screens to what can be seen, done, and learned from the product.
  2. Establishing which pieces of content are more important than other pieces of content by their relative positions within the levels of interactivity. In general, the less important the information, the deeper it is placed within the levels of interactivity. For instance, a good navigation design will place all the major topics where they are accessible on a main menu. A poor navigation design might mix main topics and secondary topics on the main menu.
  3. Letting the user know where they are at in the document at all times.
  4. Letting the user know where they can go from where they are.

Good navigation design helps the user understand the functions and enhances the usability of the interface by:

  1. Connecting any two points in the content with the shortest possible paths.
  2. Avoiding the use of multiple or redundant paths to the same information from the same place.
  3. Using easily recognizable images and icons as interactive controls.
  4. Using interactive controls that are simple and straightforward and that react consistently.

Good navigation design will accommodate the user's needs by:

  1. Always providing a way for the user to return to the main menu or the home page.
  2. Letting the user go back to any point.
  3. Always providing a way for the user to exit the program.

Back to Top

Orienting the user to the interface.

Convincing users to interact with your document in part depends on orienting them quickly to the document's content, navigation scheme, and interactive controls. These first screens are often your only chance to show the user what they can expect to see and do in the document. Orienting the user in the first screens of your project is critical because, unlike a book, users cannot pick up the document, flip through the pages, scan the table of contents, or look at the index to get a sense of what information the project holds.

Splash Screens, Main Menus, and Home Pages

In multimedia documents, the first screens the user will encounter are the splash screen and the main menu screen. In online documents, the initial screen is called the home page. First impressions count, and the impression the user forms from looking at these first screens contributes to their decision to continue to explore the document or to quit out of it.

A splash screen is the initial screen that a user sees (after any installation screens) and serves much the same function as the cover of book. The splash screen, like the cover of a book, conveys an impression of what the rest of the document will look like, and sometimes introduces the user to the first interactive control. In multimedia projects, the screen that follows the splash screen contains the main menu. The main menu screen introduces the user to a summary of the contents of the document, much like a table of contents in a book. The main menu also firmly establishes the look and function of the navigation controls, so it is important to make this screen as attractive and easy to understand as possible. If the user continues to interact with the document, the user will return over and over to this screen, so it pays to spend some time designing it. And finally, in online documents, the home page often combines the functions of both the splash screen and the main menu.

A good strategy in orienting the user to the potential of the document is to provide the user with enough images and text information to encourage them to use the document, but not to barrage them with so much information that they get side tracked, confused, or overloaded.

What Goes on a Main Menu Screen?

Since the main menu is the gateway to the content, the user will come back to it over and over again when traveling through the document. Here is a short list to start you thinking about what should and should not go on a main menu.

Common items on a main menu screen:

  1. The title of the interactive document
  2. Topic category titles and interactive controls that are functional and let you access information topics
  3. A control for accessing user help
  4. An exit button

Things that should not go on the main menu screen:

  1. Lists of credits
  2. Installation information
  3. Preferences set-ups
  4. Product registration.
  5. Subtopic category titles
  6. A mug shot of the multimedia designer. (You think I'm kidding, but I've seen it done!)

Back to Top

Metaphors

Once the user decides to move forward in the document, they will need easy-to-understand and easy-to-use interactive controls. One way of building easy-to-use interactive controls is to use a metaphorical approach. A metaphor refers to an experience, location, object, or tool using the more familiar terms of another experience, location, object, or tool. For instance, Windows and Mac computers use the metaphor of the "Desktop" with folders, trash cans, recycling bins, and stickies as a quick way to under stand the structure of the whole system.

Using metaphors has become a popular convention in interactive design to help orient the user to the computer environment. For example, the Internet contains "chat rooms" where people electronically converse, electronic "mailboxes" receive e-mail and designers build web "pages." Other commonly used metaphors are books and maps, such as the screen depicted in Figure 3-9 where users cam toggle arrows to flip the page forward or backward or refer to the map to help them navigate through the interactive document.

Metaphors work best if they are easily understood by the audience, relate to your topic, and are not taken too far. A good way to test whether a metaphor is easy to understand is to ask other people if the metaphor helps them understand what to do. If you have to explain the metaphor, then it does not work.

When working with metaphors in your interfaces, however, it is best not to take the metaphor too literally. Taking a metaphor too far can quickly become irritating. For example, imagine how much of a nuisance it would be if every time you wanted to send e-mail to someone you had to first click a “place in envelope" button and then click a "lick a stamp" button!

Three click rule

Interactive Design Principle:
Do not bury the user in too many levels of interactivity.

Users will find the document much easier to navigate through if they understand where they are at within the layers of interactivity. You should never bury information or desired functions more than three clicks away from the first click. For example, if a user is attempting to "print" a document, they should not have to "click' through three or more screens to access the desired function.

Moving backward or forward through more than three screens increases the chance that the user will lose track of where they are at within the document. If your project uses a hierarchical or hybrid navigational scheme, you should be on guard against embedding information too deep within the structures.

Interactive Controls

An important part of designing an interface is the creation of clear and unmistakable interactive controls. Interactive controls such as hyperlinks, hypertext, buttons, imagemaps and hot spots add functionality to the interface and are a prominent feature of your navigation scheme. It is important to remember that, in many documents, the controls are the only way that users can activate interactive features.

Because interactive controls are employed throughout a project you should design them to dovetail with the concept, style, and tone of the document. If the overall style of your document is factual and businesslike, such as a training presentation, the interactive controls can bolster that style with a straightforward, serious approach. If the overall tone of the document is playful and humorous, interactive controls with an entertaining twist to them are a good fit. Interactive controls provide a good opportunity to reinforce the seriousness or playfulness of the document.

As was mentioned earlier, there are a number of different types of interactive controls. The following information highlights a few of the most common types and explains more about the importance of consistent use of controls m your document. While looking over this information, you may want to keep in mind that interactive controls are a vital part of your navigation scheme and can make or break the design in terms of whether a user cam find their way consistently through a document. So the design of interactive controls is critical to the success or failure of your project.

How can you teach someone what a symbol or interactive control means in your document? Users learn how to recognize the meaning of symbols and interactive controls in a number of ways, including:

  1. by: example, when someone teaches them the meaning;
  2. by analogy, when the new symbol or control is similar enough to another concept that they can make assumptions about the meaning;
  3. through context cues, such as a symbol paired with text like "search," "help," or "credits"; and
  4. through exploration, when clicking on a symbol or control always initiates the same interactive function, for example, "quit."

Hypertext

Hypertext is specifically a word, phrase, or paragraph that, when clicked, links to another piece of content in the document. This piece of content can be on another page or screen, or can appear on the current screen (see Figure 3-11). Because hypertext links are easy to build, easy to maintain, and appear quickly onscreen, online designs such as web pages depend heavily on hypertext links.

Back to Top

Buttons

Buttons are one of the most widely used interactive controls. Interactive designers depend heavily on buttons because they are so familiar to us through many different technological devices. When you push a button, for instance, whether it is on your radio or on your computer screen, you expect something to happen.

There are a lot of different kinds of buttons, as shown in Figure 3-12. As you cam see from the figure, buttons do not always have to look like the button on a VCR tape deck. Instead, buttons are often a mixture of icons and typography.

Some kinds of buttons are called multi-state buttons because, when clicked, they display a second visual image or even a short animated sequence. Multi-state buttons can be further divided into highlight buttons, rollover buttons, and animated buttons. A highlight button simply "highlights" when the user clicks on it, as shown in Figure 3-13. This highlighting effect serves to tell the user that their click has been acknowledged by the computer and that some action has been initiated.

Like highlight buttons, rollover buttons provide needed feedback to the user. Rollover buttons are also used to identify interactive controls and to deliberately attract the user's attention (see Figure 3-14). A rollover button will typically display a second image when the user's pointer "rolls over" the hot spot occupied by the rollover button. (A hot spot is an area of the screen that is currently designated as active. A hot spot can have buttons or graphics parked on it.) Figure 3-15 uses dotted lines to show the hot spot areas around the images on this screen interface. Hot spots allow the user to clue in on what is clickable and what is not. For instance, if the user moves the pointer around onscreen looking for something to do, a rollover button that changes its display will I help the user understand that it is a clickable interactive control.

Menus

Menus are a familiar interface control to virtually anyone working on a personal computer. They can be a simple text listing of functions or a more complex mix of text and graphics. They give the user navigational choices.

Keep Controls Consistent

Good controls that react consistently clarify the navigation scheme and add functionality to the interface. When interactive controls react predictably, users can learn the navigation scheme quickly and easily. For example, users quickly determine that an arrow pointing right means "next" after having clicked on it several times with the result that the next screen displays. Conversely, if the user clicks on the arrow a second time and it freezes the machine or jumps to the credits screen, some confusion might ensue about the arrow's function (see Figure 3-22). In some cases, inconsistent controls may make the user inclined to quit entirely out of the document.

Usability and Functionality

Usability refers to how easy an interface design is to understand and use. A user-friendly document will let the user read or play any content at will; it will have unambiguous interactive controls and a clear and understandable navigational scheme.

Functionality is how well (and reliably) the interactive controls and media perform on the target platform. Making sure your interface is user-friendly and performs flawlessly on the target platform is a critical goal.

How do you create a user-friendly interface? Well, first you have to understand some of the audience's basic abilities and needs. For instance, if most of the potential users understand that a mouse can be employed to click and drag on an object, you can build interactive controls such as pulldown menus to take advantage of that ability.

Another way to build a user-friendly interface is to accommodate special input devices and device-specific options. This often means programming into the document the ability for the audience to select the input device of their preference (a trackball mouse, joystick, stylus, and so on). You should further build in options for the user to customize their chosen input device-for example, if the user wishes to use a joystick (typical in many games), the user may wish to select which button will be the firing button (perhaps to accommodate the preferences of right versus left handers).

Other ways to build effective, friendly, and highly usable interfaces include the following:

  1. Let the user undo any action or try an activity more than once.
  2. Do not crowd too much information into the screen real estate.
  3. Make interface controls as intuitive as possible.
  4. Provide audio and/or visual feedback.
  5. Give the user control.

Back to Top

Placement of interactive Controls Within the Screen Real Estate

A sure way to slow down a user and to frustrate them is to spread interactive controls to all corners of the screen real estate. Placing heavily used interactive controls on opposite sides of the screen may balance the layout and look good, but their placement means the user will have to make a lot of extra wrist and arm movements to access them. It is much easier for the user (and less encouraging to the formation of carpal tunnel syndrome) to group related interactive controls together (see Figure 3 24).

One way to determine if interactive controls belong together is to analyze if they are global interactive controls or local interactive controls. A global interactive control is a control that is accessible over and over again within the majority of the interface-for instance, "forward,"  "backward," and "main menu." The user will access these controls multiple times during the interactive session, so the best ergonomic placement of these controls is to group them together in a predictable, consistent spot onscreen.

Grouping Navigation Controls

By the time you place all the navigation controls onscreen the screen can look pretty cluttered. One way to clean up the screen real estate and clarify the interface is to group control functions together in navigation bars, pulldown menus, or control panels.

  1. A navigation bar is used to group together frequently used global interactive controls (like "quit" and ''next" buttons). Navigation bars can be a simple text list or a combination of text and graphics. A navigation bar should be placed within a designated area onscreen where the user can consistently find it.
  2. A pulldown menu is a good option for longer lists of controls, like the one shown in Figure 3-28. The disadvantage of pulldown menus is that they take up a lot of screen territory when active. They disappear from the screen, however, after a choice is made.
  3. Control panels are similar to navigation bars in that they can hold global interactive controls or local interactive controls in a condensed strip of icons.

Interactive Design Principle
Design interactive controls that the user can grasp intuitively.

Transparency

One of the ways to gauge a good interface and navigational design is the degree to which it goes unnoticed. The better the interface design, the more intuitive-and therefore, more transparent-the design appears. If a user has to puzzle out how to navigate their way through the content or if the interface is unfamiliar and counterintuitive, they may not understand the message of the project. And, just like any other communication medium, the message should drive the interactive project.

Building intuitive interactive controls depends on creating straightforward icons, buttons, and imagemaps (and any other type of interactive control you can think of) with comprehensible text. Icons, buttons, and imagemaps should be easily recognizable and their functions clear and consistent no matter where they appear in the document. The text used with any interactive control should relate to its function, and descriptive text appearing in menus and dialogue boxes should avoid programming jargon understandable only to specialists.

Furthermore, you should avoid duplication of interactive controls onscreen that do essentially the same thing. An interface that uses both clickable imagemaps and text-based buttons to perform the same actions is clearly redundant and may unintentionally confuse the user. At the very minimum, this arrangement wastes users' time, as they may be apt to try every interactive control onscreen. Imagine the potential for growth of user irritation when multiple buttons send them back to the same content and screen.

Provide Clues

It is important to provide clues onscreen to inform the user about what is clickable as well as to provide feedback to the user. Clues may range from rollover buttons that light up when the pointer rolls over them (informing the user they have interactive possibilities) to buttons that perform a brief animated sequence when clicked (telling the user that the command has been acknowledged).

People like to know when they are using an interactive document that the program is working properly and is responsive to their commands. Feedback clues provide this reassurance to them. Using multi-state buttons (such as rollover and highlight buttons) is an excellent way to show feedback, as they display a different image when the user clicks on them. Not all feedback clues need to be visual for instance, a viable feedback clue might be as subtle as a low "click" noise when the user clicks on a button.

Building clues into the interface can also help the user understand which controls and content are most important in the interface. The most important information can be made more prominent through size, color, animation, or sound. A global interactive control, for example, could be larger than commands that show up only once or twice in the document (see Figure 3-32). An important piece of content might be in color, while other less important pieces of content are presented in gray tones. An animated narrator or character might pop up onscreen to advise the user to choose a particular control. All of these methods can be used to direct the user's attention to important controls and available content.

Give the User Control

Users anticipate that they will be able to do whatever they want to do in an interface. This includes skipping over sections they have seen and going back to revisit sections as many times as they want. Users also expect to be able to correct any mistakes they make. If they inadvertently type a wrong letter or word, they expect to be able to reselect that letter or word and retype it. Creating user-friendly and ergonomic interactive controls (as well as an interface) involves giving the user as much control over their situation as possible.

Users rightfully expect to be able to leave screens that do not interest them instantly. Therefore, the user should be able to skip or stop all media that appears onscreen, whether it is a text field, video clip, or animation. Imagine accessing a screen where a video immediately starts to play. Suppose you have seen that video once before in your exploration of the document. How would you feel if you were not given the ability to stop or skip the sequence and, instead, the only way to exit that screen was by watching the video play on and on and on until it ended? Would you be annoyed?

Users also expect to be able to quit an interface at any time. Since the quit command is a global interactive function, users should have simple and straightforward access to this control at all times. What many interactive designers have discovered, however, is that the quit command is the last opportunity to communicate a parting message to the user. In many cases, clicking the exit button leads to an exit splash screen. This splash screen may briefly show credits or other product offerings, or it may ask any number of questions intended to give the user the opportunity to change their mind and reenter the program. When an exit splash screen is used, care should be exerted to not be too obnoxious about trapping the user in screen after screen of information (see Figure 3-33). If the user has to jump through hoops just to quit the program you can be virtually assured that they will permanently leave the program.

Less is more

Designing a highly usable interface also involves determining just how much functionality the document needs to convey the message. Since interactive documents have limited screen real estate in which to fit content and interactive controls, you need to decide how many options the user can access at one time. Each option takes up screen real estate, and the more options onscreen at one time, the more cluttered and confusing the interface becomes. Too many options detract from the experience as surely as having just the right number and kind of options enhances the experience.

One of the primary goals of an interactive designer is to build the simplest and most direct path between any two points in the document. This means simplifying how many levels of interactivity are between those two points as well as providing clear and unambiguous interactive controls that take the user there. Determining how to present the most information in the clearest possible way begins way back at the flowchart stage, and often continues all the way through usability and functionality testing.

Interactive design principle

Let the user end the interactive experience at any time.
Be forgiving of user error.

Back to Top

Go To Create and Recognize Effective Interface Designs