Interactivity

Before we start to talk about different kinds of user interfaces, let’s clarify one concept that is critical to this discussion: interactivity. Interactivity is one of the defining characteristics of multimedia interfaces. In this book, we define interactivity as the reciprocal communication between the media and the users facilitated by various technology features; in other words, it’s the user and the media communicating with one another. As technologies advance, user interfaces are becoming more and more interactive.

Interactivity implies both interaction and activity. It offers users—including you—a new way to access and experience media content. It replaces the one-way flow of information, such as with old-style broadcast television, with two-way interaction between the media and its users. Instead of sitting on the couch and passively viewing a television program, we can now consume media in a more active manner.

By incorporating interactivity, we give users a chance to choose what they need and want. They have the power to decide when, how much, and in which format the information will be displayed. The ability to control media content essentially makes users the source of information (see Figure 6.1). A user is said to have more agency when he or she can contribute to creating media content. This increased sense of agency can boost “media stickiness” and better engage users with the interface.

Types of User Interfaces

Figure 6.1 YouTube, the world’s largest distributer of video content, appeals to a new generation of “interactive and active” users who want to produce, as well as consume, media fare.

Source: Annette Shaff/Shutterstock.com.

Early computers had few interactive features for users. As you learned in chapter 2, “The Computer,” users were faced with a nearly blank screen and could only interact with it by typing command lines with a keyboard. Command line interfaces (CLIs) require that the user have a lot of technological know-how. Eventually, developers came up with a more interactive solution: the graphical user interface (GUI). GUIs let users interact through graphic icons and visual aids, not just text.

Voice Interfaces

Unlike the other interfaces that require users to adapt to artificial tools, voice interfaces allow you to use probably the most natural input method—voice/speech—to interact with digital devices. The rise of voice interfaces relies on the technology progresses in machine learning of natural language and statistical data-mining techniques. With this hands-free and eyes-free interface, you are able to make commands to initiate automated services. The growing popularity of mobile devices has contributed to the pervasiveness of this interface. The most prominent example of a mobile voice interface is Siri on iOS for iPhone, iPad, and iPod touch.

Figure 6.2 The Nintendo 3DS, released in 2011, features a single-touch interface that users can control using a finger or stylus.

Source: Barone Firenze/Shutterstock.com.

Figure 6.3 The Apple iPad features a multi-touch interface that can respond to multiple touch points and gestures simultaneously.

You can ask questions and make commands by talking to Siri the way you talk in everyday life. Following the commands, Siri figures out what applications to use and finds answers through search engines and online databases. Non-iOS smart-phones also have similar voice-activated personal assistants. For example, Google Now is available for Android Phones whereas users of Windows Phone have Cortana to find answers, make dictations, and perform other actions by using natural language (see Figure 6.4).

Figure 6.4 Left: Siri is Apple’s voice-activated user interface. Right: Cortana is the voice-activated personal assistant for the Windows Phone OS. Both Cortana and Siri respond to voice commands for calling, texting, directions, scheduling, dictation, application prompts, and much more.

Tech Talk

Motion Tracking Interfaces Motion tracking interfaces are natural graphical user interfaces that directly monitor and respond to users’ body movements. The wire less controller on a Wii system, the video game console released by Nintendo in 2006, can detect human movements in three dimensions with built-in accelerometers and infrared detection. It allows users to control the game using physical gestures and traditional buttons. The motion controller gives users haptic (tactile) feedback, applying forces, vibrations, and sound for each gesture. Kinect, an input device for Xbox 360 released in 2010, offers users an even more natural experience. It is a horizontal sensor bar that captures full-body 3D motions and recognizes facial expressions and voices. It directly responds to gestures, spoken commands, and presented objects and thereby gives users a more vivid gaming experience (see Figure 6.5 and Figure 6.6).

Figure 6.5 The Wii wireless controller (top) senses movement in three dimensions and provides haptic feedback to users as they interact with the game. Below, an attendee uses body movements to interact with a Kinect gaming system at an industry trade show.

Source: pcruciatti/Shutterstock.com (bottom).

Figure 6.6 A teenager plays a video game with a wireless wheel remote.

Augmented Reality (AR)

In the last decade, the field of augmented reality has received more and more attention from interface designers. As a result, a variety of innovative applications and devices have been developed to demonstrate the robustness of this technology. Augmented reality is about superimposing the computer-generated text, graphics, audio, GPS (Global Positioning System) data, and other sensory elements atop your view of the real-world environment in real time. Different from virtual reality that entirely replaces the real world with a simulated one, augmented reality is more of a mediated reality. In other words, it provides a modified view of reality with the aim to enhance your perception of the real world.

Figure 6.7 Google Glass is a wearable technology that allows users to take pictures and interact with mobile/web services using a tiny near-field monitor and touch interface.

Source: Giuseppe Costantino/Shutterstock.com.

One of the wearable devices that enable you to experience augmented reality is Google Glass (see Figure 6.7). It is composed of three parts: the touch pad on the side that allows you to control the device by swiping, the camera that can take photos and record videos, and the visual display that shows information in front of your eyes. The digital data shown on the small display is the augmented information overlaying what you actually see through your eyes. Aside from experiencing augmented reality through a wearable headset, you may also enjoy it on a smartphone or a tablet via applications. For example, Häagen-Dazs launched an augmented reality iPhone app named the Concerto Timer in 2013. Once you launch the app and point the camera at the lid of any Häagen-Dazs carton, you will see a miniature symphony on the lid via your smartphone (see Figure 6.8). The idea behind this augmented reality experience is to allow the carton to soften perfectly before you eat the ice cream.

Figure 6.8 Häagen-Dazs Concerto Timer provides a unique augmented reality experience to help its customers soften the ice cream within a set time.

Tech Talk

Emerging Technology

Baidu Eye Baidu Eye, the Google Glass rival from China, is yet another example of an augmented reality headset (see Figure 6.9). This working prototype made its first debut as a wearable technology device at the Baidu World Conference in Beijing in September 2014. This wraparound headset has an earpiece on the left arm and a camera on the right arm. It can take photos, recognize objects, and analyze information in the surrounding environment, as well as accept voice and gesture commands, such as circling an object with a finger to select. Unlike Google Glass, it does not feature any visual display on the wearable part. Images and other visual components generated by the augmented camera on Baidu Eye are sent to smartphones via apps to reduce the stress on eyes.

Figure 6.9 Baidu Eye is an augmented reality wearable technology device developed by Baidu.com, the largest search engine in China.

Source: http://www.mashable.com.

Navigation

Good navigation is essential; its importance can’t be overstated. In multimedia design, we often create complex products, more than we could put on a single web page or screen at one time. Navigation provides structure and organization. It helps manage information. More importantly, it guides users through the interface so they know what information is available, where they are, where they have been, and where they can go next. The most user-friendly navigation is the one that doesn’t surprise users and allows them to apply what they’ve already learned.

Menus

Menus are the most common navigational tool used in graphical user interfaces. Space on an interface is limited—too limited to present all your content. Menus can solve the problem, letting you create links to sections with different kinds of content. Unlike links buried in text, menus present links in consistent, easy-to-find locations. If you are building a website or application with only a handful of sections and little functionality, you might create a simple menu with a single row or column of buttons or links. But more interactive menus—vertical dropdowns, horizontal drop-downs, and accordions—can solve more complex organizational problems and give your users a more interactive experience. For web pages, you can create these types of menus using HTML and CSS alone, or you can create them using features in your web design software, such as the Spry Framework in Dreamweaver. Whatever technique you use, be sure to check your menus and other features for accessibility (see the section “Making Interfaces Accessible” at the end of this chapter).

Vertical Dropdown Menus

A vertical dropdown menu shows up initially as a horizontal row of main sections (see Figure 6.10, A). But users can then access subsections from a list that drops down just below that main item. Sometimes the user has to click on the main section listing to get to the submenu, as often is the case with the main menus for computer applications; other times, the user only has to hover over (move a cursor over). When a user moves the cursor away from the submenu, or clicks somewhere else on the screen, the dropdown menu goes away.

If you choose to use a dropdown menu (either type), limit your subsections to no more than two layers: users have trouble keeping the cursor within complex dropdown menus. If you use the hover feature to display subsections, build in some delay between when the user moves the cursor away and when the dropdown disappears. By doing so, you can avoid the awkward situation where a user accidentally moves the mouse and needs to go through the main section again to initiate the dropdown list.

Horizontal Dropdown Menus

Horizontal dropdown menus work much the same way as vertical dropdown menus. However, the main sections are listed vertically, and the subsections appear to the right side of the selected section (see Figure 6.10, C). Again, limit your menu to no more than two layers. Also, don’t provide too many sections in the vertical list. If there are too many sections, users have to scroll up and down to see the complete list of sections, which makes using the interface more complicated.

Accordions

Accordions are a special form of menu with a vertically or horizontally stacked list of sections (see Figure 6.11). Each section has a headline and a panel associated with it (sometimes with links, sometimes with other information). When a user clicks a headline, the section expands to show a panel with more detailed related information. At the same time, the other sections collapse, hiding the other panels. By showing all section headlines but revealing only one panel at a time, accordions can give users easy access to other sections without causing information overload. If you use a vertical accordion, limit the number of sections so users don’t have to scroll up and down to see the complete list of sections.

Tabs

Designers use tabs when an interface needs to provide access to different content modules or sections. This technique is similar to labeling folders and organizing them in a file cabinet. Tabs provide an easy way to show a large amount of information by category. When a user switches between tabs on the same web page, the web page usually will not refresh.

Tabs are appropriate when users don’t have to see information in different tabs at the same time: switching back and forth between tabs can create an extra cognitive burden to users’ short-term memory and subsequently affect their information

Figure 6.10 Dropdown menus come in many shapes and sizes. A) A vertical dropdown menu offers simple linear navigation. B) A two-dimensional dropdown panel categorizes navigation options under group headings. C) A horizontal dropdown menu system branches off the main vertical dropdown menu to provide access to additional submenus.

Figure 6.11 This horizontal accordion component expands to reveal the contents of the section whenever the user clicks on one of the six menu options.

processing. Organize the content for each tab similarly so users don’t have to change mental models when they process content in different tabs. Since the width of the web page or the screen is usually predetermined, create only a limited number of tabs. Also, keep tab labels (the name affixed to the tab) relatively short.

Figure 6.12 This website for the U.S. Food and Drug Administration employs a well-designed tabbed interface for primary navigation.

When designing tabs, it is important to avoid having more than one row of categories. People have limited spatial memory; they don’t easily remember which tabs they have already visited. Users can become frustrated if they have to take extra time to track previous actions. In addition, always use a visual cue to distinguish the currently viewed tab (the one the user is viewing) from all the other tabs. For instance, you can make it a different color or increase its size. If you are going to dim the color of the other tabs to highlight the currently viewed tab, make sure the unviewed tabs are still readable so users can see their other options (see Figure 6.12).

Managing the Hierarchy

In addition to classifying categories and creating sections, an interface needs to structure information in a logical hierarchy to make it easier for users to go from one place to another. It’s a bit like building a road with many intersections. At each intersection, you need to provide direction signs so people know where they are and where to go.

Breadcrumbs

Breadcrumbs are another such feature that can prevent users from getting lost in an interface. The term breadcrumbs is from the Brothers Grimm’s fairytale Hansel andGretel. In the tale, two little children dropped breadcrumbs to form a trail to find their way back home. Putting breadcrumbs in your interface gives users a way to track their paths and go back up to another level in the hierarchy (see Figure 6.13).

Figure 6.13 A breadcrumb element, such as the one pictured here, helps users keep track of their location within a multipage website.

Source: http://www.co.orange.nc.us.

Breadcrumbs are usually used for complicated interfaces with hierarchically arranged layers. If an interface only has a single layer, you don’t need breadcrumbs. Breadcrumbs on websites are typically right below the navigation menus in a horizontal line. They are often styled so they are plain and don’t take up too much space. As a result, they have little impact on users’ processing of interface content. Breadcrumbs can also be a good way to invite first-time users to further explore the interface after viewing a landing page. Let’s imagine that a user searches for an AMD motherboard and lands on a product list page on Newegg.com. He or she fails to find a satisfying product on this page. However, enticed by the breadcrumbs on the top of page, the user can navigate to a higher-level product page to see what other brands Newegg offers.

Even though breadcrumbs may effectively reduce the number of clicks a user needs to reach a higher structure on an interface, they should never replace tabs or menus. They are not a form of primary navigation. They are just a secondary navigation aid to help users establish where they are and to give them an alternative way to navigate the interface. Breadcrumbs should never be placed on the highest layer of an interface, such as a homepage or an introduction screen: after all, nothing is higher in the hierarchy.

Footers

You might have heard people say that all the important text and images should be placed “above the fold” so users don’t have to scroll down a page or a screen to get to it. Extending this concept, the bottom of a page or a screen usually becomes the part with the least important content. However, quite a lot of users do scroll down to the bottom, depending on the site. It’s time to reexamine this “forgotten” area and use it better.

In the footer of a website, you can add links to the frequently used sections of the site, RSS feeds, social media sites, recent updates, or sign-up forms for newsletters. Some interfaces even expand the size of the footer to add additional internal and external links. For example, the Library of Congress website has a fat footer that gives users more choices of things to do after browsing the page (see Figure 6.14). It inspires users to continue browsing. Rather than following the prescribed hierarchy of the interface, the user is given the option to visit related pages using redundant links embedded in the footer. The fat footer provides continuous access to shortcuts to highly used sections, as well as major functions that are important to users regardless of where they are in the site or application. Similar to bread-crumbs, footers should only be used for secondary navigation, never replacing tabs and menus.

Figure 6.14 Here, a fat footer located at the bottom of the page provides with additional internal and external links.

Source: http://loc.gov.

Organizing Content

The content of a user interface includes text, images, and video/audio downloads, as well as other types of data. Let’s look at four popular methods of organizing content.

Carousels

Figure 6.15 Image thumbnails serve as helpful visual links to specific content collections on the Library of Congress website. Notice also how they are perfectly aligned on the page.

Source: http://loc.gov.

Another way to organize visual content on a user interface is a carousel. Carousels organize items on a horizontal line. Even though you might have many items, the carousel shows only a few of them, as thumbnails, at a time. An interface carousel is reminiscent of a carnival carousel with painted horses: as the carousel turns, you get a good look at a few of the horses in front of you, but you know there are more hidden to the left or right. If users want to see more, they click an arrow (left or right), move a slide bar below the images, click to the side of carousel indicators (the dots below some carousels), or mouse over the images. Apple uses cover flow carousels, which have 3D effects, in its Mac Finder window, iTunes, and other software, to display rotating thumbnail images for file collections such as photo and music libraries (see Figure 6.16, top). Netflix uses stacked carousels to organize movie and TV show selections thematically according to program genre (see Figure 6.16, bottom). Users can browse the various program offerings through touch gestures or by mousing over a revolving carousel of small icons. As you hover over an image or click, descriptive text related to the underlying show is revealed in an expanded window.

Table 6.1 Thumbnail Sizes

Width × Height (pixels)	Description
48 × 48	Very Small
64 × 64	Small
96 × 96	Medium
128 × 128	Large
144 × 144	Extra Large
160 × 160	Super Large
192 × 192	Huge

Figure 6.16 Top: A carousel interface component is built into Apple OS X and can be used for browsing attached storage drives and specific file collections such as your iTunes music library or photo albums. Bottom: Netflix incorporates a multitiered carousel design to help uses quickly navigate through their offerings of television and movie content.

Source: Top: Apple, Inc. Bottom: http://www.netflix.com.

By only showing a few items at once, carousels effectively direct users to concentrate on a limited number of things at one time. Compared to thumbnails, carousels may pique users’ curiosity and encourage them to explore more. Carousels are more effective when used for visual items, such as album and book covers, movie posters, paintings, and product images; they are not appropriate for text.

Pagination

Figure 6.17 Adding pagination to the interface of a multipage or multiscreen site can help the user keep track of where they are on the site.

Source: Top: http://chriswalkerphoto.com.

You might use pagination if you have a large set of organized information, such as a long article, a batch of customer reviews, a list of blog entries, or a group of search results (see Figure 6.17). In these cases, you have to break the information down to be displayed on separate pages. Unlike the simple “previous” and “next” button, pagination gives users a brief idea about how much information to anticipate. It also allows users to easily navigate through the parts of a large body of information. Users don’t have to finish browsing all information provided by the interface. They can stop wherever they want and jump to other places. Do you want to find out how that feature story ends? Just jump to the last page.

Good pagination is easy to use. First, you need to provide big enough clickable areas to get to different pages and leave enough space between page links. Second, you need to identify the current page—using color or shape distinctions—and tell users where they are and where they can go. Finally, your pagination should let users know the amount of available information (number of pages). If you can, include both the first page link and the last page link. However, if it’s hard to include both links, you could add text indicating the total number of screens or pages, as the second example illustrates (see Figure 6.17, bottom).

Archives

Figure 6.18 Which interface would you rather work with, the one on top or the one on bottom? Navigating online databases and archives can be an arduous task. Providing a fun or visually interesting interface can make the process more enjoyable for users and keep them coming back to your site.

Source: https://archive.org/web.

Another way to deal with a large amount of information is to organize it chronologically using archives. Different from pagination, an archive is only appropriate for information that spans a rather long period of time and that users can logically browse chronologically, such as by date. Archive.org’s Wayback Machine is an extreme example of archiving (see Figure 6.18). It does a great job of capturing and keeping the homepages of all kinds of websites on a daily basis. It organizes this information by year and month, using a blue circle to mark days when it recaptured a site. Most sites don’t archive this much information, so their designers don’t need to be as careful in planning their archive’s time intervals. For example, if a blog has around 8 posts per year, it’s inefficient to archive them by month. Another blog may have 300 posts per year. However, these posts may not be evenly distributed across months, with some months completely lacking posts. If this is the case, then the designer doesn’t even need to list those empty months in the archive.

Tech Talk

Parallax Scrolling One recent trend in web design is parallax scrolling. On a parallax website, the background of the site moves at a slower speed than the foreground elements on the page to create a faux 3D visual effect. The majority of parallax websites have only one single long page created by either JavaScript or CSS. Parallax web-sites provide great opportunities to encourage online story-telling by guiding you through the site in a linear manner. The scrolling feature provokes curiosity, which can motivate visitors to spend more time on the page (see Figure 6.19). However, parallax websites are not without limitations. The single long web page is not conducive to website SEO (search engine optimization). The large amount of visual and other multimedia information on this single page may cause longer loading time, which could frustrate users before they even start scrolling. In addition, it is harder to make parallax websites compatible with the responsive design for mobile devices. Designers would have to be very careful to avoid overdoing it to make the site too complicated. The website for the Seattle Space Needle serves as a good example of parallax scrolling (www.spaceneedle.com). Unlike most other parallax sites, it requires users to scroll up instead of scrolling down. This site juxtaposes clickable photos and text with scrolling to give you a unique browsing experience.

Figure 6.19 In this example of a parallax website, the background and foreground elements traverse at different speeds as the user scrolls vertically up or down the page. The mid-ground element (the human silhouette) is locked down, making it motionless during scrolling.

Source: https://www.tsp.gov/takeFIVE.

Personalization

When a computer system personalizes your interface, it’s using your previous actions (sometimes information you put in a profile) to predict your interests. In other words, it relies on your implicit interests rather than your explicitly expressed ones. For instance, Netflix.com might recommend Avatar based on the fact that you’ve rented other science fiction and fantasy movies. Facebook.com examines your profile and gives you relevant advertisements. Sometimes the process isn’t perfect.

Figure 6.22 With every search, Amazon.com acquires valuable information about the shopping and buying habits of its customers. Through collaborative filtering, this information is personalized and shared with other shoppers who are conducting a similar search.

Source: http://www.amazon.com.

A system needs data to make effective predictions and recommendations. It might ask you to submit a questionnaire—collecting demographic, lifestyle, and content preference information—when you register with a website or application. The system then applies rules and gives you a preset category of content that fits your profile. Another way it can collect that data is by data mining—such as with a website clickstream, or a record of your clicks—to anticipate what action you might take next. Both these approaches require you to log in to your own account. But it can collect data even if you don’t have an account. Using cookies saved on your hard drive, the system can identify you and your browser, then give you an individualized welcome message and recommendations. But if you use a friend’s computer or a public computer without first logging in to the site, you won’t get a truly personalized interface.

One of the best ways to personalize an interface is with collaborative filtering. Collaborative filtering technology examines both your profile and the action you’re taking, such as viewing a book on Amazon.com. It then bases feedback on what similar people who took that same action did. The group of like-minded people you are being compared to constantly changes based on what you’re doing (see Figure 6.22).

Customization

Unlike personalization, customization allows users to deliberately tailor content, giving them agency. As a user, you can directly choose options or even create new content. As researcher Sampada Marathe explains, customization can be either cosmetic or functional.¹ Cosmetic customization lets you control presentation, such as the background, color, font, layout, graphics, and your profile photo. For instance, with a Wii, you can create an avatar of yourself, selecting a gender, hair and skin color, facial features, name, and body type. At the “feature” level of its interface, Facebook lets you hide your friend Bob’s posts. As the name implies, functional customization lets you change the functionality of your interface. MyYahoo.com lets you add and remove applications on your page and even drag-and-drop to rearrange the order of applications. Along with changing the background color and theme, iPhone allows you to add and remove apps, as well as adjust the display order of these apps (see Figure 6.23). In Skype, you can create a specialized

Figure 6.23 Users can customize their iPhone interface 1) cosmetically by changing the theme and 2) functionally by adding or removing apps or changing settings.

ringtone for contacts in your address book. A ringtone might be a statement, such as “Mike is calling,” a song, or some other sound.

Sometimes personalization and customization work together in one interface. On YouTube.com, you can customize your own channel, changing its title, creating tags, changing the background theme and color, and adding and removing functional modules. At the same time, YouTube.com will also suggest videos you might be interested in based on what you recently viewed.

Learnability

Learnability is how fast a user can accomplish the basic tasks on an interface they have never used before. An interface will be easier to learn if its design taps into the core psychology of how we learn, and we learn well when something is familiar, general-izable, predictable, consistent, and simple. If the design of an interface is similar to ones users are familiar with, they will be able to navigate through it by generalizing what they’ve learned in the past. They will be able to predict what will happen when they click a certain button or figure out how to go back to the homepage. If you keep the design pattern of the interface consistent across different sections, users will be less confused and will need to adapt their behavior less. Learning is fast when there is not much to learn. Less complexity also can improve learnability.

Efficiency

Efficiency is how fast a user can perform tasks after learning how to use the interface. While learnability is about users’ initial interactions with the interface, efficiency is about the effort users expend during repeated visits. For example, two shopping websites can be equally learnable if their checkout buttons are well placed, making it easy for users to complete a purchase. But one may be more efficient than the other. One may require a single step for completing the purchase, while the other may take four steps and require users to fill in several forms. An efficient website can ultimately save users a lot of time, make them happy about their experience, and boost both ratings and repeat business.

Memorability

If a user has used the interface before, can he or she still remember enough to use it effectively after being away from it for a while? This is the issue of memorability. It’s not surprising that users tend to forget how to use interfaces they only use occasionally. If they use several different systems at the same time, such as three different banking websites, they’ll have an even harder time. Relearning a system every time they come back takes extra time and effort, and some people may take their business elsewhere. Memorable feedback helps users, and familiar visual cues make an interface both more learnable and memorable.

Error Management

Although usability is primarily focused on eliminating design mistakes rather than blaming users, we realize people will click buttons we didn’t expect them to click and make other decisions we might think of as errors. A good interface: 1) reduces the number of errors users might make, 2) decreases the severity of each error, and 3) makes it easy for users to recover from errors. If possible, avoid creating situations in which users are likely to make mistakes. For example, if you expect users to look for content or a feature that’s on another page, add a link to it on the current page. And if a user submits a form with an empty required field, send the user back to the partially completed form—not an empty one—and point out what’s missing.

Satisfaction

Satisfaction is about enjoyment. How pleasant is the user’s experience? How much do users like the interface, and how satisfied are they with it? We can learn about the other three elements of usability by watching users interact with the interface. Not so much with satisfaction: to understand satisfaction, we need to ask for users’ subjective feedback.

If you are designing something only you will use, you can do almost anything. But most interface design is a creative activity bounded by constraints: time, money, environment, and more. Usability is just another constraint, an essential one. Checking usability lets you explicitly identify users’ needs. You learn how people usually perform on interfaces similar to what you plan to design. It sheds light on real issues you need to consider and inspires ideas for improvement. Usability is never the enemy of creativity. You, as the designer, ultimately choose the details of your design. But usability principles and testing give you a way to ensure people will actually want to use your website, play your game, or visit your kiosk.

Usability Testing

If you want to ensure the usability of an interface, you need to conduct usability tests early on and again when you develop a working prototype. They are the best way to understand how users really experience your interface and where your design isn’t intuitive. If you’re faithfully following the design process we’ve discussed, you’ve already identified the target users of your interface and developed the prototypes mimicking the entire interface or the part of it you are interested in. Now recruit your test participants: several users or good user proxies. You can catch about 80% of the problems with your interface if you choose five to eight good users and design your test carefully. You can conduct usability tests in a lab or in a more natural setting, where the interface is supposed to be used.

There are several ways to conduct a usability test. Let’s look at two: 1) unobtrusive observation and 2) think-aloud protocols, also called obtrusive observation.

Whichever method you choose, avoid bias by using a script (such as the Test Facilitator’s Guide available on Usability.gov) so each participant receives the same instructions when you explain tasks. Also, make participants comfortable with the process. People often have anxiety about testing, even when there’s no grade involved. Remember to explain that the interface is being tested, not them. Tell them that any problems they have are problems with the interface and that they are helping you when they find problems.

With each method, you usually give participants one or more tasks to complete. With the unobtrusive observation method, after you give participants the basic instructions, you observe what they do without talking to them. You can record how much time they need to finish a task, how many errors they encounter, whether they are confused by a certain function, as well as their physical and emotional reactions. Even if you only have a paper prototype, you can give them tasks to complete (e.g., find out how to email the vice president of operations), have them point to where they would click, and watch what they do. In contrast, when you use the think-aloud method, you will not only keep a record of what they do, but also encourage them to talk about their experience as they interact with the interface. Is it hard or easy? What do they expect to happen when clicking a thumb-nail or image? If they were to encounter a similar problem in a different interface, how would they solve it?

If you are testing a fuller prototype, give participants tasks that will require them to use or interact with at least the following types of components:

• ■ Main menu and submenus
• ■ Interactive components (forms, search boxes, pop-ups, and so on)
• ■ Text and informative statements
• ■ Images (especially icons)

Ask your users to go to specific pages or screens, use forms, complete tasks that involve icons, and find answers to questions that require them to go to pages or screens buried in your architecture. Ask them to do anything an average user might do. If you have pages or screens they can’t get to in one or two clicks, choose some tasks that require them to go to these deeper spots. If you have submenus, choose tasks that require the users to use them. For instance, if you are designing a web-site for a club, and you have membership information they can get to only from a submenu, ask a question about membership (e.g., How much are dues?). Make sure your design isn’t missing features they want, like search boxes, contact links, and such. Get their reaction to the colors, fonts, layout, images, and other traits of your design.

With the think-aloud method, you can collect users’ responses and understand their decision-making in real time. You can also collect much of the same data you would in unobtrusive observation; however, you might interrupt the normal flow of users’ interaction with the interface, making the interaction unnatural and some data meaningless. What will a users’ “time on task” (the time it took them to complete a task) mean if you interrupted them to talk at length about what they were doing?

In addition to observing users’ actions, you can carry out focus-group research, letting users sit together and discuss their experiences with the interface. You can also collect their opinions in one-to-one interviews to get more in-depth feedback. Questionnaires, both pencil-and-paper and online, are yet another way to collect users’ feedback after they finish interacting with the interface. If you would like to compare two types of interfaces or two functions of an interface, conduct an experiment.

Soliciting and Applying Feedback

Show users your prototype, but don’t say, “It’s great, isn’t it? You like it, don’t you?” Instead, ask them what they like and what they find problematic. As you watch each user, avoid giving help. Yes, of course you know how to find that piece of information: you put it there. You’re not being tested: the interface is. The test is useless if you help your participant complete the task and then assume your design is good. If you’re using the think-aloud method, neutral prompting is okay. Don’t be afraid to prompt quiet users to share their thoughts, particularly if they look grumpy or confused. Pay attention to your users’ reactions. If some of your users look irritated as they search again and again for a piece of content, your design probably has a problem.

If your users tell you that they don’t like parts of your design, don’t get upset. The point of getting feedback is to get honest critiques that will help you make necessary changes. You will probably find it helpful to have someone else ask the questions to make the process as neutral as possible. Designing is like writing: a sentence may sound great to you, and you might have written it as a sincere response to a problem, but it may confuse your reader or come across with the wrong tone. If you’re upset, put the project aside for a while, and come back to working on it when you can consider the feedback without taking offense.

Use your test findings to help you refine design ideas, make the changes, and improve the interface. Again, you should carry out several iterations of usability testing throughout the interface design process.