The User Experience Equation: Stepping Beyond Information to Interaction

The User Experience Equation: Beyond Information to InteractionThe User Experience Equation: Beyond Information to Interaction2006 Copyright by Donn R. DeBoard2006 Copyright by Donn R. DeBoard 11
The User Experience Equation:The User Experience Equation:
Stepping Beyond InformationStepping Beyond Information
to Interactionto Interaction
Philadelphia Metro Chapter- STCPhiladelphia Metro Chapter- STC
4th Annual Conference4th Annual Conference
March 11, 2006March 11, 2006
Penn State/Great ValleyPenn State/Great Valley
Donn R. DeBoardDonn R. DeBoard

About the PresenterAbout the Presenter
 20 years in information development in a20 years in information development in a
variety of media (paper, online help, CBT)variety of media (paper, online help, CBT)
 M.S., Technical and ScienceM.S., Technical and Science
Communications,Communications,
Drexel University/Philadelphia, PADrexel University/Philadelphia, PA
 M. Ed., Instructional Systems,M. Ed., Instructional Systems,
Penn State University/Great Valley, PAPenn State University/Great Valley, PA
 Senior Information Developer,Senior Information Developer,
Vertex, Inc./Berwyn, PAVertex, Inc./Berwyn, PA
 PMC member since 1986PMC member since 1986

A little about my familyA little about my family
 Here’s my family:Here’s my family:
 SueSue
 Sarah, age 11Sarah, age 11
 FrannyFranny

What About You?What About You?
 Share a little aboutShare a little about
yourself.yourself.
 Share your reasonsShare your reasons
for coming to thisfor coming to this
conference? Anyconference? Any
first-timefirst-time
attendees?attendees?
 Share yourShare your
expectations forexpectations for
this session.this session.

AgendaAgenda
 User experienceUser experience
(UX) equation(UX) equation
 What is UX?What is UX?
 What is interactionWhat is interaction
design?design?
 Defining an interactiveDefining an interactive
design roledesign role
 Stepping intoStepping into
interaction designinteraction design
 Interaction designInteraction design
exerciseexercise
 Questions?Questions?

Sudoku, anyone?Sudoku, anyone?
 Sudokus are puzzles.Sudokus are puzzles.
 A grid with nine blocks. Each block hasA grid with nine blocks. Each block has
nine cells.nine cells.
 Put the numbers 1-9 in each horizontalPut the numbers 1-9 in each horizontal
row and vertical column so that theyrow and vertical column so that they
appear once in each row, column, orappear once in each row, column, or
3X3 block.3X3 block.
 Sudokus illustrate user experience.Sudokus illustrate user experience.

Technical CommunicatorTechnical Communicator
as User Advocateas User Advocate
 Who has done web site development orWho has done web site development or
online help?online help?
 Currently, communicators understand theirCurrently, communicators understand their
audience and information needs.audience and information needs.
 Deepen understanding to include the entireDeepen understanding to include the entire
user experience, not just user identity anduser experience, not just user identity and
information needs.information needs.
 Where does information design fit in?Where does information design fit in?
 How can you step beyond information toHow can you step beyond information to
interaction?interaction?

User Experience EquationUser Experience Equation
 Progression from goal setting to taskProgression from goal setting to task
results.results.
 User goals setting + User intention +User goals setting + User intention +
User interaction with system orUser interaction with system or
something + User performing processsomething + User performing process
+ Feedback from system.+ Feedback from system.
 Task resolution - success or failure?Task resolution - success or failure?

What Is User Experience?What Is User Experience?
 User experience is the progressive steps inUser experience is the progressive steps in
a person’s journey to find information for aa person’s journey to find information for a
specific task.specific task.
 Think of steps that lead to wisdom asThink of steps that lead to wisdom as
sudokus of user experience.sudokus of user experience.
 Information (defined by its presentation andInformation (defined by its presentation and
organization to user) builds knowledge.organization to user) builds knowledge.
 Applied knowledge yields experience.Applied knowledge yields experience.
 Experience yields wisdom. (N. Shredroff)Experience yields wisdom. (N. Shredroff)

ExamplesExamples
 Information: Multiplication tables showInformation: Multiplication tables show
visual relationship.visual relationship.
 2 x 2= 42 x 2= 4
 2 x 2 x 2 = 82 x 2 x 2 = 8
 Applied knowledge = See connectionApplied knowledge = See connection
between results in each row.between results in each row.
 Wisdom = 2 (cubed)= 8Wisdom = 2 (cubed)= 8

Experience to WisdomExperience to Wisdom
(N. Shredroff)(N. Shredroff)

Elements of UserElements of User
Experience (UX)Experience (UX)
 Two views of WebTwo views of Web
interface:interface:
 Software interfaceSoftware interface
 Hypertext systemHypertext system
 Application vs.Application vs.
information designinformation design
 Info design is on sameInfo design is on same
plane as interface andplane as interface and
navigation design (J.J.navigation design (J.J.
Garrett)Garrett)

Elements of UserElements of User
Experience (J.J. Garrett)Experience (J.J. Garrett)

Elements:Elements:
Tasks vs. InformationTasks vs. Information
 Web as interface progresses from abstractWeb as interface progresses from abstract
(user needs) to concrete (visual design).(user needs) to concrete (visual design).
 Web as hypertext information progressesWeb as hypertext information progresses
from conception (user needs) to completionfrom conception (user needs) to completion
(visual design).(visual design).
 Interface is iterative, bottom to top and topInterface is iterative, bottom to top and top
to bottom.to bottom.
 Hypertext is time-based for a given task.Hypertext is time-based for a given task.

Introducing Web 2.0Introducing Web 2.0
 ““Web 2.0 is a stream ofWeb 2.0 is a stream of
events, people, andevents, people, and
connections. (Bartconnections. (Bart
Decrem)”Decrem)”
 Current browsers areCurrent browsers are
OK for a structuredOK for a structured
Web.Web.
 Interaction with WebInteraction with Web
2.0 impacts2.0 impacts
information.information.

Web 2.0 CompaniesWeb 2.0 Companies
 Services, not packaged software, withServices, not packaged software, with
cost-effective scalabilitycost-effective scalability
 Control over unique hard-to-createControl over unique hard-to-create
data sources that get richer as moredata sources that get richer as more
people use thempeople use them
 Trusting users as co-developersTrusting users as co-developers
 Harnessing collective intelligenceHarnessing collective intelligence
(O’Reilly)(O’Reilly)

UX Continuum of Web 2.0UX Continuum of Web 2.0
No websites.
XML feeds (D.
Saffer)
Internet
applications,
tools
Websites,
marketing
sites, blogs
Data from
many sources.
Parts for
Internet tools
User-supplied
content
Social (Yahoo
groups)
Creator-
supplied
content
Content-rich
UnstructuredSemi-
structured
Structured

What isWhat is
Interaction Design?Interaction Design?
 Term covers from field of Human-ComputerTerm covers from field of Human-Computer
InteractionInteraction
 “…“…Any communication between user andAny communication between user and
computer, be it direct or indirect. Directcomputer, be it direct or indirect. Direct
interaction involves a dialog with feedbackinteraction involves a dialog with feedback
and control throughout the performance ofand control throughout the performance of
task…The user is interacting with atask…The user is interacting with a
computer to accomplish something (Dixcomputer to accomplish something (Dix
quoted from Marion).”quoted from Marion).”

Principles ofPrinciples of
Instructive InteractionInstructive Interaction
 Explorability – invites experimentationExplorability – invites experimentation
and discovery.and discovery.
 Predictability – makes meaning andPredictability – makes meaning and
behavior obvious to user. Encouragebehavior obvious to user. Encourage
single trial learning.single trial learning.
 Guidance – integral and inseparableGuidance – integral and inseparable
part of user interface. (Intrinsic help)part of user interface. (Intrinsic help)
(Constantine & Lockwood)(Constantine & Lockwood)

Sample InstructiveSample Instructive
Interaction Techniques –Interaction Techniques –
Part 1Part 1
 Starters – messages that indicate first stepsStarters – messages that indicate first steps
or suggest initial actionsor suggest initial actions
 Balloon tips or help – pop-up messagesBalloon tips or help – pop-up messages
that appear on first encounter when userthat appear on first encounter when user
reaches certain point in processreaches certain point in process
 Workflow highlighting – a visual guideWorkflow highlighting – a visual guide
through steps in process (Constantine &through steps in process (Constantine &
Lockwood)Lockwood)

Sample InstructiveSample Instructive
Interaction Techniques –Interaction Techniques –
Part 2Part 2
 Anticipatory action – automatic actionsAnticipatory action – automatic actions
supplied by interface anticipating usersupplied by interface anticipating user
actionsactions
 Instructive animation – graphical animationInstructive animation – graphical animation
that informs users about what is happeningthat informs users about what is happening
or how to use or interpret somethingor how to use or interpret something
 Input prototypes – representations ofInput prototypes – representations of
acceptable input (Date= 03/11/06)acceptable input (Date= 03/11/06)
(Constantine & Lockwood)(Constantine & Lockwood)

Anticipatory LearningAnticipatory Learning
 ““A-ha - I knew it!”A-ha - I knew it!”
 Encourages shortenedEncourages shortened
trial and errortrial and error
 NoveltyNovelty
 AnticipationAnticipation
 ActionAction
 ConfirmationConfirmation
(Constantine &(Constantine &
Lockwood)Lockwood)

Major Components ofMajor Components of
InteractivityInteractivity
 FeedbackFeedback
 ControlControl
 CreativityCreativity
 ProductivityProductivity
 CommunicationsCommunications
 Allow adaptiveAllow adaptive
experiences (N.experiences (N.
Shredroff)Shredroff)

Seven Stages ofSeven Stages of
Completing a TaskCompleting a Task
1.1. Forming a goalForming a goal
2.2. Forming theForming the
intentionintention
3.3. Specifying anSpecifying an
actionaction
4.4. Executing theExecuting the
actionaction
1.1. Perceiving thePerceiving the
state of the worldstate of the world
2.2. Interpreting theInterpreting the
state of the worldstate of the world
3.3. Evaluating theEvaluating the
outcome (D.outcome (D.
Norman)Norman)

ExampleExample
 Need groceriesNeed groceries
 Keep need to buyKeep need to buy
groceriesgroceries
in mindin mind
 Make a listMake a list
 Drive to storeDrive to store
 Reviewing listReviewing list
against storeagainst store
inventoryinventory
 Finding itemsFinding items
 Putting items inPutting items in
basketbasket
 Checking out andChecking out and
paying for itemspaying for items

Design Questions for SevenDesign Questions for Seven
Stages of Completing a TaskStages of Completing a Task
1.1. How easily can oneHow easily can one
determine thedetermine the
function of thefunction of the
device?device?
tell what actions aretell what actions are
possible?possible?
map from intention tomap from intention to
physical movement?physical movement?
perform the action?perform the action?
tell if the system is intell if the system is in
the desired state?the desired state?
determine mappingdetermine mapping
from system state tofrom system state to
interpretation?interpretation?
tell what state thetell what state the
system is in?system is in?
(D. Norman)(D. Norman)

Interaction design vs.Interaction design vs.
programmingprogramming
 Different ways toDifferent ways to
build interaction –build interaction –
application vs.application vs.
informationinformation
 Interaction DesignInteraction Design
– Alan Cooper– Alan Cooper
 ExtremeExtreme
programming –programming –
Kent BeckKent Beck

Interaction DesignInteraction Design
 Focused on user’s goalsFocused on user’s goals
 Defining the forms of products as theyDefining the forms of products as they
relate to their userelate to their use
 Anticipates how use of products willAnticipates how use of products will
impact human relationshipimpact human relationship
 Explore dialogue between people,Explore dialogue between people,
products, and contexts (physical,products, and contexts (physical,
cultural, and historical)cultural, and historical)

Alan CooperAlan Cooper
 Personas:Personas:
thumbnail of athumbnail of a
specific member ofspecific member of
audienceaudience
 Goals: what theyGoals: what they
are doingare doing
 Scenarios: whenScenarios: when
they are doingthey are doing

Extreme ProgrammingExtreme Programming
 Software development practicesSoftware development practices
developed by Kent Beck.developed by Kent Beck.
 XP developers work continuously withXP developers work continuously with
customers and anticipate changes tocustomers and anticipate changes to
softwaresoftware
 XP developers test when coding goal isXP developers test when coding goal is
achieved.achieved.

XP - Kent BeckXP - Kent Beck
 Planning withPlanning with
customerscustomers
 Functional and unitFunctional and unit
testingtesting
 Collective codeCollective code
ownershipownership
 Coding standardsCoding standards
 Continuous integrationContinuous integration
of changesof changes
 Customer on siteCustomer on site
 40 hour week40 hour week
 Pair programmingPair programming

Defining an InteractionDefining an Interaction
Designer RoleDesigner Role
 Create dynamicCreate dynamic
patterns of interactivitypatterns of interactivity
using technology.using technology.
 Functional, ethical,Functional, ethical,
aesthetic qualities ofaesthetic qualities of
product.product.
 Interaction canInteraction can
increase and nurtureincrease and nurture
design knowledge.design knowledge.
(D. Schon)(D. Schon)

Skill Sets ofSkill Sets of
Interaction DesignerInteraction Designer
 Design conceptsDesign concepts
and methodsand methods
 Design skills - toolsDesign skills - tools
 Interpersonal andInterpersonal and
communicationcommunication
skillsskills
 Technical skillsTechnical skills
 Business skillsBusiness skills

An Interaction DesignerAn Interaction Designer
Needs to…Needs to…
 Learn new subject areas quickly.Learn new subject areas quickly.
 Solve problems both analytically and creatively.Solve problems both analytically and creatively.
 Be able to visualize and simplify complex problems.Be able to visualize and simplify complex problems.
 Empathize with users, their needs, and aspirations.Empathize with users, their needs, and aspirations.
 Understands strengths and limits of humans andUnderstands strengths and limits of humans and
technology.technology.
 Share passion for making world a better placeShare passion for making world a better place
through pragmatic and elegant design solutions.through pragmatic and elegant design solutions.
(R.Reimann)(R.Reimann)

Education inEducation in
 Carnegie MellonCarnegie Mellon
 Interaction DesignInteraction Design
Institute IveaInstitute Ivea
 North Carolina StateNorth Carolina State
UniversityUniversity
 University of Art &University of Art &
Design HelsinkiDesign Helsinki
 VirginiaVirginia
CommonwealthCommonwealth
University (R.Reimann)University (R.Reimann)

Key Considerations If YouKey Considerations If You
want to be an ID…want to be an ID…
 Interaction designers seldom code.Interaction designers seldom code.
 Interaction designers do not do usabilityInteraction designers do not do usability
research.research.
 Temperament is important. Interested inTemperament is important. Interested in
everything and willing to learn.everything and willing to learn.
 Interaction designers should be able toInteraction designers should be able to
draw, write, and communicate well.draw, write, and communicate well.
 Great interaction designers show balance ofGreat interaction designers show balance of
creative insight and analytical thinking.creative insight and analytical thinking.
(R.Reimann)(R.Reimann)

Stepping intoStepping into
interaction design (Part 1)interaction design (Part 1)
 Technical communicator are a naturalTechnical communicator are a natural
to move into interaction design.to move into interaction design.
 Be a champion for the user (usingBe a champion for the user (using
product).product).
 Get involved in the design process asGet involved in the design process as
early and often as possible.early and often as possible.
 Get involved with the requirementsGet involved with the requirements
meetings.meetings.

Stepping intoStepping into
interaction design (Part 2)interaction design (Part 2)
 Create relationships with productCreate relationships with product
developers and marketingdevelopers and marketing
stakeholders.stakeholders.
 Document bad interactions.Document bad interactions.
 Create user personas. (Steve Calde)Create user personas. (Steve Calde)

SketchingSketching
 ThinkThink
 CommunicateCommunicate
 PersuadePersuade
 Sketching helpsSketching helps
shape digitalshape digital
material that ismaterial that is
equally spatial andequally spatial and
temporal. (Jonastemporal. (Jonas
Lowgren)Lowgren)

Techniques for SketchingTechniques for Sketching
 Pencil-and-paperPencil-and-paper
sketchingsketching
 StoryboardsStoryboards
 Video prototypesVideo prototypes
 Pitch moviesPitch movies
 Animated useAnimated use
sketchessketches
 InteractiveInteractive
prototypesprototypes

Interaction designInteraction design
processprocess
 Requirements-Requirements-
What is there vs.What is there vs.
What is wanted?What is wanted?
 AnalysisAnalysis
 DesignDesign
 Iteration andIteration and
prototypingprototyping
 Implementation andImplementation and
deploymentdeployment

ID Exercise –ID Exercise –
IntroductionIntroduction
 Screens on next slide:Screens on next slide:
 Identify and solveIdentify and solve
design problems.design problems.
 Describe your designDescribe your design
and say why its good.and say why its good.
 Understand the peopleUnderstand the people
for whom you arefor whom you are
designing.designing.
 Excel at bothExcel at both
conceptual andconceptual and
detailed design.detailed design.

ID Exercise –ID Exercise –
Improve User’s Experience byImprove User’s Experience by
Upgrading interaction/interfaceUpgrading interaction/interface

ID Exercise – Some ideasID Exercise – Some ideas
 What are design problems?What are design problems?
 Audience – general Word user.Audience – general Word user.
 You have minimum 1 mouse click and aYou have minimum 1 mouse click and a
maximum of 4 mouse clicks.maximum of 4 mouse clicks.
 Move Table Autoformat display into firstMove Table Autoformat display into first
screen.screen.
 Give “Remember dimensions for a newGive “Remember dimensions for a new
table?” checkbox more prominent location.table?” checkbox more prominent location.
 FYI: Office 12 offers table styles you viewFYI: Office 12 offers table styles you view
and select. No more dialog boxes.and select. No more dialog boxes.

Two GenerationsTwo Generations
at a Crossroadsat a Crossroads
 BoomersBoomers
 1946-19641946-1964
 FormalFormal
 StructuredStructured
 HierarchicalHierarchical
 Interface andInterface and
information are notinformation are not
the samethe same
 GamersGamers
 1980-20011980-2001
 InformalInformal
 UnstructuredUnstructured
 Non-hierarchicalNon-hierarchical
 Information is inInformation is in
the interfacethe interface
(K. M. Kapp)(K. M. Kapp)

SummarySummary
 The User Experience EquationThe User Experience Equation
 User experienceUser experience
 What is interaction design?What is interaction design?
 Defining an interaction designer roleDefining an interaction designer role
 Stepping into interaction designStepping into interaction design
 Interaction design exampleInteraction design example
 Sudoku example - revisitedSudoku example - revisited

Questions andQuestions and
Comments?Comments?
 I hope you haveI hope you have
found this sessionfound this session
useful.useful.
 Thanks for yourThanks for your
participation in theparticipation in the
session.session.
 Questions orQuestions or
Comments?Comments?

If You WantIf You Want
to Contact Meto Contact Me
 You are welcome toYou are welcome to
contact me withcontact me with
questions andquestions and
comments.comments.
 donn.deboard@donn.deboard@
vertexinc.comvertexinc.com

If You Want MoreIf You Want More
InformationInformation
 Calde, Steve. “Technical Writers andCalde, Steve. “Technical Writers and
interaction design,” Cooper Interactioninteraction design,” Cooper Interaction
Design Newsletter, January, 2004Design Newsletter, January, 2004
http://www.cooper.com/content/insights/newslethttp://www.cooper.com/content/insights/newslet
TechnicalTechnical _writers_ and_ interaction_writers_ and_ interaction
_design.htm_design.htm
 Constantine, Larry L. and Lucy A.D.Constantine, Larry L. and Lucy A.D.
Lockwood. “Instructive Interaction: MakingLockwood. “Instructive Interaction: Making
Innovcative Interfaces Self Teaching,” 2002,Innovcative Interfaces Self Teaching,” 2002,
http://http://www.forUse.com.www.forUse.com.

 Decem, Bart. Wired News, Killer Buzz FlocksDecem, Bart. Wired News, Killer Buzz Flocks
to new Browser, September 14, 2005,to new Browser, September 14, 2005,
http://www.wired.com/news/technology/http://www.wired.com/news/technology/
0,1282,68823,00.html0,1282,68823,00.html
 Frishberg, Leo. “Designing User ExperiencesFrishberg, Leo. “Designing User Experiences
for Applications Versus Informationfor Applications Versus Information
Resources on the Web,” January 9, 2006,Resources on the Web,” January 9, 2006,
UX Matters.UX Matters. http://uxmattershttp://uxmatters
/MT/archives/000063.php/MT/archives/000063.php
 Garrett, Jesse James. “Elements of UseGarrett, Jesse James. “Elements of Use
Experience,”Experience,” http://www.jjg.net/iahttp://www.jjg.net/ia

 Kapp, Marl M. “Games and Simulations forKapp, Marl M. “Games and Simulations for
E-Learning,” (ASTD Presentation, February,E-Learning,” (ASTD Presentation, February,
2006),2006), http:/www.karlkapp.comhttp:/www.karlkapp.com
 Lowgren, Jonas. “Sketching InteractionLowgren, Jonas. “Sketching Interaction
Design,” January, 2006.Design,” January, 2006.
http://webzone.k3.mah.se/k3jolo/http://webzone.k3.mah.se/k3jolo/
 Marion, Craig. “What Is Interaction DesignMarion, Craig. “What Is Interaction Design
and What Does it Mean to Informationand What Does it Mean to Information
Designers, (Part 1 of 2),Designers, (Part 1 of 2),
http://mysite.verizon.net/resnx4g7/PCD/http://mysite.verizon.net/resnx4g7/PCD/
WhatIsInteractionDesign.htmlWhatIsInteractionDesign.html

 Norman, Don. “Design of Everyday Things,”Norman, Don. “Design of Everyday Things,”
Doubleday, 1990.Doubleday, 1990.
 O’Reilly, Tim. “What is Web 2.0: Design PatternsO’Reilly, Tim. “What is Web 2.0: Design Patterns
and Business Models for the Next Generation ofand Business Models for the Next Generation of
Software,” September 30, 2005,Software,” September 30, 2005,
http://www.oreillynet.com/lpt/a/6228http://www.oreillynet.com/lpt/a/6228
 Reimann, Robert. “So You want to be anReimann, Robert. “So You want to be an
Interaction Designer,” Cooper Interaction DesignInteraction Designer,” Cooper Interaction Design
Newsletter, June 2001,Newsletter, June 2001,
http:/www.cooper.com/newsletters/2001_06/http:/www.cooper.com/newsletters/2001_06/
so_you_want_to_be_an_interaction_designer.htmso_you_want_to_be_an_interaction_designer.htm

 Saffer, Dan. “The Web 2.0 ExperienceSaffer, Dan. “The Web 2.0 Experience
Continuum,”Continuum,” www.adaptivepath.comwww.adaptivepath.com
/publications/essays/archives/000545.php/publications/essays/archives/000545.php
 Schon, Donald. February 11, 2005Schon, Donald. February 11, 2005
http://www.infed.org/thinkers/et-schon.htmhttp://www.infed.org/thinkers/et-schon.htm
 Shedroff, Nathan. “Recipe for a SuccessfulShedroff, Nathan. “Recipe for a Successful
Website,” 1994,Website,” 1994, hhttp://www.nathan.com/ttp://www.nathan.com/
thoughts/recipe/index.htmlthoughts/recipe/index.html

The User Experience Equation: Stepping Beyond Information to Interaction

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (20)

Andere mochten auch

Andere mochten auch (20)

Ähnlich wie The User Experience Equation: Stepping Beyond Information to Interaction

Ähnlich wie The User Experience Equation: Stepping Beyond Information to Interaction (20)

Mehr von STC-Philadelphia Metro Chapter

Mehr von STC-Philadelphia Metro Chapter (20)

Kürzlich hochgeladen

Kürzlich hochgeladen (20)

The User Experience Equation: Stepping Beyond Information to Interaction