Touchpoints of
User Experience
Design
Jason Sack
Lead Information Architect
June 9, 2008
Flashbelt space150

Participate
Look for the flashbelt logo during the
presentation as a prompt for discussion, and
comment from your laptop or phone on
twitter (@jasonsack #flashbelt).
If twitter is down, feel free to join the
conversation on my blog at jasonsack.com.

Introductory Concepts
Design is being transformed, both in practice
and purpose. Interactive designers are now
agents of conversation and architects of
experiences as much as we are message
crafters.
This presentation explores some core aspects,
strategies, and tools of experience design.

Children of Earth and Sun
Frank Lloyd Wright once said “Buildings, too,
are children of Earth and Sun.”
Virtual spaces are also children of Earth and
Sun. To the human brain, interacting through a
digital medium is equally as real as moving
through the spaces of a building.
Frank Lloyd Wright, Collected Writings

Tidal Forces
The technical interconnectedness of network devices
allows us to better serve the social, cultural, ecological,
and economic interconnectedness of humanity.

Three Levels of User Experience Design
1 - STRATEGY
2 - STRUCTURE
3 - INTERACTIONS

Three Levels of User
Experience Design
Level I:
Strategy

User Experience Strategy
The UX strategy acts as a compass to guide a
team through each step of the design process
with the goal of creating engaging, usable
experiences.
A UX strategy need not be complex, but should
be explicitly defined at the onset of a project.
There is no usability phase in experience design.
Usability permeates the entire process
holistically.

IM IN UR PLANTR
The idea must itself
be of usable quality.
Cameron Moll found this example
and writes about it in his excellent
new book Mobile Web Design.
Used by permission.
What about this idea?

Usability Must Start at the Beginning
A UX strategy will
help you and your
team maintain focus
on the heart of the
project.

Tools for empathy and
Tools communication at the strategic
level
 Language
 Personas
 Scenarios
 Research Models
 Observation

Strategy Tools
 Language If you can’t explain your experience
 Personas with words, what makes you think you
 Scenarios can do it with complex relationships,
 Research organizational structures,
Models
interactions, or code?
 Observation

Strategy Tools Examples: User Experience Strategy
 Language White Tower Construction Co.
 Personas All roads lead to the project. Provide easy access to
 Scenarios contextually relevant perspectives on different
projects.
 Research
Models Bartz Television Network
 Observation
Movies your way. Foster a movie-centric, channel
agnostic relationship between viewers and
programming content.

Strategy Tools Meet Your User
 Language
 Personas
 Scenarios
 Research
Models
 Observation
Persona Layout Example
Jason Sack, 2008

Strategy Tools Use Case Scenarios, Narratives
 Language
 Personas
 Scenarios
 Research
Models
 Observation
Use Case Scenario Layout Example
Jason Sack, 2007

Strategy Tools Visualizations of Relationships
 Language
 Personas
 Scenarios
 Research
Models
 Observation
Research Model Example
Jason Sack, 2007

Strategy Tools
Ethnographic Studies, Contextual Inquiry,
Traffic Patterns
 Language
 Personas
 Scenarios
 Research
Models
 Observation
From Desire Paths, flickr photo pool
Kate Pugh, 9/2/2007

UX Strategy in Practice
 Design with your users in mind
 Craft a UX strategy as a sounding board for
your team
 Revisit it often, especially when the team
reaches an impasse or difficult decision
Have you ever defined and worked from a UX
strategy in your design? How did it work?

Three Levels of User
Experience Design
Level II:
Structure

Types of Organizational Systems
The structure of the experience should reflect the
strategy. Some different types of structural models:
 Hierarchical
 Contextual
 Hybrid
 Topical
 Task Based
 User Segmented
 Total Chaos

Example: Bartz Television Network
Challenge: Television network site is pushing
internal business divisions to the online
audience, separating the user from simple
direct access to programming – the content
they care about most.
? - Channels
- Formats
- Movies
- Distribution

Example: Bartz Television Network
Channel, Format
Movie
Actions

Example: Bartz Television Network
UX Strategy:
Nurture a direct relationship between users and movies
by providing a channel-agnostic experience with the
movie at the center – a fundamental change from the
existing user experience.
! - Movies

Example: Bartz Television Network
Channel, Format
Movie
Actions

Tools to visualize the structure,
Tools organization of the experience.
 Site Maps
 User Flows
 Wireframes

Tools: Structure Visualizing Relationships and UX Priorities
 Site Map
 User Flow
 Wireframe

Tools: Structure Visualizing a Specific User Experience
 Site Map
 User Flow
 Wireframe

Tools: Structure Visualizing Flow
 Site Map
 Data Flow
 Wireframe

Tools: Structure The Page/Screen Structure
 Site Map
 User Flow
 Wireframe

Structure in Practice
Structural documents are the blueprints of the overall
experience. Some tips for designing usable structures:
 Use a structure that supports your UX strategy
 Test your structure with user flows and scenarios
 Use conventions where appropriate
 Be consistent, using design patterns and grids
 Establish clear visual and structural hierarchy
Should these documents evoke
emotion? Why or why not?

Three Levels of User
Experience Design
Level III:
Interaction

A Click is Just a Click
 Dials
 Buttons
 Links
 Gestures
 Keystrokes
 Clicks

Designing Interactions
The first and most often disregarded step
in designing usable interactions is to
eliminate them.
As Steve Krug aptly says, “don’t make me
think!” The most effective interactions are
those most seamlessly integrated into the
user’s life.
Steve Krug, Don’t Make Me Think

Example: Designing Interactions
Idea via Noisy Decent Graphics, March 2008 – bottle via Sam’s Wine Shop

Example: Designing Interactions

Example: Designing Interactions
The User Experience
strategy behind this
design is called out
explicitly on the label:
TO REMEMBER

Example: Designing Interactions
Store Locator Interaction
Geolocation based on
IP address eliminates an
interaction by immediately
displaying nearby stores in
an integrated Google Maps
window.
The efficiency of the first
interaction also creates
potential for deeper user
engagement.

Example: Login Interaction
Initial concepts used a standard link to a login page
for this login function.

Example: Login Interaction
By using a JavaScript drawer, we maintain the user’s
context so he/she can access movies more quickly. This
better reinforces the UX strategy.

Example: Favorites Interaction
Existing interaction
does not expose
Favorite Movie function
unless a user is
registered and logged in
to the site.

Example: Favorites Interaction
Redesigned interaction
reveals the function
through icons, and
prompts user to login
or register when they
interact.

Example: Product Recommendation
Original design concept led user
through a series of questions to
arrive at a recommendation.

Example: Product Recommendation
User experience
designers measured
the flow against the
persona (a busy, no
nonsense adult) and
recreated the
interaction based on
the user by replacing
the linear wizard with
dynamic sliders.

Tools: Interactions Tools for interaction design
 Wireframes with Annotations
 UI Illustrations
 Functional Specifications
 Prototypes

Tools: Interactions Detailed Wireframes with Annotations
 Wireframes w/
Annotations
 UI Illustrations
 Functional
Specifications
 Prototypes

Tools: Interactions UI Illustrations
 Wireframes w/
Annotations
 UI Illustrations
 Functional
Specifications
 Prototypes

Tools: Interactions Functional Specifications
 Wireframes w/
Annotations
 UI Illustrations
 Functional
Specifications
 Prototypes

Tools: Interactions Prototypes
 Wireframes w/
Annotations
 UI Illustrations
 Functional
Specifications
 Prototypes
Early prototype from space150’s infamous Piss on a Leprechaun Game

Interaction Design in Practice
 Eliminate unnecessary interactions
 Study cognitive psychology as a threshold for
creating usable interactions
 Use visual affordances and design patterns
to establish a consistent language
 Design for user options and control
 Use standards where possible, and create
gracefully degrading experiences if not
Add your best practices to the
discussion.

UX Topics
June 9, 2008
Flashbelt Design Myths

The Myth of the Site
Usability extends across disciplines, platforms,
perspectives, and media. Ubiquitous network
computing is dissolving barriers between people.
This is a great opportunity to explore simple ways for
people to communicate, play, and work.
 Widgets
 Feeds
 Mobile
 Wearable

The Myth of the Click
The click is not the final word when it comes to
usability. Studies have shown that users are less
concerned with the number of clicks and more
concerned with knowing that they are making
progress toward their destination.
Steve Krug, Don’t Make Me Think

The Myth of the Form
Think your content is so cool that users need to
sign up? If it’s so cool, show it to them!
Pace your forms throughout the experience. Users
who engage with your content and find it useful
will be more invested and more likely to sign up.
Luke Wroblewski, “Sign Up Forms Must Die.”
A List Apart. 3/25/2008.
DIE

The Myth of the Fold
Many of our bad interactive design habits are
holdovers from the print/broadcast world.
A recent study “found that 76% of users scrolled and
that a good portion of them scrolled all the way to
the bottom, despite the height of the screen. Even
the longest of web pages were scrolled to the bottom
… scrolling behavior is independent of screen
height.”
Milissa Tarquini, “Blasting the Myth of the Fold.”
Share some myths in Boxes and Arrows. 7/24/2007.
need of debunking.

In Closing
 Define a UX strategy as you begin your project.
 Use the right visual tools to communicate your
strategy and design.
 Architect, design, and build usable
experiences. Spread happiness through good
experience design.
 Serve the god of…

Understanding
Many people … are serving other Gods:
the God of Beauty, the God of Style, the God of Swiss
Graphics, the Poster God, the God of Money, Success,
Fame, Fortune, and yet there is only one God that I serve
and that is the God of Understanding. If you serve that
God, all the others will be taken care of.
Richard Saul Wurman
January 2004 Interview, InfoDesign

Discussion
Find links, check references, and
carry on the conversation at
jasonsack.com and
June 9, 2008 drop.io/flashbelt.
Flashbelt