Alan Cooper, Robert Reinmann, David Cronin - About Face 3- The Essentials of Interaction Design (pdf)

by About Face 3- The Essentials of Interaction Design (pdf)

  Defining the visual design framework

  As the interaction framework establishes an overall structure for product behavior, and for the form as it relates to behavior, a parallel process focused on the visual and industrial design is also necessary to prepare for detailed design unless you’re working with a well-established visual style. This process follows a similar trajectory to the interaction framework, in that the solution is first considered at a high level and then narrows to an increasingly granular focus.

  The visual design framework typically follows this process: 1. Develop visual language studies

  2. Apply chosen visual style to screen archetype

  Step 1: Develop visual language studies

  The first step in defining a visual design framework is to explore a variety of visual treatments through visual language studies (see Figure 7-3). These studies include color, type, and widget treatments, as well as the overall dimensionality and any “material” properties of the interface (for example, does it feel like glass or paper?).

  These studies should show these aspects abstractly and independently of the interaction design, because our goal here is to assess the overall tone and suitability for general interactions, and we want to avoid running the risk of distracting our stakeholders with highly rendered versions of rough interaction designs.

  11_084113 ch07.qxp 4/3/07 6:03 PM Page 137

  Chapter 7: From Requirements to Design: The Framework and Refinement 137

  Figure 7-3 Visual language studies are used to explore a variety of visual styles abstractly and somewhat independently of the interaction design. This is useful because it allows us to have initial discussions about visual language without getting hung up on interaction design details. Of course, eventually visual design and interaction design must be conducted in lockstep.

  11_084113 ch07.qxp 4/3/07 6:03 PM Page 138

  138

  Part I: Understanding Goal-Directed Design

  Visual language studies should relate to the experience goals of the personas, as well as any experience or brand keywords that were developed in the Requirements Definition phase. Commonly, a company’s brand guidelines form a good starting point for this activity, but it should be noted that brand guidelines rarely consider the interactive experience. “Brand guidelines” commonly consist of a document explaining how a company’s brand identity should be visually and textually conveyed.

  Substantial work is often required to translate a style guide for marketing collateral into a meaningful look-and-feel for an interactive product or Web site. It’s also important to consider environmental factors and persona aptitudes when devising visual styles. Screens that must be visible under bright lights or from a distance require high contrast and more saturated colors. The elderly and other sight-impaired users require larger and more readable type faces.

  We typically show between three and five different approaches during our initial review with stakeholders. This is a little different from our approach to interaction design, where there is usually one optimal behavioral framework for a product.

  Visually, there can be several different styles that are all consistent with experience keywords and goals. And of course, “beauty is in the eye of the beholder.” We’ve found many stakeholders to have quite unpredictable taste for which colors should be used in the interface.

  It is often useful to develop one or two extreme options that push the look-and-feel a bit too far in one direction. Doing this makes it easier to differentiate between the various approaches and helps stakeholders to decide upon an appropriate direction. There is ample opportunity later in the process to tame a particularly extreme visual style. That said, all the choices you present to your stakeholders should be reasonable and appropriate. It’s almost an unwritten rule that if there’s one direction that you don’t want your client or stakeholders to choose, that’s the one that they’re guaranteed to like.

  Never show a design approach that you’re not happy with; stake-

  DESIGN

  principle

  holders just might like it.

  Once you’ve developed a good spectrum of visual language studies reflecting persona experience goals and brand and experience keywords, it’s time to present them to stakeholders for feedback. It’s important to contextualize them in terms of these goals and keywords, and to describe the rationale for each direction and its relative merits. We ask stakeholders to first give us their initial emotional reaction and then talk through things in a more rational fashion. By the end of this presentation, we

  11_084113 ch07.qxp 4/3/07 6:03 PM Page 139

  Chapter 7: From Requirements to Design: The Framework and Refinement 139

  usually have consensus to move forward with some aspects of several of the visual styles, and it is common to iterate the visual language studies before moving forward to the next step.

  Step 2: Apply the chosen visual style to the screen archetype

  The next step is to apply one or two selected visual styles to key screens. We typically coordinate our visual and interaction design efforts so this step is performed close to the end of the interaction framework, when the design has begun to stabilize and there is sufficient specific detail to reflect the visual style. This further refines the visual style so that it reflects key behaviors and information. By making the design more concrete, you can better assess the feasibility of the proposed solution without the overhead of updating numerous screens for each minor change.

  Additionally, it’s easier to elicit feedback from stakeholders.

  Defining the industrial design framework

  We develop the industrial design framework in much the same manner as the visual design framework, but because the form factor and input method have significant implications for both the industrial and interaction design, it’s useful to collaborate early to identify relevant issues.

  The industrial design framework typically follows this process:

  1. Collaborate with interaction designers about form factor and input methods 2. Develop rough prototypes

  3. Develop form language studies

  Step 1: Collaborate with interaction designers about form

  factor and input methods

  If the product you are designing relies upon custom hardware (as with a cell phone or medical device), it is important for interaction designers and industrial designers to agree upon a general physical form and input methods. While the course of the design framework will certainly help to refine the design, decisions should be made at this point about the general size and shape of the product, the screen size (if any), the number and general orientation of hard and soft buttons, and if it has a touch screen, keyboard, voice recognition, and so on. This collaboration typically starts with a couple of days at the whiteboard and a condensed set of scenarios.

  Important things to consider when making these decisions include persona experience goals (refer to Chapter 5), attitudes, aptitudes, and environmental factors, as

  11_084113 ch07.qxp 4/3/07 6:03 PM Page 140

  140

  Part I: Understanding Goal-Directed Design

  well as brand and experience keywords, market research, manufacturing costs, and pricing targets. Because the cost of a hinge can make or break the margin on hardware, and because internal components (such as a battery) can have a tremendous impact on form, an early sanity check with mechanical and electrical engineers is critical.

  There is only one user experience, and it comes from the combination of the physical form and the interactive behavior of the product. The two must be designed in concert, and according to the old adage of Modern architecture: form should follow function. The demands of interaction must guide the industrial design, but concerns about fabrication and cost will also impact the possibilities available to interaction design.

  There is only one user experience — form and behavior must be

  DESIGN

  principle

  designed in concert with
each other.

  Step 2: Develop rough prototypes

  It is often the case that even after the overall form and input methods are defined, there are still a variety of approaches that the industrial designers can take. For example, when we’ve designed office phones and medical devices, there’s often been the question of whether the screen angle should be fixed or if it should be adjustable, and if so, how that will be accomplished. Industrial designers sketch and create rough prototypes from foam board and other materials. In many cases, we’ll show several to stakeholders because there are different cost and ergonomic considerations with each.

  Step 3: Develop form language studies

  In a fashion similar to the visual language studies described above, the next step is to explore a variety of physical styles. Unlike the visual language studies, these are not abstract composites but rather represent various looks applied to the specific form factors and input mechanisms determined in Steps 1 and 2. These studies include shape, dimensionality, materials, color, and finish.

  As with visual style studies, form language studies should be informed by persona goals, attitudes, aptitudes, experience keywords, environmental factors, and manufacturing and pricing constraints. Typically these studies require several rounds of iteration to land upon a feasible and desirable solution.

  11_084113 ch07.qxp 4/3/07 6:03 PM Page 141

  Chapter 7: From Requirements to Design: The Framework and Refinement 141

  Refining the Form and Behavior

  When a solid, stable framework definition is reached, designers see the remaining pieces of the design begin to smoothly fall into place: Each iteration of the key path scenarios adds detail that strengthens the overall coherence and flow of the product. At this stage, a transition is made into the Refinement phase, where the design is translated into a final, concrete form.

  In this phase, principles and patterns remain important in giving the design a fine formal and behavioral finish. Parts II and III provide useful principles for the Refinement phase. It is also critical for the programming team to be intimately involved throughout the Refinement phase; now that the design has a solid conceptual and behavioral basis, programmer input is critical to creating a finished design that will be built, while remaining true to concept.

  The Refinement phase is marked by the translation of the sketched storyboards to full-resolution screens that depict the user interface at the pixel level (see Figure 7-4).

  Figure 7-4 Full-resolution bitmap screens for Cross Country TravCorps based on the Framework illustration from Figure 7-2. Note that there are minor changes to the layout that naturally result from the realities of pixels and screen resolution.

  Visual and interaction designers need to work closely together at this stage to ensure that visual changes to the design continue to reinforce appropriate product behaviors and meet the goals of the primary personas.

  11_084113 ch07.qxp 4/3/07 6:03 PM Page 142

  142

  Part I: Understanding Goal-Directed Design

  The basic process of design refinement follows the same steps we used to develop the design framework, this time at deeper and deeper levels of detail (though, of course, it isn’t necessary to revisit the form factor and input methods unless an unexpected cost or manufacturing issue crops up with the hardware). After following Steps 2–6 at the view and pane levels, while incorporating the increasingly refined visual and industrial designs, use scenarios to motivate and address the more granular components of the product.

  Address every primary view and dialog possible. Throughout the refinement phase, visual designers should develop and maintain a visual style guide. Programmers use this guide to apply visual design elements consistently when they create low-priority parts of the interface that the designers typically don’t have time and resources to complete themselves. At the same time, industrial designers work with engineers to finalize components and assembly.

  While the end product of the design process can be any one of a variety of outputs, we typically create a printed form and behavior specification. This document includes screen renderings with callouts sufficiently detailed for a programmer to code from, as well as detailed storyboards to illustrate behaviors over time. It can also be valuable to produce an interactive prototype in HTML or Flash that can augment your documentation to better illustrate complex interactions. However, keep in mind that prototypes alone are rarely sufficient to communicate underlying patterns, principles, and rationale, which are vital concepts to communicate to programmers. Regardless of your choice of design deliverable, your team should continue to work closely with the construction team throughout implementation.

  It requires vigilance to ensure that the design vision is faithfully and accurately translated from the design document to a final product.

  Design Validation and Usability Testing

  In the course of an interaction design project, it’s often desirable to evaluate how well you’ve hit the mark by going beyond your personas and validation scenarios to put your solutions in front of actual users. This should be done once the solution is detailed enough to give users something concrete to respond to, and with enough time allotted to make alterations to the design based upon your findings.

  In our experience, user feedback sessions and usability tests are good at identifying major problems with the interaction framework and at refining things like button labels and activity order and priority. They’re also essential for fine-tuning such

  11_084113 ch07.qxp 4/3/07 6:03 PM Page 143

  Chapter 7: From Requirements to Design: The Framework and Refinement 143

  behaviors as how quickly a screen scrolls in response to turning a hardware knob.

  Unfortunately, it’s difficult to craft a test that assesses anything beyond first-time ease of learning. There are a number of techniques for evaluating the usability of a product for intermediate or expert users, but it can be quite time consuming, and is imprecise at best.

  There are a variety of ways to validate your design with users, from informal feedback sessions where you explain your ideas and drawings and see what the user thinks, to a more rigorous usability test where users are asked to complete a predetermined set of tasks. There are advantages to each approach. The more informal style can be done spontaneously and requires less preparation. The downside to this approach is that the designer is often guilty of “leading the witness” by explaining things in a persuasive manner. In general, we’ve found this approach to be acceptable for a technical audience that is capable of imagining how a few drawings might represent a product interface. It can be a useful alternative to usability testing when the design team doesn’t have time to prepare for formal usability testing.

  Given sufficient time, we prefer more formal usability testing. Usability tests determine how well a design allows users to accomplish their tasks. If the scope of a test is sufficiently broad, it can also tell you how well the design helps users reach their end goals.

  To be clear, usability testing is, at its core, a means to evaluate, not to create. It is not an alternative to interaction design, and it will never be the source of that great idea that makes a compelling product. Rather, it is a method to assess the effectiveness of ideas you’ve already had and to smooth over the rough edges.

  Usability testing is also not the same as user research. For some practitioners, “tests”

  can include research activities such as interviews, task analyses, and even creative

  “participatory design” exercises. This is conflating a variety of needs and steps in the design process into a single activity.

  User research must occur before ideation, usability testing following it. In fact, when project constraints force us to choose between ethnographic research and usability testing, we find that time spent on research gives us much more leverage to create a compelling product. Likewise, given limited days and dollars, we’ve found that spending time on design provides more value to the product d
esign process than testing. It’s much more important to spend time making considered design decisions based upon a solid research foundation than to test a half-baked design created without the benefit of clear, compelling models of the target users and their goals and needs.

  11_084113 ch07.qxp 4/3/07 6:03 PM Page 144

  144

  Part I: Understanding Goal-Directed Design

  When to test: Summative and

  formative evaluations

  In his 1993 book Usability Engineering, Jakob Nielsen distinguished between summative evaluations, which are tests of completed products, and formative evaluations, conducted during design as part of an iterative process. This is an important distinction.

  Summative evaluations are used in product comparisons, to identify problems prior to a redesign, and to investigate the causes of product returns and requests for training and support. Summative studies are generally conducted and thoroughly documented by professional, third-party evaluators. In some cases, particularly in competitive product comparisons, summative studies are designed to yield quantitative data that can be tested for statistical significance.

  Unfortunately, summative evaluations are often used as part of the quality assurance process near the end of the development process. At this point, it’s usually too late to make meaningful design changes; that train has left the station. Design should be evaluated before the coding begins (or at least early enough that there is time to change the implementation as designs are adjusted). However, if you need to convince stakeholders or programmers that there is a usability problem with the current product, nothing beats watching real users struggle through basic tasks.