Paul Hibbitts
Educator, interaction design practitioner and software developer.
Introduction to UX
CMPT 363
“When creating great experiences, it’s not so much about doing what users expect. Instead, it’s about creating a design that clearly meets their needs at the instant they need it.”
– Jared Spool
Topics
- User interfaces (UI)
- Interaction design (IxD)
- User experience (UX)
- Usability
- Measuring usability
- User-centered design (UCD)
- UCD and “Mobile”
What is a User Interface (UI)?
A common boundary or surface between
the interactive system and the user
What is a User Interface?
All elements which provide communication between the interactive system and the user
Universal Model of a
User Interface
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://www.baxleydesign.com/pdfs/dux03_baxleyUIModel.pdf
What is User Interface Design?
User interface design is the process of supporting the goals of the user, ideally in a friendly and articulate manner
Activity: User Interface Design Case Study
HipMunk.com
Next Up,
What is Interaction Design (IxD)?
The structure and behaviours of an interactive product,
service, or system
Interaction Design Association:
2015 Interaction Design Awards
Founded by the Interaction Design Association (IxDA) in 2010 and first presented in 2012, the annual Interaction Awards celebrate design thought leadership and innovation around the globe. Each year, award recipients comprise a showcase demonstrating how interaction design impacts and improves human lives.
How Can We Define
User Experience?
“A person’s perceptions and responses that result from the use or anticipated use of a product, interactive system, or service.”
– ISO 9241-210
The User Experience Honeycomb
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://www.biomedcentral.com/1472-6947/8/34/figure/F1
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://www.jjg.net/elements/pdf/elements.pdf
Elements of the User Experience
Activity: User Experience
THINK-PAIR-SHARE
What are some examples of good or bad user experiences?
The Disciplines of User Experience
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://www.kickerstudio.com
Time for Questions & Discussion
- What we’ve covered so far
- What is a user interface?
- What is user interface design?
- What is interaction design?
- What is user experience design?
- Coming up
- What is usability?
What is Usability?
Usability Means...
Usability means that a person using a system finds it easy to understand and use
Usability Means...
A usable system allows a person to focus on their tasks,
and not on the system itself
Usability Means...
A usable system most often does what a person expects
Ease-of-Use Pyramid
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: Hanson and Castleman
What is Usability?
More specifically, usability can be defined as:
- A measurement
- A design approach
Usability as a Measurement
(as defined by Jakob Nielsen)
- Learnability
- Efficiency
- Memorability
- Error Rate
- Satisfaction
Learnability
Learnability – how easy is it for novice users to work with the system?
Efficiency
Efficiency – how efficient is it for experienced users to work with the system?
Memorability
Memorability – how easy is it for less frequent users to remember how to use the system?
Error Rate
Error Rate – how many errors (on average) do users make when working with the system?
Satisfaction
Satisfaction – how pleasant do users find the system to work with?
Usability as a Measurement
Tradeoffs exist (i.e. learnability vs. efficiency)
Activity: Usability Assessment
Let's do a brief usability assessment for a local university website...
Usability Iceberg
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://www.ibm.com/developerworks/library/w-berry/
Time for More Questions
and Discussion
- What we’ve covered in this section
- What is usability?
- Ease-of-use pyramid
- Usability as a measurement
- Usability iceberg
- Coming up
- Usability as a design approach
Usability as a Design Approach
- User-centered design (UCD)
- Both a methodology and philosophy
Goals of
User Centered/UX Design
Designing a Useful Product
- Internal combustion engine
- Four wheels with rubber tires
- A transmission connecting the engine to the drive wheels
- Engine and transmission mounted on a metal chassis
- A steering wheel
- To cut grass quickly and easily
- To be comfortable to sit on
Source: Scott McGregor
Aspects of an Enjoyable Product
- Aesthetics
- Appeal
- Delight
- Fun
- Engagement
- Emotions
Case Study:
Making an Enjoyable Product
User-Centered Design
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://www.wqusability.com/articles/
“Requirements” Gathering
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://usabilitygeek.com
Common UCD Activities
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://www.indiana.edu/~usable/tools_templates.html
What About UCD and “Mobile”?
Responsive Web Design (RWD)
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://www.paulolyslager.com/responsive-design-hype-solution/
Responsive Web Design
- Content/interface universal for all devices
- One source of content, presented differently
- Key elements
- CSS media queries
- Fluid grid layouts
- Flexible images and media
RWD Also Changes the
Design Process
Copyright by respective copyright owners. Used without permission under the Fair Use Doctrine. Source: http://viljamis.com/blog/2012/responsive-workflow/
Summary
- User interfaces (UI)
- Interaction design (IxD)
- User experience (UX)
- Usability
- Measuring usability
- User-centered design (UCD)
- UCD and “Mobile”
- Responsive Web Design (RWD)
Reference and Suggested Books
- A Project Guide to UX Design: For user experience designers in the field or in the making by Russ Unger and Carolyn Chandler
- Don’t Make Me Think: A Common Sense Approach to Web Usability, 2nd Edition by Steve Krug
- The Design of Everyday Things by Donald A. Norman
- Universal Principles of Design by William Lidwell, Kritina Holden, and Jill Butler
- Usability Engineering by Jacob Nielsen
- Useful Usability: Simple Steps For Making Stuff Better by Eric Reiss
CMPT-363-153 Introduction to UX Design
By Paul Hibbitts
