introduction to user experience - mike biggs
TRANSCRIPT
![Page 1: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/1.jpg)
DEMYSTIFYING USER EXPERIENCE
An introduction to UX with @MetaMikeBiggs
![Page 2: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/2.jpg)
A BIT ABOUT ME
2
Mike Biggs
Instigator, Digital Strategist, Product Innovator, Management Consultant, Agilist, Lean UXer….. essentially a T-shaped person.
Places and projects:
▫︎Currently work at ThoughtWorks
▫︎Previously worked in digital agencies, NSW Government, Freelance..
▫︎Clients (past & current) include: CommBank, Vodafone, Macquarie Bank, Perpetual, Toshiba, MTV, VMware, The Rocks/Darling Harbour Precincts, Gatorade…
▫︎ Interesting stuff I’ve done: an Instagram rip-off, Hackathon Mentoring, Smart forms (that’s right, forms are interesting!), Soccer viewing iPad app.
![Page 3: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/3.jpg)
Your experience of tonight is governed by your expectations as
much as what is actually delivered.
3
![Page 4: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/4.jpg)
A BIT ABOUT YOU
4
Tell me about yourselves:
▫︎Developer vs design folk
▫︎Delivery vs business people
▫︎New vs seasoned
![Page 5: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/5.jpg)
WHAT YOU’LL LEARN
5
!
▫︎Understand what we mean when we talk about UX (User Experience)
▫︎Where has it come from? - the need of humans…
▫︎Where it lives
▫︎ The UX process
▫︎What are the deliverables
▫︎ Environments
▫︎What Next?
![Page 6: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/6.jpg)
UX HISTORY
6
1988
![Page 7: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/7.jpg)
UX HISTORY
7
1998
![Page 8: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/8.jpg)
WHAT IS UX?
8
!
ISO 9241-210 Human Centred Design
!
[1] defines user experience as "a person's perceptions and responses that result from the use or anticipated use of a product, system or service".
![Page 9: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/9.jpg)
WHAT IS UX?
9
!
“User experience has broadened into being: every single touchpoint your that forms your business -
your brand.”
-Velvet Onion
![Page 10: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/10.jpg)
WHAT IS UX?
10
![Page 11: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/11.jpg)
WHAT IS UX?
11
![Page 12: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/12.jpg)
WHAT IS UX?
12
![Page 13: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/13.jpg)
WHAT IS UX?
13
![Page 14: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/14.jpg)
WHAT IS UX?
14
![Page 15: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/15.jpg)
So..where does UX live?
15
![Page 16: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/16.jpg)
WHAT IS UX
16
Living in a Silo?
▫︎ An excellent structure for holding knowledge
▫︎ Also excellent at withholding knowledge
▫︎ Ensures UX is done RIGHT
▫︎Does not ensure UX is actually done
▫︎ IS a bottleneck
▫︎Does not address cultural change
▫︎ Commonly found in Waterfall environments
![Page 17: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/17.jpg)
WHAT IS UX
17
Cross functional UX?
▫︎ Everyone’s responsible
▫︎ Can also mean no one’s responsible
▫︎ Potential consistency issues
▫︎Huge cultural advantages
▫︎More common in mature Agile environments
![Page 18: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/18.jpg)
If UX is problem solving,
then a UX designer is a facilitator.
18
![Page 19: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/19.jpg)
What problem are we solving again?
19
![Page 20: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/20.jpg)
20
![Page 21: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/21.jpg)
WHAT IS UX
21
At its heart, UX design aims to solve the problem of usability.
Usability is defined by 5 quality components:
▫︎ Learnability: How easy is it for users to accomplish basic tasks the first time they encounter the design?
▫︎ Efficiency: Once users have learned the design, how quickly can they perform tasks?
▫︎ Memorability: When users return to the design after a period of not using it, how easily can they reestablish proficiency?
▫︎ Errors: How many errors do users make, how severe are these errors, and how easily can they recover from the errors?
▫︎ Satisfaction: How pleasant is it to use the design?
![Page 22: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/22.jpg)
WHAT IS UX
22
Examples: Good and Bad
▫︎ Login Sequence
![Page 23: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/23.jpg)
WHAT IS UX
23
Examples: Good and Bad
▫︎ Affordances / Cognitive load
![Page 24: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/24.jpg)
WHAT IS UX
24
Examples: Good and Bad
▫︎ Memorability / Satisfaction- Microinteractions
![Page 25: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/25.jpg)
WHAT IS UX
25
Examples: Good and Bad
▫︎ Memorability / Satisfaction- Microinteractions
![Page 26: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/26.jpg)
WHAT IS UX
26
Examples: Good and Bad
▫︎ Error Reporting
![Page 27: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/27.jpg)
WHAT IS UX
27
Examples: Good and Bad
▫︎ Persuasive design (copy)
![Page 28: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/28.jpg)
WHAT IS UX
28
Examples: Good and Bad
▫︎ Memorability - Navigation
![Page 29: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/29.jpg)
WHAT IS UX
29
Examples: Good and Bad
▫︎ Cross Channel
![Page 30: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/30.jpg)
WHAT IS UX
30
Examples: Good and Bad
▫︎ Labelling / IA - Also, Cognitive Load
![Page 31: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/31.jpg)
WHAT IS UX
31
Examples: Good and Bad
▫︎ Cross Channel
![Page 32: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/32.jpg)
Basically..
“Don’t make me think”
-Steve Krug
32
![Page 33: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/33.jpg)
THE UX PROCESS
33
![Page 34: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/34.jpg)
THE UX PROCESS
34
The 5 D’s
▫︎Discover
▫︎Define
▫︎Design
▫︎Develop
▫︎Deliver
![Page 35: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/35.jpg)
THE UX PROCESS
35
The Double Diamond:
![Page 36: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/36.jpg)
THE UX PROCESS
36
The Design Thinking Process:
![Page 37: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/37.jpg)
THE UX PROCESS
37
Discover Stage. Goal: To understand the User and their context.
Main contributor: User Researcher
Methods:
▫︎ Ethnographic research
▫︎ User diaries
▫︎ Interviews
▫︎ Card sort
Outputs:
▫︎ User stories & personas
▫︎ Problem statements
▫︎ Affinity diagrams
▫︎ Semantic Maps
![Page 38: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/38.jpg)
EXAMPLES OF ACTIVITIES DELIVERABLES
38
Ethnographic Research
![Page 39: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/39.jpg)
EXAMPLES OF ACTIVITIES DELIVERABLES
39
Empathy Maps
![Page 40: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/40.jpg)
EXAMPLES OF ACTIVITIES DELIVERABLES
40
Personas
![Page 41: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/41.jpg)
THE UX PROCESS
41
Define Stage. Goal: To define the high level requirements of any design output.
Contributors: Information Architect, Mythical UX Generalist, Project Manager, Product Manager.
Methods:
▫︎ Development of Product Requirements
▫︎ Define Information Architecture including Tree testing
▫︎ Project Plan development
!
Outputs:
▫︎ Product Requirements Document
▫︎ Tree testing report
▫︎ Project Plan
![Page 42: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/42.jpg)
THE UX PROCESS
42
Content Inventories & Sitemapping
![Page 43: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/43.jpg)
THE UX PROCESS
43
Design Stage. Goal: To design artefacts which address the problem as defined.
Contributors: Information Architect & Interaction Designer
Methods:
▫︎ Paper prototyping
▫︎ Digital Wireframing
▫︎ Explicit use of Usability Quality Metrics
▫︎ User Testing
▫︎ Visual Design Concepts
Outputs:
▫︎ Validated prototypes & wireframes
▫︎ Revised sitemap
▫︎ User flows
▫︎ UI designs
▫︎ Brand/ Marketing buy-in re visual design
![Page 44: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/44.jpg)
THE UX PROCESS
44
User Flows
![Page 45: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/45.jpg)
THE UX PROCESS
45
Think ‘views’ not pages
![Page 46: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/46.jpg)
THE UX PROCESS
46
Content Matrix
![Page 47: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/47.jpg)
THE UX PROCESS
47
Content Matrix
Pre Event At Event Post Event
Desktop
Mobile
![Page 48: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/48.jpg)
THE UX PROCESS
48
Paper Prototypes
![Page 49: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/49.jpg)
THE UX PROCESS
49
Wireframes
![Page 50: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/50.jpg)
THE UX PROCESS
50
Develop Stage. Goal: To build software that will deliver the design as intended.
Contributors: Primarily Developers
Methods:
▫︎ Technical Architecture design
▫︎ UML
▫︎ Setup testing environment
▫︎ Release management
!
Outputs:
▫︎ Actual code
▫︎ No ‘UX’ deliverables
!
![Page 51: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/51.jpg)
THE UX PROCESS
51
Deliver Stage. Goal: To release software to market.
Contributors: Primarily Developers
Methods:
▫︎ Test cases
▫︎ Testing
!!
Outputs:
▫︎ Test reports
▫︎ No ‘UX’ deliverables
!
![Page 52: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/52.jpg)
THE UX PROCESS
52
What is this process?
![Page 53: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/53.jpg)
ENVIRONMENTS
53
Environments:
▫︎Waterfall
▫︎ Agile
▫︎ Lean
![Page 54: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/54.jpg)
WHAT’S NEXT
54
Where is UX going?
▫︎ Product Management
▫︎ Service Design
▫︎ Industries/ contexts Where you can go:
▫︎Human Computer Interaction
▫︎ Lean Validation Board
▫︎Designing the organisation
![Page 55: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/55.jpg)
TOOLS & RESOURCES
55
▫︎ mockflow.com < I use this one- cheap, good and you can share wireframes with clients/stakeholders remotely
▫︎ balsamiq.com < popular
▫︎ http://www.optimalworkshop.com/ < A suite of tools for organising your Information Architecture, then testing it. Also includes a tool for rapidly testing early designs/ sketches called Chalkmark. Recommended.
▫︎ loop11.com < allows you to remotely track how a user response to a detailed wireframe or full website design.
▫︎ Human Computer Interaction cousre-https://www.coursera.org/course/hciucsd
▫︎ Lean Validation Board- for Startups and Product development, but is just as useful when addressing UX - https://www.leanstartupmachine.com/validationboard/
![Page 56: Introduction to User Experience - Mike Biggs](https://reader034.vdocuments.site/reader034/viewer/2022052316/55a524c71a28abd90e8b45c7/html5/thumbnails/56.jpg)
THANKSMike Biggs @MetaMikeBiggs ThoughtWorks
56