Web Design II Designing the Complete User Experience

1
Web Design IIDesigning the Complete User
Experience

• Adaptive Path
• www.adaptivepath.com/presentations/ue2001/
• jeff_at_adaptivepath.com, janice_at_adaptivepath.com

2
Yesterday

• Discovery
• Personas and scenarios
• User research
• Task analysis and mental models
• High-level information architecture

3
Today

• Designing the deep structures
• Competitive analysis, content inventory,
  low-level IA
• Prioritizing features
• Interaction design
• With notes on visual design
• Prototyping, process, patterns in design
• Usability testing
• Design in the organization

4
Defining Web Design

• Mastering applications
• Understanding technologies
• Techniques and methodologies for creating more
  effective design solutions

5
Defining Web Design

• Functional Design
• The design of systems that support end-users'
  tasks and goals
• User research
• Information Architecture
• Interaction Design
• Communication Design
• The design of how these systems are expressed to
  the user
• Interface design
• Visual design
• Content strategy

6
Overview
7
Designing the IA A Bottom-Up Approach
8
What Is Information Architecture?

• A structure based on the patterns
• inherent in data that allows users
• to accomplish their goals.

9
Yesterday We Talked About High-Level Structures
and Mental Models

• Figure out what users need develop a mental
  model
• Figure out what you have develop a content model
• Match them up.
• Use it to create your IA
• Make a high-level structure based on mental model
• Make the detailed structure based on the content
  model

10
Today Well Talk About Deep Structures and Content

• Figure out what users need develop a mental
  model
• Figure out what you have develop a content model
• Match them up
• Use it to create your IA
• Make a high-level structure based on mental model
• Make the detailed structure based on the content
  model

11
The Process Two Tracks
IA Interaction Diagrams and Prototypes
Content Model
Prioritize Features
Current State Research
Competitive Review
Content ModelDiagram
12
The Two Tracks, Diagrammed
Surface architecturecomes from Mental Model
Deep architecture comes from the Content Model
13
The Two Tracks, Described

• Task-based information architecture
• Based on ethnography and usability principles
• Take user tasks apart (analysis)
• Then put them back together into a Mental Model
  (synthesis)
• Tasks become major content buckets
• High-level model yields high-level architecture
• Content-based information architecture
• Based on library science and information
  retrieval principles
• Take all the content and features apart
  (analysis)
• Then put it all back together again (synthesis)
• Content groups form deep structures of the
  architecture

14
Current State Research Figure Out What You Have
15
Four Things To Look At

• Content
• Architecture
• Interaction
• Technology

16
What To Do

• Walk through the existing site
• Pay attention to details of implementation
• Dont think like a user but dont forget the
  user either

17
General Rules

• Use existing documentation
• Use the knowledge in peoples heads
• Do all four activities concurrently
• Final Goal Blueprints of the existing site

18
Content Audit

• Content audit looks at broad categories
• Sampling of pages
• Sufficient for most projects
• A more detailed content inventory looks is more
  thorough
• Make a big list of every piece and its URL
• Give each piece a unique ID
• Use this for CMS and other migration projects

19
Identify Broad Types of Content

• Typical Examples
• Executive biographies
• Press releases
• Product descriptions
• Product documentation
• Contact information
• Tutorials
• Case studies

20
Content Audit - Basic Questions

• For each piece of content on the site, ask
• What is it about?
• Who is it for?
• What type is it?
• Where does it come from?

21
Content Audit - Strategic Questions

• Is it redundant?
• Is it in line with current thinking?
• Is it outdated?
• Is it trivial?
• Does it have historical value?
• --In other words... can we get rid of it?
• Traffic analysis can help answer these questions.

22
Content Audit - Final Result

• Spreadsheet with hundreds or thousands of lines,
  one line per page

23
Architecture Review

• An overview of how content is structured
• Identify organizational schemes
• Map the site
• Outline
• Diagram
• Refine content types (content types will be very
  important in a little while)

24
Q Can you automate the architecture review?

• A Not really.

25
Typical Site-Mapping Tool Output
26
What You Actually Need To Know
27
The Desired Result
28
Interaction Review

• Walk through existing interactive functionality
• Registration process
• Shopping cart
• Newsletter signup
• Etc.
• Play out scenarios with a test account
• Document interaction
• Think like a QA tester try to generate errors

29
Documenting Interactions

• The Visual Vocabulary
• http//jjg.net/visvocab/

30
Technology Review

• Identify technologies during walk-through
• Server-side technologies such as Cold Fusion,
  JSP, PHP, etc.
• Client-side technologies such as DHTML,
  JavaScript, etc.
• Talk to the technical people
• Dont be afraid to ask dumb questions
• Ask Whats that connected to?

31
Current State Analysis Deliverables

• Content Audit Spreadsheet or database showing
  content by type and topic
• Architecture Outlines or diagrams of site
  structure
• Review
• Interaction Review Diagrams, notes, lists
• Technology Review Technical brief

32
Next, Figure Out What They Have
33
Competitive Analysis

• A thorough deconstruction of your competitors
  Web sites
• Similar to market and customer research, but with
  an emphasis on functional implementations
• Not simply limited to direct competitors

34
Identifying Competitors

• Start with known rivals
• See marketing plan, business plan, etc.
• Use online tools to broaden scope
• Whats related, Alexa, browse online
  directories
• Look for other sites with similar features, even
  if theyre in a completely different industry
• Search work, navigation, interface widgets, etc.
• Use analyst reports to identify industry trends
• Forrester, Jupiter, et al.

35
The Competitive Matrix

• List features against competitors in a
  spreadsheet (build off of your findings from the
  current state analysis)
• Use online tools to help fill in the technical
  details
• www.websitegarage.com
• www.siteowner.com

36
The Competitive Matrix

• Build spreadsheet with feature-set against
  competitors sites
• Fill in short descriptions of similarities and
  differences
• Point out radically different solutions
• Use principles of Heuristic Evaluation

37
The Competitive Matrix

• Feature set and content types
• Interface characteristics
• Navigation vocabulary
• Renderings (Tabs, Pull-down menus, etc.)
• Technology choices
• Browser targeting
• Advanced CSS or Javascript usage
• Performance Statistics
• Bandwidth usage and rendering speed for page
  types
• Meta Tag Contents

38
Make Your Research Usable
IA Interaction Diagrams and Prototypes
Content Model
Prioritize Features
Current State Research
Competitive Review
Content ModelDiagram
39
Chunk Up the Existing and Desired Content

• Review content audit and competitive matrix
• Identify patterns within the content (subject,
  doc type, etc.)
• Group similar content together
• Organize groups into hierarchies
• -- For a whole site, you want maybe 50-100
  chunks

40
Primary and Secondary Taxonomies - Wine
41
Content Map

• Same type of tool as the mental model diagram
• Lets you understand what you have and want in a
  single glance
• Arrange the chunks in a meaningful way (e.g.,
  subject type)
• We use Visio

Wine
Gift Basket
Cheese
CheeseProductDetail
Basket Product Detail
Wine Product Detail
Product Detail
OrganicCheesemaking
Varietal Profile
Specialty Baskest
CategoryInfo
Region Profile
Wine SpectatorReprints
Review
VarietalComparisonChart
Cheese Selector
Tools
42
Bringing Content Together with the Mental Model
43
Slot Content Analysis Results Where it Fits the
Mental Model

• Content goes below the line
• Review gaps (from yesterday)

44
Deep-Structure Architecture Revealed

• Surface structures come from the mental model.
  Deep structures come from the taxonomy-based
  Content Map

45
Prioritizing What do we do firstsecondnever?
46
Prioritize the Features
47
Step 1 The Big List

• Content Analysis and Content Map
• Ten people in a room for an hour or two
• Talk through scenarios
• Blue sky
• Focus on what it should be (brainstorming rules)
• General Rule People dont have any problem
  telling you what they want, as long as they dont
  have to make it or pay for it.
• Real Challenge Choosing which features to build

48
Step 2 Identify Dependencies and Baseline

• What things must happen first? What are the
  mandatory groupings?
• What is baseline? What are the Must-Haves that
  you cant launch without?

49
Step 3 Have Stakeholders Figure Out

• Feasibility easy or hard, expensive or not,
  short or long to implement
• Rate each item in the list
• 1 low feasibility
• 5 high feasibility
• Importance to business, to user
• Rate each item in the list
• 1 low importance
• 5 high importance

50
Step 4 Graph the Findings
High importance Low feasibility Watch for
new technology
High importance High feasibility Do Now
HI
Importance
Low importance High feasibility Consider
Low importance Low feasibility Dont Bother
LOW
LOW
Feasibility
HI
51
Now Lets BUILD Stuff!!
52
Quick Iteration vs. Long Process

• Operating a site day to day
• Adding features weekly/monthly launches
• Big projects significant redesigns,
  yearly/quarterly

53
Now Lets BUILD Stuff!!
54
Interaction Design
55
Information Architecture and Interaction Design

• IA is about content and the structure in which it
  is located
• How is it organized?
• Where is it located?
• Navigation and way finding systems
• Interaction Design is about functions, and the
  flows that enable the user to accomplish them
• What actions can the user do?
• Entering and retrieving data
• Exposing system capabilities

56
How Are They Different?
Information Architecture
Interaction Design
Architecture Diagram
Flow Diagram
Organizing Content
Interacting with Systems
Hierarchies and Words
Processes and Activities
Seek help from librarians
Seek help from engineers
57
Common Web-Based Interactions

• Registration
• Web-based Email
• Shopping cart
• Checkout
• Setting up personal web pages, like My Yahoo
  and My Netscape
• Online banking

58
The Interaction Designers Job

• Understand how the user thinks about the tasks at
  hand
• Show the parts of the system that enable the user
  to accomplish those tasks
• Craft the visible parts to convey the right
  messages and clues

59
Good Thinking

• Our conscious mind is constantly reducing
  visual input into patterns.The philosophy is to
  present the components on the screen as
  recognizable visual patterns so that the user
  can choose, on a purely pattern-matching,
  unconscious level, which objects to consider
  consciously. - Alan Cooper, About Face

60
Principles of Interaction Design

• Controls disappear when they use natural signals
  that can be unconsciously interpreted

Interaction Discoverable Feedback
Recoverable Context
Visual Design Proximity Alignment
Repetition Contrast
From Robin Williams, Non-Designers Design Book
61
(No Transcript)
62
Methods Flow Diagrams

• Follow all pathways to their natural end, OR
• Clearly mark where your flow connects with
  another flow
• Use good visual design principles

• Use standard symbols
• Include a Legend explaining the symbols
• Avoid crossing lines
• Include meaningful labels for all lines that need
  them
• Include error cases

• Visual Vocabulary http//www.jjg.net/ia/visvocab

63
Methods Schematics

• DO NOT include any visual design direction!
• Use call-outs to describe any functionality that
  isnt self-explanatory
• Use good visual design principles
• One schematic can serve multiple pages

• Make schematics that correlate to the flow
  diagram
• Use standard symbols to represent interaction
  devices
• Show all functions
• Use consistent names and labels across all flows
  and schematics

64
Prototyping, Process and Patterns
65
Some Problems With Design Process

• Research is effective and valuable, but never
  gets applied to end product
• Communication gaps between research, design and
  development
• Architects (or consultants) spending days
  creating deliverables nobody ever bothers to read
• Show me the numbers

66
Historically, Page Design Didnt Scale

• In the olden days, designers would design HTML
  pages and put them on a server
• But sites grew...
• And grew...
• And grew...
• Suddenly, redesigning or adding site-wide
  features was nearly impossible
• Everyone clamored for template-based design
• Put content in databases, squirt it out through
  consistent designs
• Todays dilemma We need the flexibility of
  dynamic design, but the rigidity of templates is
  often too much

67
Prototyping Tips

• Try to work in the Webs native language if
  possible
• Extremely tight iterations (daily!) serves as
  high-bandwidth team communication
• Documentation captures What weve learned, not
  What I want you to do
• Avoid the handoff the team refines a
  prototype through higher resolution versions,
  testing frequently

68
Going Dynamic

• Prototype is built according mental model and
  architecture diagrams
• Templates and content components can go through
  iterative design
• Changes can be viewed globally and instantly
  tested

69
Benefits of Dynamic Sites

• Higher initial development cost, but much lower
  maintenance
• Separates operations of site from development
• Do more with fewer resources
• Inherent interface consistency benefits user
  experience

70
The Process Before Dynamic Sites
Author
Editor
Copy Edit
Production
Design
QA
Post
71
The Process After Dynamic Sites
Operations
Development
Author
Production
Design
Editor
Copy Edit
Template System
Post
72
(No Transcript)
73
(No Transcript)
74
Patterns in Design

• Patterns are abstracted solutions to common
  problems in context
• Think of a tailors pattern for a garment.
• Applicable not only to architecture, but computer
  science, corporate organization, and (of course)
  Web design

75
(No Transcript)
76
(No Transcript)
77

• Text Input boxes should be sized based on
  expected query length
• For selecting between distinct search options,
  radio buttons are most appropriate
• HTML submit buttons are more appropriate than
  image buttons

Remember In Context
78
A hierarchy of patterns
Knobs
Doors
Walls
Rooms
Buildings
Communities
Regions
79
A hierarchy of patterns
Radio Button
Forms
Search Interface
Page Layout
Navigation System
Site Architecture
Integration
80
Patterns and Components

• Group smallest patterns together into either
  content-inspired or user task-based components
• Creates a heuristically-derived system of
  interface Legos
• Can be mixed and matched to create site designs

81
Components
Content
Item Detail
List
Input
Tabular Data
82
Standard Page Elements

• Network Nav Bar
• Personalization
• Brand header
• Logo
• Search
• Cobrand
• Structured Navigation
• Topic Path
• Page Footer

83
Page Types

• Components can be grouped together in any number
  of ways to create pages. Pages have distinct
  types, based on the tasks that can be
  accomplished on them.

84
(No Transcript)
85
Self-Describing Content
No Doubt
Makes Strong Return To Charts rdfaboutnodoubt.gif"
XML.com features a rich mix of information and
services for the XML community.
http//music.com/nodoubt.htm

86
Usability Testing
87
Usability Testing Easy Validation of Your
Designs
Validate
88
Usability Testing An Overview

• Protocol development
• Recruiting
• Facilitating
• Analysis

89
When To Test? NOW!

• Anyone can do user research
• A fast, easy and effective way to evaluate if
  your audience can use your product or site
• Start simple Friends and Family Test
• Only one prerequisite a semi-working prototype

90
Recruiting Users

• For a simple test, find 3-4 people similar to
  your sites audience
• Friends, family, coworkers from other departments
• Personas should determine your test group
• Start immediately the better the subjects, the
  better the outcome

91
Recruiting Users

• Determine target audience
• demographic/webographic/psychographic
• Seek them out
• Existing user base, customer support inquiries,
  advertise on existing site
• User groups, email discussion lists
• Traditional means classified ads, etc.
• Use a recruiter Charge per user based on how
  specialized your population needs to be

92
Developing the Screener

• A simple script to weed out subjects
• Write 20 questions that narrow in on who youre
  after
• Order questions from generic to specific
• Be very clear and specific
• Avoid jargon

93
Developing a Protocol

• What is your site about?
• What five features are most important?
• Create a list of tasks
• Two sentence mini-scenario for each feature
• For more focused tests, do a feature
  prioritization exercise
• Map feature importance with implementation
  difficulty

94
More on Tasks...

• Testable tasks should be
• Reasonable
• Specific
• Doable
• Described as end goals
• Appropriately sequenced
• Domain neutral
• Not too long, not too short

95
Running the Test (Mechanics)

• Have the room ready
• Computer set up in a generic state
• Have appropriate start pages bookmarked
• Make users comfortable
• Describe how the test works and what theyll have
  to do
• Be clear that they are testing a product, theyre
  not being tested themselves

96
Running the Test (Interview Style)

• Ask the right questions
• Describe this.
• What do you expect?
• Did that surprise you? Why?
• Dont offer help
• If a task is too difficult for the user, tell
  them to stop and ask them to describe what
  happened

97
Logistics

• Record the session with a camcorder arranged to
  capture both the screen and user
• Have a partner take notes throughout session
• Convince decision makers of the value of watching
  the tests from coders to marketing to the CEO

98
What Did You Learn?

• Did the evaluators consistently misunderstand
  anything?
• Were they ever confused? What were they doing?
• What mistakes were consistently made?
• Which tasks did they have the most trouble with?
• When did they look frustrated? What were they
  doing?
• How many of the tasks were they able to do?

99
What Did You Learn?

• Did they do the things that you had expected them
  to do?
• Did they do things in the order in which you had
  expected? If not, what order did they do them in?
• What did they find interesting? What did you
  expect them to find interesting, which they did
  not?
• Did the site meet their expectations? If not,
  where did it fail them?
• Do you know what their expectations were?
• Did they know what the site is for?

100
Usability Test Timeline
101
How It All Fits Together
102
Design Isnt Performed in a Vacuum

• Like project management, a hub in the
  multi-disciplinary process
• Many disciplines contribute to what the user
  experiences

103
Design in the Organization

• In agencies, typically grouped with Creative
  disciplines
• In-house, often a part of marketing
• In Web-centered companies, a separate department

104
Visual Design

• Big Picture thinking
• Strong visualization skills
• Task To develop a visual language
• Colors
• Typography
• Graphic style

105
Content Strategy and Writing

• Its The Content, Stupid
• Visitors interact with your site for the content,
  not the design
• Task To define a voice
• Copy guidelines
• Style manual
• Nomenclature

106
Brand Strategy and Marketing

• The user experience is a key component of an
  organizations brand
• A user experience can be informed by brand
  attributes
• Tasks
• To identify brand attributes
• To provide market segmentation

107
Data Analysis and Reporting

• Components of a users experience can be measured
  through interaction data
• Usability and data analysis often go hand-in-hand
• Task analyze usage statistics (typically server
  logs) for important trends

108
Web Development and Engineering

• Technologists clue user experience designers in
  to feasibility
• Web developers know whats possible on the front
  end
• Help you create flows/schematics
• Server engineers tackle deeper Can we do that?
  questions
• How long will a process take? How many hits to
  the database?
• Database architects will develop schemas that
  impact the information architecture

109
Project Management

• User Experience types tend to work closely with
  Project Managers
• Both have process focus
• Task to make sure the project moves forward
  smoothly

110
So Who Does All of This?
111
There Are a Million Titles in This Business

• Art Director
• Creative Director
• Design Director
• UI Designer
• Human Factors Engineer
• Usability Engineer
• Content Specialist
• Content Strategist
• Editor

• Developer
• Web Developer
• XYZ Specialist
• Creative Integrator
• DBA
• System Specialist
• Engineer
• QA Manager
• QA Specialist

• Producer
• Program Manager
• Product Manager
• Project Manager
• Site Manager
• Information Architect
• Interaction Designer
• Designer
• Visual Designer

112
One Title Can Mean Many Things

• PRODUCER as Builder
• Writes HTML, JavaScript, XML
• Manages delivery of front-end display code
• Implements pages as specified by design team

• PRODUCER as Facilitator
• Receives request from internal client
• Hires and manages external design or development
  vendor
• Reviews interim deliverables
• Coordinates approval cycle

• PRODUCER as Leader
• Plans the project
• Manages team
• Creates requirements documentation
• Takes responsibility for the project meeting
  business and user objectives

113
And Many Titles Can Mean the Same Thing

• Wanted
• Experienced professional to provide leadership
  for multiple sections of the web site. This
  person will establish a mission for each section,
  define business and user requirements, manage
  internal and external designers, developers, and
  copy writers to launch content and applications
  supporting the Companys business goals. Some
  hands-on design and development work required.
• ? Whats the title?

114
The Title Could Be

• Producer
• Program Manager
• Product Manager
• Site Manager
• Creative Director

115
A Typical Project Team

• Lead Producer or Product Manager
• Creative Information Architect Visual Designer
  or Art Director
• Research Producer, IA, or Researcher
• Implement Developers HTML/JavaScript/XML
  coders
• Production Artists

116
This Project
Internal Discovery
Producer
Task Analysis
Researcher, IA
Personas Scenarios
Prod., Team, Stakeholders
Competitive Analysis
Producer
Current State Analysis
IA
Researcher, IA, Prod. (Stakeholders)
Model Comparison
Info Architecture
IA
Interaction Design
IA, Producer
Team
Prototype
Usability Testing
Researcher, Vendor (Team)
117
www.adaptivepath.com/presentations/ue2001/
janice_at_adaptivepath.comjeff_at_adaptivepath.com