Interactions

Authors:

---

  Philosophy of Design

 Experience is everything

We sometimes call the user interface "the last two feet," to portray its role in bridging the last two feet between the monitor and the user. Too often, design and usability are treated as secondary, finishing steps. While functionality and content are of course primary, "the last two feet" are strategically critical, because that is when all functionality and content are realized and delivered to the user. This delivery is the culmination of all development effort and investment. With our clients, we stress the importance of beginning with this end in mind.

AM+A has been designing user interfaces for 20 years. We find that the fundamental challenges of achieving effective visual communication reappear with each new generation of platforms and products. Now, as more and more systems are placed under computer control, the concerns of user interface are increasing in scope to become concerns of a total user experience. Users are confronted with an increasingly dynamic (personalized, adaptive, collaborative) environment, which attempts to combine heterogeneous or even competing systems (hardware- and software-based interfaces, online and offline experiences, past and present conventions, and so on). It is becoming increasingly necessary to look beyond the design of specific screens to the broader contexts of use.

Our design philosophy is founded on the following values:

• Service to users: enabling ease of use and ease of life; uncluttering life by making technology more transparent; serving clients through serving users
• The importance of pioneering: using experience to innovate; developing vision; solving cutting edge problems; creating a human-centered future
• The joy of understanding: creating clarity for clients and users; turning information into knowledge and wisdom; making the complex easy; continuously improving our practice

 Combining the power of design and usability

Some companies have found it difficult to convert the output of pure research or usability firms into actionable design decisions. Likewise, studios emphasizing aesthetics often lack the rigor to thoroughly analyze an information problem. We believe that to be most effective, usability professionals need to have a strong understanding of design and vice versa. We have found that both strong analysis and design are essential to creating good user experiences.

Our roots are in information-oriented design. Our approach to visual design is influenced by Swiss and German designers such as Armin Hoffman, Josef Muller-Brockman, and Otl Aicher, with an emphasis on type, color, and grid as organizers. Individual AM+A designer/analysts have different strengths, but all are expected to participate in both analytical and design activities, as we see them forming an integrated process.

 Managing complexity and innovation

We apply this approach to working with our clients on two major types of problems. The first problem is finding ways to make complex information and interaction situations as simple as possible while still retaining their power. These projects come from any domain (financial, medical, travel, customer relationship management (CRM), Web searching, etc.) where users must deal with large amounts of information requiring sophisticated interactions or visualizations. The second problem is responding to situations that require user interface innovations. These typically involve emerging technologies (such as wireless devices, tiny "babyface" displays embedded in phones, cars, watches, and so on, or simply technologies that are new to our clients) or human-centered issues (such as culture-sensitive design and social computing).

 Disciplines and tactics

We divide our practice of creating a user interface into design, usability, and strategy. Figure 1 demonstrates how we see these disciplines intersecting. Major tactics can belong within one discipline or at the intersection of two or more.

Our clients are typically technology- or content-driven. Our job is to translate business goals and technological capabilities into user benefits. To that end, we furnish our clients with strategic needs analyses, usability evaluations, interaction designs, visual designs, design specification documents, and training. We maintain a trend research library to help us stay on top of innovation spaces and keep an archive of project document templates and past project examples to boost our efficiency.

  Design Process

We say that our practice stands on legs: work is based in design Principles, grounded in observational Proof (including testing, observations, and research), and regulated by a reliable Process. We describe user interfaces as being made up of six components. These components are useful in breaking down complex UI projects into manageable parts:

1. Metaphors: Easy recognition and retention of fundamental concepts
2. Mental model: Logical organization and representation of data and functions, so that users can comprehend and predict a system's behavior
3. Navigation: Intuitable movement within the mental model through menus, dialog boxes, and control panels
4. Appearance: Effective appearance to the senses (look, sound, touch, etc.) based on communication and branding objectives
5. Interaction: Efficient input-output sequencing, including feedback
6. Information visualization: Efficient representation of data through primarily visual means such as tables, forms, charts, maps, and diagrams

Design teams are comprised of designer/analysts and a project manager. Within the design team, one designer/analyst is designated as the design lead. An internal launch meeting is held to discuss project strategy, roles, and risks, and to energize the team. With our clients, we assemble an interdisciplinary team of stakeholders to provide the project with context and goals. User profiles and scenarios are critical for defining project strategy and scope. Often, a heuristic evaluation or other type of audit is performed early in a project to identify problems and opportunities.

We work from the big picture down, creating a series of models of increasing specificity: user model, task model, conceptual model, interaction model. In each phase, models capture decisions that drive the next stage of design. Figure 2 shows what we try to attain with each phase.

For functionality-driven projects, appearance design follows the completion of a detailed interaction model, but on other projects it is begun in earlier, formative stages. More iterations are scheduled for phases in which more ambiguity exists or more confidence is needed. Iterations are often scheduled in one- or two-week cycles.

We employ usability testing techniques as a tool to improve design quality. During testing, we try to treat usability problems found during testing as good news—it shows that the test is working and where the design can be improved.

Our interaction design is based on the principles of essential use cases. Because we often deal with very complex systems, we emphasize participatory design techniques as part of user mental modeling. Recently, contextual observation has become more important as we find ourselves working on projects in which users' needs and behavior are not well understood.

Depending on the nature of the project, documentation can range from general guidelines to detailed specifications. We continue to provide ongoing consultation and review for our clients as designs are implemented. An internal project debriefing is held to help spread lessons learned, and finally the project files are archived. Whenever possible, project documents are generalized to form templates or examples for future use by both our clients and ourselves.

  Sample Design Project

AM+A designed the current look and feel of the J. Paul Getty Trust (also called "the Getty") Web site (www.getty.edu). The J. Paul Getty Trust is an international cultural and philanthropic institution devoted to the visual arts made up of the J. Paul Getty Museum, the Getty Research Institute, the Getty Conservation Institute, and the Getty Grant Program. Besides hosting more than 3,000 works of art, the Getty Web site presents event information, professional reports in conservation and art history, job listings, grant information, research tools, videos, and more.

 Large-scale information architecture

Before the launch of the redesigned Getty Web site, several groups had developed their own sites with no standards or centralized efforts. Figure 3 shows the variety of those sites. Throughout many years, more than 54,000 largely hand-coded pages had been created. The information architecture was thus totally organization-centric. These sites were loosely integrated via a home page gateway. Works of art (of interest to the general public), grant information, and the trust annual report (accessed by a much smaller and more select group) were all presented equally on this home page.

Integrating all of this legacy content to create a coherent information architecture was no small task. One goal of the redesign was to bring to the top level the most interesting and compelling content, encouraging exploration and discovery. AM+A studied the user's needs and developed user portraits in order to guide the site's design. After analyzing the various information structures that were inherent in the content, we defined a robust toolkit of page types and navigation devices (such as subsites, sections, subsections, breadcrumbs, see-also links, etc.) that could handle any kind of content. To handle content of this scale, it was necessary to divide the entire site into eight subsites. Each subsite was given its own color identity to help users maintain a sense of place. Figure 4 shows several pages of the new design system.

 User portraits inform design strategy

Working with the Getty AM+A created a set of target user portraits. These portraits encouraged lively discussions that drove many key design decisions. For instance, the target user for the Art Collections, "Chris," was seen as someone who would be exploring the Web site with little intent or direction. Thus, the design was focused on offering many paths of exploration and avoiding dead-ends. AM+A capitalized on cross-indexed data from the Getty about artists and subject matter to provide users a means of easily traveling between areas of interest. Detail views allow users to see many different perspectives on a single piece.

"Thelma" was a professional art historian with the need to access many of the Getty's more technical resources. Through detailed discussions, it became apparent that Thelma would be an unlikely user of the Art Collection—as we had initially assumed—because as a professional, her needs would be specific and technical. Thelma's needs were more relevant to the design of the research resource areas than the online gallery of art.

The user portrait for the Visitor's Guide subsite was defined as someone who might visit the Getty one day and Disneyland the next. Hence, this section was given a very pragmatic focus and filled with logistical aids such as wheelchair access and parking information.

 Designing a digital museum

After developing the site's architecture, navigation, and interaction, AM+A was still faced with the challenge of creating a visual design worthy of presenting the works of art. The architect Richard Meier had created a highly modernist world-class museum to physically house the Getty's collection of classical works and antiquities. Our clients wanted to retain that juxtaposition but avoid a growing perception of the Getty as austere. We were charged with introducing a sense of whimsy that would be warm and welcoming to the local Los Angeles population. Friendly and saturated colors provide the backdrop for clear, crisp, legible type, and some elements, such as the Getty logo, were tilted to express a light sense of playfulness.

  Author

Eugene Chen

Director of Design and Analysis
AM+A California (Aaron Marcus and Associates, Inc.)
Eugene@AMandA.com
Phone: +1 (510) 601-0994 x23

Eugene Chen directs the practice of user interface (UI) design and analysis at Aaron Marcus and Associates, Inc. (AM+A). His favorite design experience is researching user behavior and developing methodologies. At AM+A, he brings an integrated sense of design and usability to such projects as the J. Paul Getty Trust Web site and the creation of future smart phone concepts for Samsung Electronics. His research and lecture interests include mobile device design, social interfaces, design patterns, and Web applications. He has spoken on these topics for Web 2001, BayCHI, Forrester Research, and I.D. magazine.

  Figures

Figure. Eugene Chen

Figure 1. AM+A integrated disciplines and tactics.

Figure 2. AM+A phase objectives and artifacts.

Figure 3. Images of various Getty Web sites before AM+A design and intergration.

Figure 4. Color coding and organization of J. Paul Getty Trust subsites.

  Sidebar: Company Snapshot

Job titles

Designer/Analyst, Project Manager, Production Assistant

Job qualifications

Because every project brings a new domain and a new context, we look for people that are good learners. Because we are design consultants, we look for people that have strong communication skills (written, verbal, or visual).

  Sidebar: Practitioner's Workbench

Resources

1. Apple Computer. Macintosh Human Interface Guidelines. Addison-Wesley, 1993.
2. Constantine, L. and Lockwood L. Software for Use. Addison-Wesley, 1999.
3. Koren, L. and Meckler, W. Graphic Design Cookbook. Chronicle Books, 1989.
4. Marcus, A. Graphic Design for Electronic Documents and User Interfaces. ACM Press, 1992.
5. Negroponte, N. Being Digital. Vintage Press, 1995.
6. Tufte, E. Envisioning Information. Graphics Press, 1990.
7. interactions
8. CHI Proceedings
9. Webmonkey
10. AIGA GAIN
11. I.D. magazine

Tools

Whiteboard, large and small sticky notes, paper and pen, digital camera and video camera for observations, Macromedia Director® and Flash®, Adobe Photoshop® and Illustrator®, Microsoft Word and Excel®, iTunes

Favorite quotations

"User Advocacy is the passion, Human-Centered Design the means." (Don Norman)

"Good design is clear thinking made visible." (Edward Tufte)

"To get good ideas, get lots of ideas." (Linus Pauling)

"Build to learn." (Sean Corcorran)

"Never go to a meeting without a prototype." (Dennis Boyle, IDEO)

"I never know when inspiration will occur, but I'm always at the canvas when it does."(Pablo Picasso)

Sources of inspiration

Nature, Bauhaus, Apple Computer, science fiction

HCI joke

"Your user requirements include over 400 features. Do you realize that no human being would ever be able to use a product with that level of complexity?"
"Good point. I'd better add 'easy to use' to the list." (Dilbert)

 

©2002 ACM  1072-5220/02/0300  $5.00

Permission to make digital or hard copies of all or part of this work for personal or classroom use is granted without fee provided that copies are not made or distributed for profit or commercial advantage and that copies bear this notice and the full citation on the first page. To copy otherwise, to republish, to post on servers or to redistribute to lists, requires prior specific permission and/or a fee.

The Digital Library is published by the Association for Computing Machinery. Copyright © 2002 ACM, Inc.