When I started my new job, most of my colleagues didn't clearly understand UX. I created this introduction to User Experience so they would understand why UX is important in design; how I would collaborate with the team; what I would contribute to our projects; and typical activities and artefacts I would do. My colleagues found this information helpful so that they know how to engage me for design and strategic questions about good UX-fu. This is a smaller, modified version for Barcamp 4 in Auckland, New Zealand.

1. What is User Experience?
By Haunani Pao, CUA
User Experience Designer
haunani@gmail.com
Barcamp 4
17 July 2010
1 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

2. In this document...
- What is User Experience?
- What is User Centric Design?
- What is Usability?
- What User Experience is NOT
- Appendix
2 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

3. What is User Experience?
“Information is that, which leads to understanding.”
– Richard Saul Wurman, architect and graphic designer
3 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

4. What do people say?
- If you ask someone about UX, he might say:
- It has something to do with the UI of the
software...
- It’s about usability...
- It’s about the colours and design...
- It’s positive and nice
- All of these examples are reasonable...but UX is
more than that.
4 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

5. On the web, the experience is the brand…
It is the different touch points, whether they
are tangible or intangible of the total
experience.
“ Every time a customer comes into contact with an enterprise,
through any of its channels, the customer has an opportunity to
form an opinion – good, bad or indifferent. Over time, this
collective set of customer experiences forms a picture in the
customer’s mind, which ultimately forms the image of the brand
and its values.”
– Gartner, March 2002
5 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

6. UX is both “Art and Science”
Cognitive Science
Human Factors & Psychology
Business Analysis Conceptual Modeling
Ergonomics Information Architecture
User Experience is
multi-disciplinary
Contextual Inquiry with unique and Visual Design
diverse skills to design
offerings that satisfy
Linguistics Interface Design
user expectations
and business needs.
Heuristics Information Design
Usability Testing Interaction Design
Human-Computer Interaction
HCI/CHI
6 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

7. Its purpose of being
- Advocate for all users
- User is the center of the process
- Brings objectivity in design decisions
user needs goals tasks
business needs goals strategy
Alignment of User and Business Goals
7 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

8. Elements of User Experience
To the user, the surface of the site or application is the UX. Beneath the
skeleton, much thought for the UX comes from the structure, scope and
abstraction of the strategy.
8 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

9. UX is more than just a “pretty face”
• Rigorous, Reusable, Repeatable
• Define and Refine Requirements
• Create Consistent Interfaces
• Improves Usability
9 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

10. What is User Centric Design?
“The two most important tools an architect has, are the eraser in the
drawing room and the sledge hammer on the construction site.”
– Frank Lloyd Wright, Architect
10 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

11. User Centric Design (UCD)
It’s a design philosophy
It’s a multi-staged process
Designers test their assumptions and solutions
It focuses on the needs, goals and limitations of
the user
Users are part of the design team
11 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

12. The User Centric Design process is Iterative
1 2 3 4 5
Analysis Design Evaluation Build Deployment
Vision/Goals/Objectives Conceptual Design Design Walkthrough Technical Development
Technical Development Evaluate and Assess
Evaluate and Assess
Challenges/Constraints Functional Specs. Usability Testing UX Quality Assurance
UX Quality Assurance Usability Testing
Usability Testing
In each phase of the project, there are UCD activities and deliverables.
12 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

13. User Centric Design Activities (examples)
Contextual Inquiry Expert Review
Usability Testing
Task Analysis Affinity Diagramming
13 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

14. User Centric Design Artefacts (examples)
Personas Project Plan Storyboards Usability Report
Process Flows Wireframes Design Specification
14 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

15. What is Usability?
"Modern user interfaces are just as complex as software in terms of
the number of different variables we combine. More importantly, 20
years of usability engineering experience have shown that it's
impossible to design the perfect user interface on the first try."
– Jakob Nielsen
15 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

16. Factors of Usability
The important factors are:
- Effectiveness: How the user achieves the goals when
using the system
- Efficiency: The resources consumed in order to
achieve their goals
- Satisfaction: How the user feels about their use of the
system
16 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

17. Usability is smart business
• Increase ease of use
• Increase user satisfaction
• Increase productivity
• Reduce maintenance/enhancement costs
• Save development costs
• When done well, improves the brand
“The rule of thumb in many usability aware organizations is that the cost-benefits
ratio for usability is $1:$10-100. Once a system is in development, correcting a
problem costs 10 times as much as fixing the same problem in design. If the
system has been released, it costs 100 times as much relative to fixing in design.”
(Gilb, 1998)
Users are savvy, sometimes you only have one chance to make an
impact. Usability can differentiate you from your competition.
17 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

18. The ‘usability iceberg’
10% – visual design,
aesthetics, colour,
fonts, layout
30% – interaction with
the look – buttons, etc
The majority of
60% - The conceptual usability issues with
model. The relationship a system lies
between objects, beneath the surface.
metaphors, workflow,
navigation Pao, CUA haunani@gmail.com
18 © 2010 Haunani twitter:haunanipao Barcamp 4, 17, July 2010

19. How UX and Usability are related
Think of User Experience as a Countdown Store:
• The building
• Park your car in the car park
• Shop for groceries (goal) (Countdown is a grocery store
chain in New Zealand)
• Pay for groceries (task)
• The weekly advertisements
• The website
19 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

20. How UX and Usability are related
Think of Usability as the efficiencies:
• The Trolley bay
• The layout of the store
• The wide aisles
Shallow or deep trolleys, or baskets
• The arrangement of grocery items
• The efficiency of checkout
Self check out
20 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

21. Remember…
The Experience is the brand
21 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

22. What User Experience is Not?
22 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

23. … it is not
Eye candy!
23 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

24. … or about paying …
… lip service
to “user engagement”
24 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

25. ... it is not
Optional.
25 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

26. When you make UX optional, you end up with this…
This is an example of a user experience without the UCD
approach. It has all the requirements and visual design, but
it’s not usable.
“Your best guess is not good enough…”
Jakob Nielsen, Usability Expert
26 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

27. So to recap…
• User Experience is the result from an end-to-end multi-
staged process using User Centric Design and validated by
usability testing.
• It is based on research and understanding of the user’s needs
and goals.
• It drives the functionality and design of a product from the
ground up.
27 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

28. Questions?
Thank You for your time.
28 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

29. Appendix
29 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

30. Learn More
Wikipedia:
- Get the high level information on UX – http://en.wikipedia.org/wiki/User_experience
Websites:
- A List Apart – http://alistapart.com – this has more to do with web design, but there
are topics on process as well
- Boxes and Arrows – http://boxesandarrows.com – one-stop shopping for UX and IA.
- Human Factors International – http://humanfactors.com – 30 years of UX and
usability experience. Their site features UX communities, whitepapers, webcasts and
news
Books:
- The Elements of User Experience – Jesse James Garrett, 2003
- Don’t Make Me Think – Steve Krug (one of my favourite books)
- Design of Everyday Things – Donald A. Norman
Professional Associations:
- ACM/SIGCHI – http://sigchi.org
- ACM/SIGGRAPH – http://siggraph.org
- Usability Professionals Association (UPA) – http://upa.org and http://upa.org.nz
- Human Factors and Ergonomic Society (HFES) – http://hfes.org
30 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

31. References
- Thank you to:
- Elements of User Experience, 2000, Jesse James Garrett of Adaptive Path, jjg@jjg.net
- Cover of The Design of Everyday Things, 1986, Donald A. Norman
- Iceberg Lifecycle, 2010, Vlad Gerasimov, http://vladstudio.com
- User Experience Stencil for Visio, 2009, Todd Zazelenchuk and Elizabeth Boling,
http://userfocus.co.uk
- Countdown Stores: http://www.countdown.co.nz/
- Wikipedia, http://en.wikipedia.org/wiki/User_experience
- Richard Saul Wurman
- Frank Lloyd Wright
- Jakob Nielsen
31 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

32. Typical artefacts, tasks and deliverables
1. Affinity Diagramming – a technique used to organize ideas and data.
2. Card Sorting – a technique with users to find patterns in how they would expect to find content or functionality.
3. Heuristic Expert Review - A detailed analysis of an application or Web site based on a list of predefined criteria.
4. High Value Scenarios - A set of the most critical and widely used user tasks in an application or Web site.
5. High-Fi Prototype - A branded and UI standards compliant screen mock up, usually of the lo-fi prototype and sometimes interactive.
6. Low-Fi Prototype - A screen mock up (usually paper) to illustrate the functionality, content, information architecture and preliminary page layout.
7. Process Flows - A visual mapping of a user process and each decision along the way, to achieve a task.
8. Quality Assurance – User Interface - is the process of looking through a site or application in code and design and checking it against the required
design specification.
9. Site Map - A Site Map is a diagram listing the various pages or page types throughout the site and the user paths to and from them (Information
Architecture).
10. Screen Flows - A visual representation of the relationship and navigability of screens within an application.
11. Task Analysis –any factors to complete a task, including length, manual, mental, external artifacts etc.
12. Usability Metrics - Metrics to determine how the interface can be measured on usability attributes.
13. Usability Report – Deliverable results from a Usability Testing
14. Usability Testing - Tests how users actually interact with a prototype or complete site to discover pros/cons of the site or application and make
recommendations for improvements.
15. User and Interface Design Requirements - defines the user and interface requirements for the site or application.
16. User Interviews - Interviews conducted to identify user requirements.
17. User Personas - A Persona is a document that contains one or more representations of target users.
18. UX Interface and Functional Specifications - The complete specification of all aspects of the user experience.
19. Wireframes- Collection of standard compliant screens complete with the core elements and functions, design, content and navigation in place.
32 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

33. UX Glossary
- Business Analysis (BA) – identifying business needs and solutions to business problems
- Cognitive Psychology – study of memory, language, mental processing, perception, problem solving and thinking.
- Cognitive Science – study of how information is represented in the brain.
- Contextual Inquiry (CI) – One-on-one observation of a user and their daily routines, work process within their environment
- Ergonomics - is concerned with mental processes, such as perception, memory, reasoning, and motor response, as they affect
interactions among humans and other elements of a system.
- Heuristics – simple, gestalt, efficient rules, hard-coded by evolutionary processes or learned, which have been proposed to
explain how people make decisions, come to judgments, and solve problems.
- Human Computer Interaction (HCI/CHI) – the study of interaction between people and computers
- Human Factors – understanding the properties of human capabilities
- Information Design – showing information in a visual manner so people can understand it and use it effectively.
- Interface Design – “the feel” of the system
- Information Architecture (IA)– is the art of expressing a model or concept of information, specifically used in activities that
require explicit details of complex systems.
- Interaction Design (IxD) – this describes the behaviour of components of a system to its users
- Mental Model – a user’s thought process and decision making when performing tasks in “real world” situations.
- Nomenclature – the language, naming convention and terminology internally related to a community, process, principle or
procedure
- Usability Testing (UT)– one-on-one testing of a prototype with a user and use ‘think aloud protocol’ to gather their
impressions of the prototype. Then incorporate the feedback to improve the design.
- User Centric Design (UCD) – a process where the user becomes part of the design team to identify users needs, goals and
desires for a system or artifact.
- User eXperience (UX) – how a person feels about using a system
- Visual Design (VD) – “the look” of the system
33 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010

34. About Haunani
Haunani has 10 years experience with User Experience (UX) and User
Centric Design (UCD). In 2003, she received her Certified Usability
Analysis (CUA) designation from Human Factors International.
She is an advocate and practitioner of the User Experience (UX)
methodology as a designer, analyst and architect to provide human
factors expertise and project deliverables such as expert reviews,
information architecture, interaction design models and usability testing.
She works collaboratively for the successful definition and design of user
experiences and applications.
Haunani is originally from the San Francisco Bay Area, but moved to New
Zealand for adventure and love. She’s a sketcher, gamer, foodie, world-
traveller, beermaker and urban gardener.
Haunani Pao, CUA
User Experience Designer
haunani@gmail.com
Twitter: haunanipao
http://nz.linkedin.com/in/haunani
Auckland, New Zealand
34 © 2010 Haunani Pao, CUA haunani@gmail.com twitter:haunanipao Barcamp 4, 17, July 2010