Ux and usability it's no PICNIC
-
Upload
myriam-jessier -
Category
Technology
-
view
520 -
download
2
Transcript of Ux and usability it's no PICNIC
![Page 1: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/1.jpg)
Behind the buzzwords
UX and Usability
VOXXED DAYS ZURICH
![Page 2: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/2.jpg)
Because « simple user testing » i.e. debugging a design is part of our jobs.
Because @g33konaut
2
Why am I speaking today?
![Page 3: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/3.jpg)
UX is the totality of end-users’ perceptions as they interact with a product or service. - Kuniavsky , 2010
Defining User Experience
3
![Page 4: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/4.jpg)
Increased customer satisfaction Loyalty More time = more money Less resources wasted
Think of your user’s needs as being your product goals
4
![Page 5: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/5.jpg)
1. Functional: works as programmed2. Reliable: is available and accurate3. Usable: can be used without
difficulty4. Convenient: easy to use, works
like I think5. Pleasurable: memorable
experience
User Needs
5
Pleasurable
Convenient
Usable
Functional
Reliable
![Page 6: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/6.jpg)
EffectivenessEfficiency
LearnabilityError prevention
Memorability
UX is broad and holistic. Usability is narrow and focused
6
Usability
SatisfactionEnjoyment
PleasureFun
Value
User Experience
![Page 7: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/7.jpg)
How some of us see usability
7
![Page 8: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/8.jpg)
Krug’s 3 Laws Of Usability
8
Steve Krug ”Don’t
Make Me Think”
Don’t make me
think
Let the
words go!Mindless &
unambiguous clicks
![Page 9: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/9.jpg)
USABILITY PYRAMID
9
Efficient
Effective
Learnable
Useful
Memorable
Delightful
Desirable
![Page 10: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/10.jpg)
The Myth of the Average User
10
37%
22%27%
14%
![Page 11: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/11.jpg)
Experience is personal and subjective
11
![Page 12: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/12.jpg)
Good web design isn’t a matter of figuring out what people like.
12
![Page 13: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/13.jpg)
13
Loves Harry PotterHates Twilight
Plays with his socks during church
Prefers Google over Yahoo
Warning : average user may not reflect reality
![Page 14: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/14.jpg)
A game that can be played in large meetings.
BULLSHIT BINGO
14
![Page 15: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/15.jpg)
Jargon 101: UX, UXD, CX, UI, IxD
15
UX: USER EXPERIENCE
UXD: USER EXPERIENCE DESIGN
CX: CUSTOMER EXPERIENCE
UI: USER INTERFACE
IxD: INTERACTION DESIGN
Get awesome photos on Gratisography
![Page 16: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/16.jpg)
User Experience Design is the process of designing for the all-encompassing, user-focused aspects of any system.
User Experience Design
16
![Page 17: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/17.jpg)
CX is the product of an interaction between an organization and a customer over the duration of their relationship.
17
ATTRACTION
AWARENESS
Get awesome photos on Gratisography
ADVOCACY
CULTIVATION
PURCHASE
DISCOVERY
USE OF SERVICE
![Page 18: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/18.jpg)
UX is a specific component within CX.
CX encompasses the experience of your entire brand.
CX and UX are not interchangeable!
18
![Page 19: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/19.jpg)
UI is what your users interact with,
UX is how they feel while they’re doing it.
UI and UX are not interchangeable!
19
![Page 20: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/20.jpg)
Interaction Design is about making the connection between a device, its interface and the user.
Interaction Design
20
![Page 21: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/21.jpg)
Interaction Design delivers that almost human element that makes technology enjoyable and
pleasant to interact with.
21
![Page 22: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/22.jpg)
Great image by Jeff Sauros
![Page 23: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/23.jpg)
USABILITY BEST PRACTICES
![Page 24: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/24.jpg)
24
1. Persona2. Empathy Map3. User Scenario4. Customer Journey Map
4 DOCUMENTS YOU NEED
![Page 25: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/25.jpg)
Personas are a placeholder for your ideal user during the design process.
Personas: fictional personalities based on research
25
![Page 26: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/26.jpg)
Step 1: print mapStep 2: ask dumb questionsStep 3: digest notes in post-its as a teamStep 4: go for quantityStep 5: chill out. Get more feedback.Step 6: define your mission
Empathy Map: a tool to organize user’s thoughts & emotions
26
![Page 27: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/27.jpg)
Behavior Motivation Environment External Factors
User scenarios
User factors to consider when creating a scenario
http://designmodo.com/ux-documents/
![Page 28: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/28.jpg)
It combines the user’s personality (persona) with how they’re interacting with your site (user scenario).
Each stage will offer different emotional progressions.
Customer Journey Map: give product context
28http://designmodo.com/ux-documents/
![Page 29: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/29.jpg)
PAY ATTENTION TO MY TALKING!
10 USABILITY GUIDELINES FOR WEB APPS
29
![Page 30: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/30.jpg)
Have a consistent and standardized UI
30
![Page 31: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/31.jpg)
Guide the user
31
![Page 32: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/32.jpg)
Make the CTA interactive objects obvious
32
![Page 33: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/33.jpg)
Give feedback on the user interacting and progressing
33
![Page 34: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/34.jpg)
Never have users repeat anything and keep signup information to a minimum
34
![Page 35: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/35.jpg)
Always have default values in fields and forms
35
![Page 36: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/36.jpg)
Explain how the inputed information will be used
36
![Page 37: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/37.jpg)
Don’t offer any reset or mass delete buttons
37
![Page 38: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/38.jpg)
Have clear and explanatory error and success messages
38
![Page 39: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/39.jpg)
Include a clear and visual hierarchy and navigation
39
![Page 40: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/40.jpg)
10 USABILITY GUIDELINES FOR MOBILE APPS
40
![Page 41: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/41.jpg)
Make sure it works on all phones
41
![Page 42: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/42.jpg)
Give incentives for sharing and purchase
42
![Page 43: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/43.jpg)
Keep usability and conversion in mind
43
![Page 44: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/44.jpg)
Navigation should be easy
44
![Page 45: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/45.jpg)
Offer relevant content
45
![Page 46: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/46.jpg)
Offer relevant content
46
![Page 47: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/47.jpg)
Go for great aesthetics
47
![Page 48: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/48.jpg)
Offer relevant content
48
![Page 49: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/49.jpg)
Give all the information that a customer needs to make a purchase
49
![Page 50: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/50.jpg)
Auto-fill customer data
50
![Page 51: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/51.jpg)
Design for quick movement
51
![Page 52: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/52.jpg)
Do usability testing through video
52
![Page 53: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/53.jpg)
6 WEB APPLICATION DEVELOPMENT MISTAKES
53
![Page 54: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/54.jpg)
Inconsistent approach to common functions
54
![Page 55: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/55.jpg)
Ambiguous error messages
55
![Page 56: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/56.jpg)
Giving users too many competing options
56
![Page 57: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/57.jpg)
Having a lengthy registration process
57
![Page 58: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/58.jpg)
Small clickable areas on mobile
58
![Page 59: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/59.jpg)
Blaming negative feedback on “fear of change”
59
![Page 60: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/60.jpg)
Digital analytics = what people are doing on your site. Usability = why they are doing things on your site.
What about digital analytics?
![Page 61: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/61.jpg)
61
8 Cheap Usability Tools1. Crazy Egg: heat maps2. Optimizely: A/B testing, basic plan is
free3. Five Second Test: capturing first
impressions, free4. Qualaroo: voice of customer5. Usabilia: all in one solution6. Feedback Army: uses Mechanical
Turk to get feedback7. Userfeel: not just for websites in
English8. TrymyUI: usability testing tool
![Page 62: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/62.jpg)
« Usability testing is the killing field of cherished notions»
- David Orr
62
![Page 63: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/63.jpg)
Usability tests are about watching one person at a time try to use something to do typical tasks so you can detect and fix the things that confuse or frustrate them.
![Page 64: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/64.jpg)
Twitter: @myriamjessier
![Page 65: Ux and usability it's no PICNIC](https://reader034.fdocuments.net/reader034/viewer/2022052318/587fa9ab1a28ab825e8b7a65/html5/thumbnails/65.jpg)
"Ahoy ye landlubbers - get on board of the Usability debate! Scrub your apps and set ye sails for your users. This talk lets you walk the plank for the biggest UX pitfalls and gives you a treasure map of how you can make apps that your users will sail across oceans for"
65