Interface Design Tips
Go To Create and Recognize Effective Interface Designs
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
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. | |
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
Questions to Ask When Evaluating Your Navigational Scheme.
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.
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.
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:
Good navigation design helps the user understand the functions and enhances the usability of the interface by:
Good navigation design will accommodate the user's needs by:
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:
Things that should not go on the main menu screen:
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!
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.
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:
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.
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.
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 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:
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.
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.
Interactive Design Principle
Design interactive controls that the user can grasp intuitively.
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.
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.
Go To Create and Recognize Effective Interface Designs