introduction to ux
DESCRIPTION
A short intro to user experience going over some basic usability principles/heuristicsTRANSCRIPT
![Page 1: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/1.jpg)
user experience.
Sabina Siddiqi 5/17/2013
![Page 2: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/2.jpg)
what is user experience?
![Page 3: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/3.jpg)
components of user experience
![Page 4: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/4.jpg)
user experience
The overall
experience one has
when interacting with
a product, website,
service, tool etc..
![Page 5: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/5.jpg)
![Page 6: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/6.jpg)
![Page 7: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/7.jpg)
![Page 8: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/8.jpg)
what makes a good (great?) user
experience?
empowers the user
knows the user
no learning curve (or reduced)
![Page 9: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/9.jpg)
what makes a good (great?) user
experience?
empowers the user
knows the user
no learning curve (or reduced)
![Page 10: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/10.jpg)
reduce learning curve
Consistency what behaves alike looks alike, what behaves different looks different
![Page 11: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/11.jpg)
![Page 12: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/12.jpg)
![Page 13: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/13.jpg)
![Page 14: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/14.jpg)
![Page 15: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/15.jpg)
![Page 16: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/16.jpg)
![Page 17: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/17.jpg)
Consistency what behaves alike looks alike, what behaves different looks different
Keep user informed provide feedback for every action as much as is useful no more, no less
reduce learning curve
![Page 18: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/18.jpg)
Response time - how users perceive delays:
<0.1s perceived as “instantaneous”
1s user’s flow of thought stays uninterrupted, but
delay noticed
10s limit for keeping user’s attention focused on the
dialog
>10s user will want to perform other tasks while waiting
![Page 19: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/19.jpg)
![Page 20: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/20.jpg)
![Page 21: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/21.jpg)
![Page 22: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/22.jpg)
![Page 23: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/23.jpg)
Consistency what behaves alike looks alike, what behaves different looks different
Keep user informed as much as is useful no more, no less provide feedback for every action
Prevent Errors as far as is possible do not provide functionality that leads to error
reduce learning curve
![Page 24: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/24.jpg)
![Page 25: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/25.jpg)
![Page 26: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/26.jpg)
reduce learning curve
Keep user informed as much as is useful no more, no less provide feedback for every action
Keep user informed as much as is useful no more, no less provide feedback for every action
Prevent Errors as far as is possible do not provide functionality that leads to error
Consistency what behaves alike looks alike, what behaves different looks different
![Page 27: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/27.jpg)
what makes a good (great?) user
experience?
empowers the user
knows the user
no learning curve (or reduced)
![Page 28: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/28.jpg)
empower your user
the locus of control - let the user initiate actions
![Page 29: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/29.jpg)
A genie offers you two choices...
![Page 30: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/30.jpg)
o eat at the finest restaurants
o for free
o twice a week
o but the genie picks the day and restaurant
![Page 31: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/31.jpg)
o eat at “good” restaurants
o for free
o twice a week
o this time YOU pick the day and restaurant as long
as it’s just “good”
![Page 32: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/32.jpg)
what would you choose?
![Page 33: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/33.jpg)
![Page 34: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/34.jpg)
![Page 35: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/35.jpg)
empower your user
the locus of control - let the user initiate actions user can easily complete their desired task
![Page 36: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/36.jpg)
![Page 37: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/37.jpg)
empower your user
the locus of control - let the user initiate actions user can easily complete their desired task user knows how far they have gotten in their task
![Page 38: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/38.jpg)
![Page 39: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/39.jpg)
![Page 40: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/40.jpg)
![Page 41: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/41.jpg)
![Page 42: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/42.jpg)
![Page 43: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/43.jpg)
empower your user
The locus of control - let the user initiate actions user can easily complete their desired task user knows how far they have gotten in their task allow easy reversal of actions
![Page 44: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/44.jpg)
Saves conditions
after each step
allowing user to go
back and forth
easily.
![Page 45: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/45.jpg)
Undo button
allowing for
reversing several
steps
![Page 46: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/46.jpg)
empower your user
the locus of control - let the user initiate actions user can easily complete their desired task user knows how far they have gotten in their task allow easy reversal of actions the user should not have to remember things
![Page 47: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/47.jpg)
![Page 48: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/48.jpg)
![Page 49: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/49.jpg)
![Page 50: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/50.jpg)
empower your user
the locus of control - let the user initiate actions user can easily complete their desired task user knows how far they have gotten in their task allow easy reversal of actions the user should not have to remember things
![Page 51: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/51.jpg)
what makes a good (great?) user
experience?
empowers the user
knows the user
no learning curve (or reduced)
![Page 52: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/52.jpg)
Shortcuts
Know Your User
![Page 53: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/53.jpg)
Shortcuts
![Page 54: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/54.jpg)
Predict user needs
Shortcuts
Know Your User
![Page 55: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/55.jpg)
Predict
User Needs
![Page 56: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/56.jpg)
Predict
User Needs
![Page 57: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/57.jpg)
Predict
User Needs
![Page 58: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/58.jpg)
Predict
User Needs
![Page 59: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/59.jpg)
Shortcuts
Predict user needs
Know Your User
![Page 60: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/60.jpg)
to summarize..
![Page 61: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/61.jpg)
reduce learning curve
- consistency in function and design
- keep user informed (as needed)
- provide feedback for every action
- prevent errors
to summarize..
![Page 62: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/62.jpg)
reduce learning curve
- consistency in function and design
- keep user informed (as needed)
- provide feedback for every action
- prevent errors
empower user
- the locus of control
- user can easily complete their desired task
- user knows how far they have gotten in their task
- user knows when the task has been completed
- easy reversal of actions
- user does not have to remember things
to summarize..
![Page 63: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/63.jpg)
reduce learning curve
- consistency in function and design
- keep user informed (as needed)
- provide feedback for every action
- prevent errors
empower user
- the locus of control
- user can easily complete their desired task
- user knows how far they have gotten in their task
- user knows when the task has been completed
- easy reversal of actions
- user does not have to remember things
know the user
- provide shortcuts
- predict user needs
to summarize..
![Page 64: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/64.jpg)
Case Study:
Google Groups
![Page 65: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/65.jpg)
![Page 66: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/66.jpg)
Consistency
![Page 67: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/67.jpg)
Consistency
![Page 68: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/68.jpg)
Keep user
informed
Shortcuts
![Page 69: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/69.jpg)
Preserve user
memory
Provide
feedback for
actions
For touch screens
hover tooltips are
useless
![Page 70: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/70.jpg)
Prevent errors
![Page 71: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/71.jpg)
Easy reversal
![Page 72: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/72.jpg)
so that’s it?
that’s all there is to it?
![Page 73: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/73.jpg)
so that’s it?
that’s all there is to it?
well not quite..
![Page 74: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/74.jpg)
design.
user research.
use cases.
navigation maps.
personas.
usability testing. market research.
future interfaces. hci / human factors research.
etc..
information architecture.
![Page 75: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/75.jpg)
… but those will have to be saved for future talks
![Page 76: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/76.jpg)
FUTURE
TOPICS
![Page 77: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/77.jpg)
UX DESIGN PROCESS
![Page 78: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/78.jpg)
OTHER AREAS IN UX
Marketing
• Market research
• target market demographics
• competitive/gap analysis
• Product strategy
• Content strategy
Usability
• User research
• personas/scenarios
• process/task analysis
• testing
• Information Architecture & Design
• heuristic analysis
• user journey map
• Interaction design
• interaction framework
• wireframes & prototypes
Design
• Concept
• Design Assets
• Style Guide
• Visual comps
![Page 79: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/79.jpg)
USER RESEARCH
USER PERSONA
Profile: Role: Project manager
25-45 yrs old
High level knowledge of economics
Lay user of technology
Traveling 50-75%
High risk sports
First time user of our products
Goals & Needs: Use cases
Requires easy access to productivity metrics to analyze results of 2-3 yr projects in developing countries.
Needs to analyze metrics to:
be able to continuously improve processes – once a week.
evaluate performance of individual members of the team – once a quarter.
report performance KPIs and metrics to apply for future funding – once a year.
Desirables: Nice to haves:
mobile version of app to be used in low connectivity areas.
![Page 80: Introduction to UX](https://reader034.vdocument.in/reader034/viewer/2022052315/55647e94d8b42a361d8b48c2/html5/thumbnails/80.jpg)
Questions?