A presentation for Unitec 2nd year BProdDes students to give them an overview of UX. Done on 11 August 2009

1. UX 101
(+ IxD & ID)
Vicky Teinaki
vicky@vickyteinaki.com
@vickytnz

2. What is UxD?
(user experience design)

3. IXDA mailing list Nov 2007

4. Luke W. ‘UX Rationalisation’ This and following examples at http://www.lukew.com/FF/entry.asp?156

5. The Elements of the User's Experience » Trigger
Some circumstance triggers a need and a corresponding
expectation of satisfaction.
Trigger » Expectation
What does the user expect to do, how do they expect to
»
do it, what do they expect to get out of it in the end?
» Proximity
How close is the user to the necessary part of the
Expectation » system? Are they on the right webpage, near the instore
on
» Pr
kiosk, or next to the information desk at the airport?
» Awareness
Does the user notice the necessary part of the system -
ox
the link, the kiosk, or the information desk? Or are they
i
The User's
at
distracted by something else, like a spinning logo?
im
» Evalu
» Connection
ity
Does the user make the connection between their need
Experience Cycle and the neccessary part of the system? Do the system
cues match their expectation so that they can make this
»
The user experience is not one simple action - it connection and then act on it?
is an interconnected cycle of attempting to » Action
satisfy hopes, dreams, needs, and desires. This Can the user take action, or is there a mismatch with how
Awaren
Respon
takes the shape of individuals comparing their they expected to act and the actual action required?
expectations to the outcomes generated by their » Response
interaction with a system. Managing expections The system provides a response to the user's action - is it
then becomes key to successfully providing a the expected response? Does it meet the need?
» Evaluation
satisfying "return on experience" that delights
ess
se
users and generates shared, sustainable value. The user compares the response with the expection.
Based on this comparison, the user will adjust their
»
»
expectations.
- If expectations are managed well, and are met
consistently, the user will continue the cycle until their
Ac ion
initial need is satisfied.
tio n » ct - If expectations are not met, the user will stop using the
Co nne system and try other channels or abandon the goal for
the time being.
The Experience Cycle model © 2003-2004 Jess McMullin. All rights reserved.
The Experience Cycle model synthesizes work from three sources: » Don Norman's work with mapping and subsequent cognitive walkthrough methods. » The AIDA model from marketing literature - Awareness, Interest, Desire, Action.
» The notion of cyclical adjustment of expectation reflects the game theory notion of repeated expected utility. This has been explored in the interactive domain with work done at PARC on information foraging.

6. The User Experience Cosmos (v1.1) cosmos: n. the universe
A personal representation of our space regarded as an orderly,
harmonious whole.
atoms / analog / mechanic
This image is a graphical representation of the user
experience field based on my own coordinates, references
hardware
instruction leaflets
and perceptions. It is not a precise work, but neither
were those first maps made by Mediterranean
environments chartographers.
kansei engineering
mitsuo nagamachi appliances
This diagram is based on one assumption: everything
instructional design in the User Experience field ranges between bits and
pieter desmet
paul mijksenaar atoms, and points predominantly to the brain or the heart.
signs stc
design and emotion soc.
The map displays five different types of elements: people,
iea
product design edward tufte web resources, professional groups, products and
scott mcloud hfes disciplines, and two axis: emotional-rational and analog-
heart / emotional / subjective
experience design
digital. Every element has been placed somewhere in
brain / rational / objective
donald norman human factors the territory based on its nature.
information design
Yellow is used for practices and disciplines. Their
aiga infovis coordinates are assigned based both on the methods
emotion design nathan shedroff isopixel used and their outcomes.
richard saul wurman
pat jordan
infodesign
terremoto.net Green is used for people known in the field for their
information appliances cooper insights
contributions, new ideas or original viewpoints.
alan cooper
mini-d
nitroglicerine Blue is used for professional groups: associations,
jmarquez scott weiss
aipo foundations, communities, etc.
boxes and arrows upa
usability engineering
fabio sergio Pink is used for online resources that offer original content
best of chiweb and sigia-l
and are relevant for user experience practitioners.
javier cañada information architecture usability.gov
peter morville andrew dillon
peter merholz
acia louis rosenfeld
grancomo chi-web Red is used for products, which are the outcomes of the
louise ferguson
mark hurst cadius
aifia alzado.org useit disciplines involved in user experience.
jjg.net cesar martin
jinwoo kim good experience sigia-l jakob nielsen
christina wodtke eduardo manchon usab. meth. toolbox
antenna
jesse james garret
ainda.info
It is assumed that there are many elements missing in
usability news ben schneiderman
games
jeff raskin
ibm ease of use steve krug this representation. Further versions could include a
jared spool
evolt websites e-commerce sites uie different axi, categories or an increased number of points
hci web
game design a list apart
hci displayed. This work is open for revisions and
usable web
interaction design reformulations.
productivity software
key to this diagram: bits / digital / electronic
For comments, questions or cries about the User
activities and disciplines Experience Cosmos, send an email message to:
people professional groups
Javier Cañada
products online resources cosmos@terremoto.net
a list apart appliances donald norman games infodesign jared spool mark hurst product design uie
acia ben schneiderman e-commerce sites good experience information appliances javier cañada mini-d productivity software upa
aifia best of chiweb and sigia-l eduardo manchon grancomo information architecture jeff raskin mitsuo nagamachi richard saul wurman usability engineering
aiga boxes and arrows edward tufte hardware information design jesse james garret nathan shedroff scott mcloud usab. meth. toolbox
ainda.info cadius emotion design hci infovis jinwoo kim nitroglicerine scott weiss usability news
aipo cesar martin environments hci web instructional design jjg.net pat jordan sigia-l usability.gov
alan cooper chi-web evolt hfes instruction leaflets jmarquez paul mijksenaar signs usable web
alzado.org christina wodtke experience design human factors interaction design kansei engineering peter merholz stc useit
andrew dillon cooper insights fabio sergio ibm ease of use isopixel louis rosenfeld peter morville steve krug websites
antenna design and emotion soc. game design iea jakob nielsen louise ferguson pieter desmet terremoto.net

7. IXDA mailing list Nov 2007
Dan Saffer ‘The Disciplines of User Experience’ http://www.kickerstudio.com/blog/2008/12/the-disciplines-of-user-experience/

8. “ Curiosity, passion, and empathy are traits that
user experience designers share [along with] a
desire to achieve balance … most notably
between logic and emotion ….
To create truly memorable and satisfying
experiences, a UX designer needs to understand
how to create a logical and viable structure for
the experience and needs to understand the
”
elements that are importance to creating an
emotional connection with the product’s users.
Unger , R., Chandler, C. (2009) A Project Guide to UX Design: For User Experience Designers in the Field or in the Making - p6

9. So how does this
relate to product
design?

10. “ Design a thing by considering it in
its next largest context - a chair in a
room, a room in a house, a house in
an environment, environment in a
city plan.
Eliel Saarinem ”
Henning Fischer, ‘Design Strategy on a Shoestring’ https://admin.na4.acrobat.com/_a829239006/p77669266/

11. Context =

12. Context = story

13. Mad Men “The Carousel” http://www.youtube.com/watch?v=R2bLNkCqpuY&feature=player_embedded

14. Sony Handycam http://portfolio.tyo-id.co.jp/handycam/

15. Adaptive Path/Mozilla Labs ‘Aurora’ http://vimeo.com/1450211

16. Macro
Micro
http://adaptivepath.com/aurora/themes.php

17. Starfire: A Vision of Office Computing (1992, for 2004) Apple Knowledge Navigator
http://www.asktog.com/starfire/ http://www.uie.com/articles/knowledge_navigator/
Nokia 888 Nokia Morph
http://www.nokia888.com/ http://www.nokia.com/about-nokia/research/demos/the-morph-concept

18. Context = steps

19. Mental Models
Young, I (2009) Mental Models http://www.flickr.com/photos/rosenfeldmedia/sets/72157603511616271/

20. Mental Models
Young, I (2009) Mental Models http://www.flickr.com/photos/rosenfeldmedia/sets/72157603511616271/

21. Context = people

22. Personas (designing for Clevis)
Cooper, A. (1999) The Inmates Are Running the Asylum

23. Personas (designing for Clevis)
Cooper, A. (1999) The Inmates Are Running the Asylum

24. Context = language

25. Godwin, K. (2008) Designing for the Digital Age

26. Design Language
(Cooper Studio)
Cooper Office Phone - ‘Designing for the Digital Age’ and http://www.cooper.com/insights/concept_projects/office_phone.html

27. Context = reality

28. The reality of
iMode - Bill
Moggridge
Innovationsforum 2007 http://interface.fh-potsdam.de/innoforum/english/09_video.php?vidName=809546 (9:23-11:00)

29. “ People didn’t get it.
For about 15 seconds.
Scott Jenson, Google
”
Stanford HCI Seminar 2007 ‘Why Phones Are Not Computers’ http://www.youtube.com/watch?v=Mz9MELz1F-o (32:50-36:00)

30. ✍

31. SCAD- Freescale Collaboration http://iact.in/?p=104

32. The Service Designers - The UX Workshop
http://www.theuxworkshop.tv/the-service-designers/
http://www.boxesandarrows.com
Kim Gowdin - UStream IXDA - Designing a Unified Experience
http://www.ustream.tv/recorded/1419557
Adaptive Path: calling all experience design clips
http://www.adaptivepath.com/blog/2008/03/24/calling-all-experience-design-
video-clips/
Free to read UX books
http://www.theuxbookmark.com/links/books/
Kicker Studio
http://www.kickerstudio.com/blog/2009/03/case-study-gestural-entertainment-
center-for-canesta/
Behaviour As The Engine Of Interaction Design
http://www.slideshare.net/dansaffer/designing-from-the-insideout-behaviour-
http://www.ixda.org as-the-engine-of-product-design
http://www.vimeo.com/user1128734
Robert Fabricant - Behaviour Is Our Medium (Interaction 09)
http://vimeo.com/3730382
Futuristic Interfaces on Display
http://www.technologyreview.com/blog/editors/23940/
Dynamically changing buttons on a physical display (Infosthetics)
http://infosthetics.com/archives/2009/05/
providing_dynamically_changeable_physical_buttons_on_a_visual_display.ht
http://www.johnnyholland.org
ml
Stewart Brand - How Buildings Learn (6 part series)
http://video.google.com/videoplay?docid=8639555925486210852
Communicating through video (concepting)
http://johnnyholland.org/magazine/2009/07/communicating-ux-through-
video-2-concepting/
http://www.uie.com/brainsparks/topics/podcasts/

33. http://www.slideshare.net/vickyteinaki
twitter: @vickytnz