About Face 2'0

1
About Face 2.0
Section One Know Thy User Part I Bridging the
Gap

• Segment 1
• IntroductionCh. 1 Goal-Directed DesignCh. 2
  Implementation Models and Mental ModelsCh. 3
  Beginners, Experts, and Intermediates

2
About Face 2.0 Introduction

• Goal Provide effective and practical tools for
  designing user interfaces
• Tactical hints and tips for creating user
  interface idioms, like dialog boxes and
  pushbuttons
• Strategic ways to think about user interface
  idioms the ways in which the user and the idiom
  interact
• Maintain a strategic sensitivity of how users
  actually interact with specific software, and
  have at your command a tactical toolbox to apply
  in any particular situation
• The explosion of the web brought interaction
  design and usability to the fore

3
Interaction Design

• Interaction design is the definition and design
  of the behavior of artifacts, environments, and
  systems, as well as the formal elements that
  communicate that behavior
• Interaction design seeks first to plan and
  describe how things behave and then, as
  necessary, to describe the most effective form to
  communicate those behaviors
• Without a logical structure and a flow that
  facilitate solving the practical problems of
  users, form-oriented interactive design is, by
  itself, sensual titillation of questionable value

Form
Meaning, Content
Behavior
Three Dimensions of Design
4
Scope of About Face 2.0

• Section One (Know Thy User)
• Design process systematic understanding of the
  user
• Section Two (Designing Behavior and Form)
• Strategic principles and tools
• Section Three (Interaction Details)
• Tactical issues
• Process
• Research the domain
• Understand the users and their requirements
• Define the framework of a solution
• Fill in the design details
• Validate (usability testing)
• Not covered in About Face 2.0
• Provide a working language for interaction design

5
Section One Know Thy User

• Part I Bridging the Gap
• Ch. 1 Goal Directed Design
• Ch. 2 Implementation Models and Mental Models
• Ch. 3 Beginners, Experts, and Intermediates
• Ch. 4 Understanding Users Qualitative Research
• Ch. 5 Modeling Users Personas and Goals
• Ch. 6 Scenarios Translating Goals into Design
• Ch. 7 Synthesizing Good Design Principles and
  Patterns

6
Almost all of the problems with the design of
digital products originate from well-intentioned,
intelligent, and capable people focusing on the
wrong things. Instead of technology and tasks,
we must focus on the goals toward which users
strive and the motivations they have for doing so
even if the users themselves cant articulate
them.
7
Design

• Victor Papanek (industrial designer) the
  conscious and intuitive effort to impose
  meaningful order
• "The only important thing about design is how it
  relates to people."
• Cooper and Reimann
• Understanding the users wants, needs,
  motivations, and contexts
• Understanding business, technical, and domain
  requirements and constraints
• Translating this knowledge into plans for
  artifacts (or artifacts themselves) whose form,
  content, and behavior is useful, usable, and
  desirable, as well as economically viable and
  technically feasible

8
Evolution of the Software Development Process
Programmers
Code/Test
Ship
Programmers
Managers
Code/Test
Ship
Initiate
Quality Assurance
Managers
Programmers
Designers
Look Feel
Initiate
Code
Ship
Test
Usability Practitioners
Managers
Programmers
Quality Assurance
Designers
Bug Test User Test
Initiate
Design
Code
Ship
Usability Practitioners
9
User Experience Modeling in the Rational Unified
Process
10
Who Focuses on Users and Their Goals?

• Developers focus on technology and engineering
  methodology
• Marketing focuses on what drives press attention,
  feature lists, and on what people say they will
  buy
• Users tend to focus on low-level tasks

Result software that irritates, reduces
productivity, and fails to meet user needs
11
Results of Wrong Focus

• Focusing on technology, markets, and tasks alone
  (instead of users and their goals) results in the
  kind of software weve all grown to despise
• Software is rude
• Software makes unwarranted assumptions
• Software is obscure
• Software exhibits inappropriate behavior

12
Successful Digital Products
1) What do people desire?
3) What can we build?
Desirable, viable, buildable product
2) What will sustain a business?
Do the steps in sequence
13
Analogy to Architecture

• Planning of complex digital products that
  interact with humans requires a significant
  up-front effort by professional designers
• Planning of complex physical structures that
  interact with humans requires a significant
  up-front effort by professional architects
• The planning involves understanding how the
  humans using the product (or structure) live and
  work, and designing product behavior (spaces) and
  form that supports and facilitates human behavior
• Not a matter of aesthetic choice, rather it is
  based on an understanding of users and cognitive
  principles
• Rules of form and aesthetics must work in harmony
  with the larger concern of achieving user goals
  via appropriately designed behaviors

14
Recognizing User Goals

• Products designed and built to achieve business
  goals alone will fail
• Personal goals of users need to be addressed
• (Most software fails at achieving business goals
  and personal goals, due to a focus on
  implementation issues)
• Goals are not tasks
• Focusing on goals allows you to leverage
  technology to eliminate irrelevant tasks
• Task analysis is useful, but only after user
  goals have been analyzed

Good design makes users more effective
15
User Research

• User research is necessary to create good
  products
• Quantitative market research and market
  segmentation is useful for selling products but
  not for defining products
• How to translate research results into design
  solutions?
• Involve designers in the research process
• Designers need to understand users
• Designers bring user empathy
• Provide methods to capture user behaviors in a
  manner that appropriately directs the definition
  of a product
• Models, requirements, and frameworks

16
Process Overview
Goal-Directed Design Phases
Requirements definition of user, business,
technical needs
Framework definition of design structure flow
Refinement of behavior, form, content
Modeling users and use contexts
Research users and the domain
Combines techniques of ethnography, stakeholder
interviews, market research, product/literature
reviews, detailed user models, scenario-based
design, and a core set of interaction principles
and patterns
17
Research Methods

• Ethnographic field study techniques (observation
  and contextual interviews) to provide qualitative
  data about potential and/or actual users of the
  product
• Competitive product audits
• Market research review
• Technology white paper review
• One-on-one interview
• stakeholders
• developers
• subject matter experts (SMEs)
• technology experts

18
Research Results

• Field observation and interviews provide usage
  patterns identifiable behaviors that help
  categorize modes of use of a potential or
  existing product
• The patterns suggest goals and motivations
• Patterns and goals drive the creation of personas
  in Modeling phase
• Market research helps select and filter for valid
  personas that fit corporate business models
• Stakeholder interviews, literature reviews, and
  product audits deepen the designers
  understanding of the domain and elucidate
  business goals and technical constraints that the
  design must support

19
Modeling

• Usage patterns and workflow patterns are
  synthesized into domain models and user models
• Domain models information flow diagrams and
  workflow diagrams
• User models personas
• Personas
• Distinct groupings of behavior patterns, goals,
  and motivations observed and identified during
  the Research phase
• Main characters in design scenarios during
  Framework Definition phase
• Enforce coherence and appropriateness in
  Refinement phase
• Communication tool to understand design rationale
  and prioritize features

20
Persona Types

• Primary personas needs are sufficiently unique
  to require a distinct interface form and behavior
• Secondary a primary interface serves the needs
  of the persona with a minor modification or
  addition
• Supplemental the personas needs are fully
  satisfied by a primary interface
• Served the persona is not an actual user of the
  product, but is indirectly affected by it and its
  use
• Negative the persona is created as an explicit,
  rhetorical example of whom not to design for

21
Requirements Definition

• Provides the much-needed connection between
  domain and user models and the framework of the
  design
• Employs scenario-based design methods focusing on
  meeting the goals and needs of specific user
  personas
• Personas are the main characters of the scenarios
  and provide an understanding of which tasks are
  truly important and why
• Process
• Analyze persona data and functional needs
  (expressed as objects, actions, and contexts)
• Prioritized and informed by persona goals,
  behaviors, and interactions with other personas
  in various contexts
• Iteratively refine and detail the scenarios,
  successively considering business goals and
  technical constraints balanced with persona goals
  and needs

22
Framework Definition

• Synthesize an interaction framework using
• Context scenarios
• Interaction design principles
• Interaction design patterns
• Interaction design principles provide guidance in
  determining appropriate system behavior in a
  variety of contexts
• Interaction design patterns provide general,
  proven solutions to classes of previously
  analyzed problems
• Data and functional needs are translated into
  design elements according to interaction
  principles
• Design elements are organized using patterns and
  principles into design sketches and behavior
  descriptions
• Result logical structure and gross formal
  structure
• Flesh out the framework with details in
  Refinement phase iterations

23
Refinement

• Iterate through more narrowly-focused scenarios
  to add detail to the framework definition
• Balance top-down (pattern-oriented) design and
  bottom-up (principle-oriented) design
• Focus on task coherence
• Use key path (walkthrough) and validation
  scenarios
• Storyboarding paths through the interface in high
  detail
• Result the detailed documentation of the design
• Form and behavior specification
• In paper and/or interactive media

24
Goal-Directed Design Process Summary
Research and Modeling
Requirements, Framework, and Refinement
Opportunities, Constraints, and Context
Form, Content, and Behavior
Scope
Audit
Interviews
Observations
Personas
Requirements
Scenarios
Elements
Framework
Spec.
Goals
Lead to
Drive
Design Group Practices
Designer Talent and Skills
Design Principles
Design Patterns
See Figure 1-6 (p. 18) for details
25
Goals, not features, are the key to product
success
Interaction design is not guesswork
AXIOM
26
Implementation Models and Mental Models

• Computer literacy is nothing more than a
  euphemism for making the user stretch to
  understand an alien logic rather than having
  software-enabled products stretch to meet the
  users way of thinking

27
Implementation Models and User Mental Models

• Implementation models describe the details of the
  way a program is implemented in code
• User mental models provide a cognitive shorthand
  for explaining how the system works
• Powerful enough to cover their interactions, but
  may not reflect actual inner mechanisms
• People dont need to know all the details of how
  a complex artifact actually works in order to be
  able to use it
• Examples movie projector, electrical appliance,
  cell phone
• Digital products distinct difference between
  implementation model and mental model
• Software products stark difference between
  implementation model and mental model
• Nearly impossible to see and understand the
  connections
• Examples editing sound or creating visual
  special effects

28
Represented Models

• A represented model is the way the designer
  chooses to represent a programs functioning to
  the user
• The behavioral face the user sees
• A programs represented model can (and often
  should be) quite different from the actual
  processing structure of the program
• The closer the represented model comes to the
  users mental model, the easier he will find the
  program to use and understand
• Offering a represented model that follows the
  implementation model too closely significantly
  reduces the users ability to learn and use the
  program
• (assuming, as is almost always the case, that the
  users mental model differs from the
  implementation model)

29
Three Models
User interfaces that conform to implementation
models are often bad
Worse
Better
Implementation Model reflects technology
Mental Model (Conceptual Model) reflects users
vision
Represented Model is the way the program
represents its functioning to the user
30
Represented Models Provide Opportunity

• We tend to form mental models that are simpler
  than reality
• Creating representation models that are simpler
  than the actual implementation model help the
  user achieve a better understanding
• Examples brakes in a car, scrolling spreadsheet
  or document, Adobe Photoshops Variations feature
• A users mental model need not be true or
  accurate
• It needs to enable him to work effectively

User interfaces should avoid implementation
models in favor of user mental models
AXIOM
AXIOM
Goal-directed interactions reflect user mental
models
31
Most Software Conforms to Implementation Models

• It is much easier to design software that
  reflects its implementation model a button for
  every function, a field for every data input, a
  page for every transaction step, and a dialog for
  every code module
• Example a typical software-based fax product
• Example Windows file explorer behaves
  differently when moving (copying?) files
  between drives than on the same drive
• Mathematical thinking leads to implementation
  model interfaces
• Users dont understand recursion, hierarchical
  data, or multithreading
• Users dont understand Boolean logic
• Find all my employees in Arizona and Texas
• Find employees such that employee.residence
  Arizona OR employee.residence Texas

DESIGN TIP
32
Mechanical-Age vs. Information-Age Represented
Models

• It is natural to use the imagery and language of
  an earlier era to explain modern artifacts
• Railroad engine iron horse Automobile
  horseless carriage
• Sometimes, the usage is valid because the
  function is identical
• Tab stops on typewriters and word processors
• Sometimes the usage is inappropriate
• New technology demands new representations
• But we have a hard time seeing appropriate
  information-age representations at first
• Sometimes, tasks, processes, concepts, goals, and
  benefits arise solely because new technology
  makes them possible
• Telephone to broadcast music and news?
• Worldwide web advantage is the creation of
  virtual communities

33
Mechanical-Age Representations Degrade User
Interaction

• Mechanical procedures are easier by hand than
  they are with computers
• Example addressing an envelope
• Example searching pages of a digital address
  book by first name
• ? Enhance the representation to take advantage of
  information-age strengths
• Dont replicate mechanical-age artifacts in
  interfaces without information-age enhancements
• Example why does a computer-based calendar
  display days in discrete one-month chunks and in
  a grid of a fixed size?
• People dont find it difficult to adapt to newer,
  more useful representations of familiar systems
• Significant change must be significantly better

AXIOM
AXIOM
34
Beginners, Experts, and Intermediates

• Challenge how to address the needs of the
  beginner and the expert with a single interface
• Solution design for the Perpetual Intermediate
• Beginners quickly become intermediates (or they
  quit)
• Experts tend toward intermediates because of the
  difficulty of maintaining expertise

Number of people with skill level
Skill level
Beginner
Intermediate
Expert
35
Perpetual Intermediates

• Programmers are experts in the program
• They design for experts
• Marketing, sales, and management interact most
  often with beginners
• Programmers graft on wizards and Clippy to
  satisfy them
• Most users are intermediates
• A well-balanced user interface focuses on
  satisfying the perpetual intermediate
• Without offending beginners or experts
• Nobody wants to remain a beginner
• If a user finds himself not satisfactorily
  progressing beyond the beginner stage after only
  a few hours, he will abandon the program
  altogether and find another to take its place

AXIOM
36
Three Goals

• Rapidly and painlessly get beginners into
  intermediacy
• Avoid putting obstacles in the way of
  intermediates becoming experts
• Keep perpetual intermediates happy
• The most important goal

Optimize for intermediates
AXIOM
37
What Beginners Need

• Imagine users as very intelligent but very busy
• Especially beginners
• They need some instruction, but not very much
• The process must be rapid and targeted
• Getting beginners on board
• Give them a representation model that allows them
  to understand cause and effect consistent with
  their mental model
• Provide a separate guide (guided tour) that
  states the basic goals and tools and names the
  main features
• But let it be permanently dismissed once its
  utility is worn out
• Menus are a powerful way to learn commands (and
  shortcuts)
• On-line help is for reference, not for beginner
  assistance

AXIOM
38
What Experts Need

• Experts demand faster access to their regular
  working set of tools (which may be quite large)
• Shortcuts for everything
• Frequency of use justifies and requires
  memorization
• Experts constantly, aggressively seek to learn
  more and to see more connections between their
  actions and their programs
• Comprehensive on-line help
• User groups
• Experts appreciate new, powerful features
• They can accommodate the complexity

39
What Perpetual Intermediates Need

• Perpetual intermediates need access to tools
• ToolTips are the perfect perpetual intermediate
  idiom
• Briefly state function
• Consume least amount of video space
• Motivated to dig deeper and learn
• On-line help with a comprehensive index
• Will discover the tools they use regularly
• Demand that their working set is placed
  front-and-center in the user interface

40
My PowerPoint Tool Set
41
My Word Tool Set
With full menus!
42
Yes, you must provide features for expert
users. Yes, you must provide support for
beginners. But you must apply the bulk of your
talents, time, and resources to designing the
best interaction possible for your most
representative users the perpetual intermediates.
43
Homework

• Read About Face
• Chapter 4 Understanding Users Qualitative
  Research
• Chapter 5 Modeling Users Personas and Goals