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 Information Stepping Beyond Information to Interactionto Interaction

Philadelphia Metro Chapter- STCPhiladelphia Metro Chapter- STC4th Annual Conference4th Annual Conference

March 11, 2006March 11, 2006Penn State/Great ValleyPenn State/Great Valley

Donn R. DeBoardDonn R. DeBoard


About the PresenterAbout the Presenter

20 years in information development in a 20 years in information development in a variety of media (paper, online help, CBT)variety of media (paper, online help, CBT)

M.S., Technical and Science M.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 1986 PMC 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 about Share a little about yourself.yourself.

Share your reasons Share your reasons for coming to this for coming to this conference? Any conference? Any first-time first-time attendees?attendees?

Share your Share your expectations for expectations for this session.this session.


AgendaAgenda

User experience User experience (UX) equation(UX) equation

What is UX?What is UX? What is interaction What is interaction

design?design?

Defining an interactive Defining an interactive design roledesign role

Stepping into Stepping into interaction designinteraction design

Interaction design Interaction design exerciseexercise

Questions?Questions?


Sudoku, anyone?Sudoku, anyone?

Sudokus are puzzles.Sudokus are puzzles. A grid with nine blocks. Each block has A grid with nine blocks. Each block has

nine cells. nine cells. Put the numbers 1-9 in each horizontal Put the numbers 1-9 in each horizontal

row and vertical column so that they row and vertical column so that they appear once in each row, column, or appear once in each row, column, or 3X3 block.3X3 block.

Sudokus illustrate user experience.Sudokus illustrate user experience.


Technical Communicator Technical Communicator as User Advocateas User Advocate

Who has done web site development or Who has done web site development or online help?online help?

Currently, communicators understand their Currently, communicators understand their audience and information needs. audience and information needs.

Deepen understanding to include the entire Deepen understanding to include the entire user experience, not just user identity and user 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 to How can you step beyond information to

interaction?interaction?


User Experience EquationUser Experience Equation

Progression from goal setting to task Progression from goal setting to task results.results.

User goals setting + User intention + User goals setting + User intention + User interaction with system or User interaction with system or something + User performing process something + 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 in User experience is the progressive steps in a person’s journey to find information for a a person’s journey to find information for a specific task.specific task.

Think of steps that lead to wisdom as Think of steps that lead to wisdom as sudokus of user experience.sudokus of user experience.

Information (defined by its presentation and Information (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 show Information: 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 connection Applied 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 User Elements of User Experience (UX)Experience (UX)

Two views of Web Two views of Web interface:interface: Software interfaceSoftware interface Hypertext systemHypertext system

Application vs. Application vs. information designinformation design

Info design is on same Info design is on same plane as interface and plane as interface and navigation design (J.J. navigation design (J.J. Garrett)Garrett)


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


Elements: Elements: Tasks vs. InformationTasks vs. Information

Web as interface progresses from abstract Web as interface progresses from abstract (user needs) to concrete (visual design).(user needs) to concrete (visual design).

Web as hypertext information progresses Web as hypertext information progresses from conception (user needs) to completion from conception (user needs) to completion (visual design).(visual design).

Interface is iterative, bottom to top and top Interface 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 of Web 2.0 is a stream of events, people, and events, people, and connections. (Bart connections. (Bart Decrem)”Decrem)”

Current browsers are Current browsers are OK for a structured OK for a structured Web. Web.

Interaction with Web Interaction with Web 2.0 impacts 2.0 impacts information.information.


Web 2.0 CompaniesWeb 2.0 Companies

Services, not packaged software, with Services, not packaged software, with cost-effective scalabilitycost-effective scalability

Control over unique hard-to-create Control over unique hard-to-create data sources that get richer as more data sources that get richer as more people use thempeople use them

Trusting users as co-developersTrusting users as co-developers Harnessing collective intelligence Harnessing 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 contentSocial (Yahoo groups)

Creator-supplied contentContent-rich

UnstructuredSemi-structured

Structured


What is What is Interaction Design?Interaction Design?

Term covers from field of Human-Computer Term covers from field of Human-Computer InteractionInteraction

“…“…Any communication between user and Any communication between user and computer, be it direct or indirect. Direct computer, be it direct or indirect. Direct interaction involves a dialog with feedback interaction involves a dialog with feedback and control throughout the performance of and control throughout the performance of task…The user is interacting with a task…The user is interacting with a computer to accomplish something (Dix computer to accomplish something (Dix quoted from Marion).”quoted from Marion).”


Principles of Principles of Instructive InteractionInstructive Interaction

Explorability – invites experimentation Explorability – invites experimentation and discovery.and discovery.

Predictability – makes meaning and Predictability – makes meaning and behavior obvious to user. Encourage behavior obvious to user. Encourage single trial learning.single trial learning.

Guidance – integral and inseparable Guidance – integral and inseparable part of user interface. (Intrinsic help) part of user interface. (Intrinsic help) (Constantine & Lockwood)(Constantine & Lockwood)


Sample Instructive Sample Instructive Interaction Techniques – Interaction Techniques –

Part 1Part 1 Starters – messages that indicate first steps Starters – messages that indicate first steps

or suggest initial actionsor suggest initial actions Balloon tips or help – pop-up messages Balloon tips or help – pop-up messages

that appear on first encounter when user that appear on first encounter when user reaches certain point in processreaches certain point in process

Workflow highlighting – a visual guide Workflow highlighting – a visual guide through steps in process (Constantine & through steps in process (Constantine & Lockwood)Lockwood)


Sample Instructive Sample Instructive Interaction Techniques – Interaction Techniques –

Part 2Part 2 Anticipatory action – automatic actions Anticipatory action – automatic actions

supplied by interface anticipating user supplied by interface anticipating user actionsactions

Instructive animation – graphical animation Instructive animation – graphical animation that informs users about what is happening that informs users about what is happening or how to use or interpret somethingor how to use or interpret something

Input prototypes – representations of Input 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 shortened Encourages shortened

trial and errortrial and error NoveltyNovelty AnticipationAnticipation ActionAction ConfirmationConfirmation

(Constantine & (Constantine & Lockwood)Lockwood)


Major Components of Major Components of InteractivityInteractivity

FeedbackFeedback ControlControl CreativityCreativity ProductivityProductivity CommunicationsCommunications Allow adaptive Allow adaptive

experiences (N. experiences (N. Shredroff)Shredroff)


Seven Stages of Seven Stages of Completing a TaskCompleting a Task

1.1. Forming a goalForming a goal2.2. Forming the Forming the

intentionintention3.3. Specifying an Specifying an

actionaction4.4. Executing the Executing the

actionaction

1.1. Perceiving the Perceiving the state of the worldstate of the world

2.2. Interpreting the Interpreting the state of the worldstate of the world

3.3. Evaluating the Evaluating the outcome (D. outcome (D. Norman)Norman)


ExampleExample

Need groceriesNeed groceries Keep need to buyKeep need to buy

groceriesgroceriesin mindin mind

Make a listMake a list Drive to store Drive to store

Reviewing list Reviewing list against store against store inventoryinventory

Finding itemsFinding items Putting items in Putting items in

basketbasket Checking out and Checking out and

paying for itemspaying for items


Design Questions for Seven Design Questions for Seven Stages of Completing a TaskStages of Completing a Task

1.1. How easily can one How easily can one determine the determine the function of the function of the device?device?

2.2. How easily can one How easily can one tell what actions are tell what actions are possible?possible?

3.3. How easily can one How easily can one map from intention to map from intention to physical movement?physical movement?

1.1. How easily can one How easily can one perform the action?perform the action?

2.2. How easily can one How easily can one tell if the system is in tell if the system is in the desired state?the desired state?

3.3. How easily can one How easily can one determine mapping determine mapping from system state to from system state to interpretation?interpretation?

4.4. How easily can one How easily can one tell what state the tell what state the system is in? system is in? (D. Norman)(D. Norman)


Interaction design vs. Interaction design vs. programmingprogramming

Different ways to Different ways to build interaction – build interaction – application vs. application vs. informationinformation

Interaction Design Interaction Design – Alan Cooper– Alan Cooper

Extreme Extreme programming – programming – Kent BeckKent Beck


Interaction DesignInteraction Design

Focused on user’s goalsFocused on user’s goals Defining the forms of products as they Defining the forms of products as they

relate to their userelate to their use Anticipates how use of products will Anticipates 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 a thumbnail of a specific member of specific member of audienceaudience

Goals: what they Goals: what they are doingare doing

Scenarios: when Scenarios: when they are doing they are doing


Extreme ProgrammingExtreme Programming

Software development practices Software development practices developed by Kent Beck.developed by Kent Beck.

XP developers work continuously with XP developers work continuously with customers and anticipate changes to customers and anticipate changes to softwaresoftware

XP developers test when coding goal is XP developers test when coding goal is achieved.achieved.


XP - Kent BeckXP - Kent Beck

Planning with Planning with customerscustomers

Functional and unit Functional and unit testingtesting

Collective code Collective code ownershipownership

Coding standardsCoding standards Continuous integration Continuous integration

of changesof changes Customer on siteCustomer on site 40 hour week40 hour week Pair programmingPair programming


Defining an Interaction Defining an Interaction Designer RoleDesigner Role

Create dynamic Create dynamic patterns of interactivity patterns of interactivity using technology.using technology.

Functional, ethical, Functional, ethical, aesthetic qualities of aesthetic qualities of product.product.

Interaction can Interaction can increase and nurture increase and nurture design knowledge. design knowledge. (D. Schon)(D. Schon)


Skill Sets of Skill Sets of Interaction DesignerInteraction Designer

Design concepts Design concepts and methodsand methods

Design skills - toolsDesign skills - tools Interpersonal and Interpersonal and

communication communication skillsskills

Technical skillsTechnical skills Business skillsBusiness skills


An Interaction Designer An 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 and Understands strengths and limits of humans and

technology.technology. Share passion for making world a better place Share passion for making world a better place

through pragmatic and elegant design solutions. through pragmatic and elegant design solutions. (R.Reimann)(R.Reimann)


Education in Education in Interaction DesignInteraction Design

Carnegie MellonCarnegie Mellon Interaction Design Interaction Design

Institute IveaInstitute Ivea North Carolina State North Carolina State

UniversityUniversity University of Art & University of Art &

Design HelsinkiDesign Helsinki Virginia Virginia

Commonwealth Commonwealth University (R.Reimann)University (R.Reimann)


Key Considerations If You Key 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 usability Interaction designers do not do usability

research.research. Temperament is important. Interested in Temperament is important. Interested in

everything and willing to learn.everything and willing to learn. Interaction designers should be able to Interaction designers should be able to

draw, write, and communicate well.draw, write, and communicate well. Great interaction designers show balance of Great interaction designers show balance of

creative insight and analytical thinking. creative insight and analytical thinking. (R.Reimann)(R.Reimann)


Stepping into Stepping into interaction design (Part 1)interaction design (Part 1)

Technical communicator are a natural Technical communicator are a natural to move into interaction design.to move into interaction design.

Be a champion for the user (using Be a champion for the user (using product).product).

Get involved in the design process as Get involved in the design process as early and often as possible.early and often as possible.

Get involved with the requirements Get involved with the requirements meetings.meetings.


Stepping into Stepping into interaction design (Part 2)interaction design (Part 2)

Create relationships with product Create relationships with product developers and marketing developers and marketing stakeholders.stakeholders.

Document bad interactions.Document bad interactions. Create user personas. (Steve Calde)Create user personas. (Steve Calde)


Sketching Sketching Interaction DesignInteraction Design

ThinkThink CommunicateCommunicate PersuadePersuade Sketching helps Sketching helps

shape digital shape digital material that is material that is equally spatial and equally spatial and temporal. (Jonas temporal. (Jonas Lowgren)Lowgren)


Techniques for Sketching Techniques for Sketching Interaction DesignInteraction Design

Pencil-and-paper Pencil-and-paper sketchingsketching

StoryboardsStoryboards Video prototypesVideo prototypes Pitch moviesPitch movies Animated use Animated use

sketchessketches Interactive Interactive

prototypesprototypes


Interaction design Interaction design processprocess

Requirements- Requirements- What is there vs. What is there vs. What is wanted?What is wanted?

AnalysisAnalysis DesignDesign Iteration and Iteration and

prototypingprototyping Implementation and Implementation and

deploymentdeployment


ID Exercise – ID Exercise – IntroductionIntroduction

Screens on next slide:Screens on next slide: Identify and solve Identify and solve

design problems.design problems. Describe your design Describe your design

and say why its good.and say why its good. Understand the people Understand the people

for whom you are for whom you are designing.designing.

Excel at both Excel at both conceptual and conceptual and detailed design.detailed design.


ID Exercise – ID Exercise – Improve User’s Experience by Improve 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 a You have minimum 1 mouse click and a

maximum of 4 mouse clicks.maximum of 4 mouse clicks. Move Table Autoformat display into first Move Table Autoformat display into first

screen.screen. Give “Remember dimensions for a new Give “Remember dimensions for a new

table?” checkbox more prominent location.table?” checkbox more prominent location. FYI: Office 12 offers table styles you view FYI: Office 12 offers table styles you view

and select. No more dialog boxes.and select. No more dialog boxes.


Two GenerationsTwo Generations at a Crossroads at a Crossroads

BoomersBoomers 1946-19641946-1964 FormalFormal StructuredStructured HierarchicalHierarchical Interface and Interface and

information are not information are not the samethe same

GamersGamers 1980-20011980-2001 InformalInformal UnstructuredUnstructured Non-hierarchicalNon-hierarchical Information is in Information is in

the interfacethe interface(K. M. Kapp)(K. M. Kapp)


SummarySummary

The User Experience Equation The 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 and Questions and Comments?Comments?

I hope you have I hope you have found this session found this session useful.useful.

Thanks for your Thanks for your participation in the participation in the session.session.

Questions or Questions or Comments?Comments?


If You Want If You Want to Contact Meto Contact Me

You are welcome to You are welcome to contact me with contact me with questions and questions and comments.comments.

[email protected]@vertexinc.comvertexinc.com


If You Want More If You Want More InformationInformation

Calde, Steve. “Technical Writers and Calde, Steve. “Technical Writers and interaction design,” Cooper Interaction interaction design,” Cooper Interaction Design Newsletter, January, 2004 Design Newsletter, January, 2004 http://www.cooper.com/content/insights/newsletters/2004_iss01/http://www.cooper.com/content/insights/newsletters/2004_iss01/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: Making Lockwood. “Instructive Interaction: Making Innovcative Interfaces Self Teaching,” 2002, Innovcative Interfaces Self Teaching,” 2002, http://http://www.forUse.com.www.forUse.com.

http://www.cooper.com/content/%0Binsights/newsletters/2004_iss01/%0BTechnical

http://www.cooper.com/content/%0Binsights/newsletters/2004_iss01/%0BTechnical



Decem, Bart. Wired News, Killer Buzz Flocks Decem, 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 Experiences Frishberg, Leo. “Designing User Experiences for Applications Versus Information for 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 Use Garrett, Jesse James. “Elements of Use Experience,” Experience,” http://www.jjg.net/iahttp://www.jjg.net/ia

http://uxmatters/

http://www.jjg.net/ia



Kapp, Marl M. “Games and Simulations for Kapp, 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 Interaction Lowgren, 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 Design Marion, Craig. “What Is Interaction Design and What Does it Mean to Information and 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

http://webzone.k3.mah.se/k3jolo/



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 Patterns O’Reilly, Tim. “What is Web 2.0: Design Patterns and Business Models for the Next Generation of and 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 an Reimann, Robert. “So You want to be an Interaction Designer,” Cooper Interaction Design Interaction 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 Experience Saffer, 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, 2005 Schon, Donald. February 11, 2005 http://www.infed.org/thinkers/et-schon.htmhttp://www.infed.org/thinkers/et-schon.htm

Shedroff, Nathan. “Recipe for a Successful Shedroff, Nathan. “Recipe for a Successful Website,” 1994, Website,” 1994, hhttp://www.nathan.com/ttp://www.nathan.com/ thoughts/recipe/index.htmlthoughts/recipe/index.html

http://www.adaptivepath.com/

http://www.nathan.com/

http://www.nathan.com/

The User Experience Equation: Stepping Beyond Information to Interaction

Education

user intention

user goals

information development

information tointeraction

information tohow

entireuser experience

interaction2006 copyright

deboard2006 copyright