User Interface Design for Mere Mortals PHẦN 7 ppsx

7 Designing a User Interface“Let it be your constant method to look into the design of people’s actions, and see what they would be at, as often as it is practicable; and to make this c

7 Designing a User Interface

“Let it be your constant method to look into the design of people’s actions, and see what they would be at, as often

as it is practicable; and to make this custom the more

significant, practice it first upon yourself.”

—Marcus Aurelius

Topics Covered in This Chapter

Designing the Persona-Based Interaction Framework

Interaction Design

Software Postures

Interface Behaviors

Helping Users Find Information

Communicating with the Users

Refining the Form and Behavior

This book has been taking a step-by-step approach to understanding theprocess and your users and has included the following topics:

• Learning the issues related to user interface design (Chapter cepts and Issues”)

2,“Con-• Making the business case to your stakeholders (Chapter 3,“Making theBusiness Case”)

• Learning about the tools necessary to create good design (Chapter 4,

“Good Design”)

• Obtaining information about and understanding your users (Chapters5,“How Users Behave,” and 6,“Analyzing Your Users”)

163

Now that you’ve made the business case and you know about your users, it’stime to take that knowledge about your users and begin defining the require-ments of your user interface You’ll begin by designing the interaction frame-work based on user personas that were discussed in Chapter 6.

Then you’ll learn about interaction design and what you should do to makeyour interface ethical, purposeful, pragmatic, and elegant—four features ofgood design discussed in Chapter 4 Part of the interaction design is the type

of posture you want to use You’ll learn about the four different GUI posturesand when they are appropriate

Finally, you’ll delve into interface behaviors and how you should design theinterface so that you can effectively communicate with users and help themfind the information they need When you have finished determining whatthe users need in the framework and how elements within the frameworkshould behave, you’re ready for the fifth and final step in the Goal-DirectedDesign Process: refining the form and its behaviors to create a final design

Designing the Persona-Based Interaction Framework

The third phase of the Cooper and Reimann (2003) Goal-Directed DesignProcess is the Requirements phase You need to define the requirements ofyour plan based on your personas before you can design a framework.Cooper and Reimann define obtaining requirements as (yes, it’s another) five-step process

• Create problem and vision statements—Based on your understandingnot only of the persona but also of the company goals, create the objec-tive of the design in terms of a problem statement and vision statement.The problem statement defines what the persona faces currently andhow the business is affected, if at all For example,“Nurses can’t get thepatient information they need quickly enough; therefore, nurse morale

is lower, which results in more nursing mistakes and patients staying inthe hospital an average of an extra day.”

The vision statement should explain how the new user interface willhelp both the users and the company For example,“The new design ofthe user interface will give the nurses the ability to perform tasks A, B,

C, and D and result in higher morale for nurses, fewer nursing mistakes,patients being released earlier, and greater bed turnover.”

• Brainstorm—Having one or more brainstorming sessions with yourproject team will help your team understand what biases exist amongyour team members after looking at the persona data One or morebrainstorming sessions will also uncover ideas that your team canimplement now or sometime later Brainstorming sessions should becentered on a topic For example, a brainstorming session can center

on what user interface elements will meet specific goals

• Identify persona expectations—Each persona has its own mental model

of the product You must identify each persona’s desires and the tations, behaviors, attitudes, biases, and other factors that affect them.Some of the information that the personas mention or don’t mention,such as tasks they want to perform, can provide a guide to what eachpersona wants

expec-• Construct context scenarios—These stories about personas and theiractivities will help you understand how each persona gets through atypical day using the new and improved system, which includes thenew user interface The scenarios don’t discuss the form and function,but only the behaviors of the user and the interface

In each context scenario, you need to identify not only the ment and organization in the persona’s daily scenario, but also touch onthe points that each primary and secondary persona has with the sys-tem and the other personas that it may interact with through the sys-tem For example, the primary persona is a nurse who works with onepersona, but the secondary persona is an administrator who workswith a completely different persona from the nurse This differencemay show that each persona uses the system differently

environ-• Identify needs—After you create the context scenario, analyze it todetermine what the needs are for each persona Personas have threetypes of needs: data, functional, and contextual

Objects and information in the system comprise data needs For ple, the letters you see in a word processing document are objects youneed to see as you type those letters

exam-Operations that need to be performed on objects in the system prise functional needs For example, if you want to make a block of text

com-in a word processcom-ing document bold, there is an operation to do that.Firm and possible relationships between sets of objects or sets of con-trols comprise contextual needs For example, when you save a favoriteWeb site in the Favorites list in Internet Explorer, Internet Explorer

must update the list with the new favorite as well as list all your othersaved favorites.

Note that this process is not a linear one-time process, but iterative For ple, you may want to go through the process once, go through a brainstorm-ing session, and then refine your persona expectations, context scenarios, orneeds based on the results of that session

exam-Real-World Requirements

When you’ve finished developing the creative side of your product ments, it’s time to focus and learn about your real-world requirements for theproduct These other requirements include (Cooper and Reimann, 2003) thefollowing:

require-• Business requirements that include business development models,timelines, and pricing structures

• Customer and partner requirements that include installation, tion, customer support, and licensing agreements

configura-• Technical requirements that include the operating system you use andthe form factor that the product requires For example, the productmay be a Web site that needs to be displayed at a certain video resolu-tion so that all users can read the information on each Web page

These other requirements may force you to rethink or refine some of theideas that you generated in the requirements process They may even spurmore brainstorming

Defining the Framework

When your requirements list is ready, it’s time to define the framework ating a framework is a six-step process (Cooper and Reimann, 2003):

Cre-1. Define the form factor and input methods—Are you creating a userinterface in a desktop computer operating system, like Windows? Areyou creating a Web interface? Or are you creating an interface for a

handheld PC operating system? The answer defines your software ture, which you’ll learn more about later in this chapter.

pos-You also need to find out how people will interact with the interface.For example, will people use a keyboard and mouse, voice interface, or

a wand that you use with a handheld PC to touch the screen? There areplenty of input options available for which you may need a plan.

2. Define the views—You need to determine what the user will see based

on the context of where he is in the system so he can properly ize the information on the screen For example, you may need to haveseparate views for different tasks, such as opening a Print dialog box toprint a spreadsheet However, if you have elements that are related toeach other, like a spreadsheet and a chart generated from that spread-sheet, you can define a view that incorporates the spreadsheet andchart in the same view

organ-3. Define the functional and data elements—After you construct a list ofviews, you need to know how objects, such as onscreen windows andcontrols, buttons, and icons, will be viewed onscreen The type of inputdevices that your users will use will affect what functional and data ele-ments you will have on the screen An example of input devices inMicrosoft Word is shown in Figure 7.1

Figure 7.1 Microsoft Word has many types of input devices to manipulate it.

4. Determine the functional groups and hierarchy—Now that you knowwhat your functional and data elements are, you can begin to groupthese features together, arrange containers, and establish hierarchicalrelationships between each group Use the persona types as a guide fororganizing your functional and data elements A menu bar is one exam-ple of functional groups; there is a group name in the bar with the indi-vidual menu options underneath the name Some features in the list aregroups themselves that open a second-level feature list in the hierarchy,such as when you can add a closing salutation from the AutoTextoption within the Insert menu, as shown in Figure 7.2.

5. Sketch the interaction framework—You can sketch rough drawings ofthe top level (“the big picture”) of the user interface design and writenotes about the relationship between different objects in the interface.You don’t need to drill down into certain sections of the interface atthis point; doing so can end up distracting you and your other teammembers

Figure 7.2 A menu example of functional groups and hierarchy.

6 Construct key path scenarios—This is where paper prototyping andstoryboarding techniques that you learned from Chapter 4 come intoplay Work with your team to develop scenarios of what users will see

in the interface based on your personas, and then create storyboards toshow the path of each interaction as the user completes a task, asshown in Figure 7.3 Each storyboard represents a screen and showswhat the screen will look like as the user initiates an action, such asclicking a button

Note that this process is also iterative As you refine and finalize your key pathscenarios, you can create paper prototypes based on those scenarios dis-cussed in Chapter 4 so that you can determine whether your scenarios match

up with direct user manipulation of the prototype If they don’t, you willlikely have to revisit one or more steps in this process to resolve problemsrevealed by the paper prototype feedback

Figure 7.3 A sample of a storyboard that shows a draft framework and

scenarios (continues)

Figure 7.3 (continued)

Interaction Design

When you create a persona-based interaction framework, Cooper andReimann (2003) recommend that you suspend reality and believe that theoperating system is human That’s a sound strategy, because an interface thatseems more human and is more responsive to human needs results in a hap-pier user experience

To help meet the goal of user interface design that is more human, you need

to adhere to design imperatives by following principles and patterns of action and interface design

inter-Applying Design Imperatives

In Chapter 4, you learned about the four design imperatives Keep the ing design tips in mind as you develop your user interface (Cooper andReimann, 2003):

follow-• Ethical—Ethical design is considerate and helpful and actually improveshuman situations In interface design, you can improve communicationbetween your user interface and the people who use it, which leads toimproved understanding and effectiveness

• Purposeful—The goal of this entire book, as well as the reference booksI’ve cited, is to create user interface design that has the purpose of serv-ing your users well by making them stronger and more effective intheir lives

• Pragmatic—You must create and build a good user design for it to be ofvalue However, there are always other considerations requiring flexibil-ity and communication between company departments for a design tosee the “light of day” and experience success

• Elegant—Elegant design should represent the simplest complete

solution, possess internal coherence, and stimulate cognition and tion to get the user involved If your user interface is unnecessarilycumbersome and inconsistent, it’s unlikely that the user will be inter-ested in using it, and your company will be left wondering why no onewants to use your product

Principles are guidelines that address issues of behavior, form, and content(Cooper and Reimann, 2003) These principles are designed to minimize thework of the user as part of elegant design

There are three levels of design principles that you have to design for:

• Conceptual-level principles—These define what a product is In ters 5 and 6, as well as in this chapter, you learned about how to bringyour project team and your users closer together to define a productthat users will want to use

Chap-• Interaction-level principles—These define how a product should

behave, both generally and in specific situations This chapter will cuss interaction-level principles for graphical user interfaces (GUIs),and Chapter 8,“Designing a Web Site,” will discuss interaction-level prin-ciples for Web sites

dis-• Interface-level principles—These define the interface look and feel.This chapter and Chapter 8 discuss these principles

If your company has a style guide already established, it’s likely that you canuse some of its principles to help guide you in creating your design princi-ples However, in most cases, companies don’t go into the level of detail thatyou and your project team need to develop user interfaces (You may be able

to augment your company’s style guide with principles you learned duringthe development process In fact, if you keep this in mind as a secondary goal,you are more likely to create a user interface that is compatible with yourcompany’s preferred “look.” A subsidiary benefit is increased acceptance byyour superiors of a product that fits well into the company line.)

Note, too, that these principles are only guidelines and don’t provide a plete guide as to how to create your design behaviors For example, you’ll usefeedback from your users as another means to guide you and your team in thedesign process

develop-ment principles/styles guide as a means of educating and applying these terns in other projects Cooper and Reimann (2003) list three types of inter-action design patterns:

pat-• Postural—These help determine the product stance in relation to theuser You’ll learn more about software postures in the next section

• Structural—These solve problems that relate to the management ofdata in the program, including how information displays and how usersaccess and manipulate data and options in the program For example,you have probably noticed that Microsoft has been working on organi-zational issues with successive versions of its Office software programs,such as Word

• Behavioral—These solve specific interactional problems with individualdata or functional objects, or groups of objects

Software Postures

As you create your user interface design, your personas will give you a goodidea of how they will use the program, and you can design an interface with aposture that reflects how your primary personas work Note that your userswill likely not use only one of these postures, but may use more than one,depending on the task they are performing

There are four desktop-based GUI postures (Cooper and Reimann, 2003):

• Sovereign—The sovereign application is a full-screen program that

keeps the user’s attention for long periods of time For example, eign applications include programs in Microsoft Office, Microsoft Word(as shown in Figure 7.4), as well as graphics programs such as AdobePhotoshop and Illustrator

sover-This program uses the entire screen most of the time, so sovereignapplications are designed for full-screen use These applications usethat space to add functions for manipulating objects The MicrosoftWord window is a good case in point, with a menu bar, toolbars, and atask pane on the right side of the screen This results in rich feedback

to the user as well as rich input mechanisms

• Transient—The transient application is one that comes and goes

when the user needs to perform a specific task, such as using the dows Character Map to view a list of available characters in a font set.Transient programs don’t take up a lot of real estate and aren’t usedvery much

Win-Because transient applications aren’t used as often as sovereign cations, they should be simple to use and should communicate well tothe user You should minimize your use of scrollbars and other com-plex interaction features in the window and just add them when neces-sary In the Character Map window, as shown in Figure 7.5, the usersees a visual presentation of the characters so she can see what shewants quickly and easily This program contains a scrollbar to scrolldown the list of characters If the user needs help, she can click theHelp button at the top of the window

appli-Figure 7.4 An example of a sovereign posture.

• Daemonic—The daemonic application is one that doesn’t normally

interact with the user Such programs include driver programs that port your printer, monitor, and mouse If you need access to these pro-grams, operating systems provide “control panels” like the one you canaccess in Microsoft Windows The Control Panel window in Windowsprovides a list of daemonic programs you can change, as shown in Fig-ure 7.6

sup-Windows has also placed access to some of those daemonic programs

in the system tray at the right side of the taskbar in the form of smallicons next to the system clock Some programs that include utilities(such as a driver for the trackball I use) also place icons in the taskbar

so you can access those utilities when you install the program

• Auxiliary—An auxiliary application is one that combines the

charac-teristics of sovereign and transient applications Microsoft has oped auxiliary programs with its Office suite of programs as well asInternet Explorer and Microsoft Outlook Microsoft Word can also dis-play an auxiliary posture For example, you can have the task paneopen on the right side, or you can close it Adobe’s interfaces for itsgraphic design software like InDesign go Microsoft one better by hav-ing their transient programs in the forms of tabs at the right side of thewindow that you can click to open and close, as shown in Figure 7.7

devel-Figure 7.5 The Character Map window is an example of a transient posture.

Figure 7.6 The Control Panel window, which lets you configure daemonic programs.

Interface Behaviors

GUI interfaces for desktop interfaces exhibit behaviors of two of the mostcommonly used means of accessing and viewing information: the mousepointer and the window These two features are universal in a GUI You canfind mice or mice equivalents on any computer, such as a touch pad on a lap-top In this section, you will learn about the behaviors of some of these fea-tures and some of the issues surrounding them—some by Cooper andReimann (2003) and some from my own experiences

Figure 7.7 InDesign contains tabs at the right side of the window.