Exploring the world of UX
-
Upload
frederic-vandaele -
Category
Technology
-
view
231 -
download
3
description
Transcript of Exploring the world of UX
![Page 2: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/2.jpg)
Your
Expectations
![Page 3: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/3.jpg)
“UX is the Science
and Art of designing
a Product”
![Page 4: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/4.jpg)
4 Elements of UX
VALUE
Is it useful ?
USABILITY
Is it easy to use ?
ADOPTABILITY
Is it easy to start using ?
DESIRABILITY
Is it fun and engaging ?
![Page 5: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/5.jpg)
![Page 6: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/6.jpg)
Techniques
![Page 7: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/7.jpg)
Design techniques
![Page 8: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/8.jpg)
Card Sorting
• A method for determining how users
mentally group your website’s content
– Results are derived from the semantic networks
of the users
– Semantic networks are vast webs of connections
between concepts, determined by our learning and experiences
• 2 Types: Open & Closed
![Page 9: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/9.jpg)
The Card
Sorting game
![Page 10: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/10.jpg)
min
![Page 11: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/11.jpg)
PresentEasy
Difficult
Differences
Similarities
![Page 12: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/12.jpg)
Interactive Sketching Notation
• ISN fuses user actions and screen sketches
• Simple and standardized rules
– What the user see (greys, blacks and blues)
– What the user do (red)
Credits: Linowski Interaction Design http://www.linowski.ca/sketching
This work is licenced under the Creative Commons Attribution-Share Alike 2.5 Canada License
![Page 13: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/13.jpg)
ISN - Screens
![Page 14: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/14.jpg)
ISN – User Actions
![Page 15: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/15.jpg)
ISN – User Actions
![Page 16: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/16.jpg)
ISN – Variation & notes
![Page 17: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/17.jpg)
The ISN game
Describe a sale process on Amazon
– John is looking for a new TV
– With smart/internet feature
– “green” product
– Likes Sony (but not exclusive)
![Page 18: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/18.jpg)
min
![Page 19: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/19.jpg)
PresentEasy
Difficult
Differences
Similarities
![Page 20: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/20.jpg)
Wireframe
“Wireframe describes a web site or application
using black and white lines, text and boxes.”
• Extremely fast way of developing the layout,
navigation and usability of a website
• Quick and easy to change enabling the
creation of many variations at minimal cost
![Page 21: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/21.jpg)
Design process is like a conversation
![Page 22: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/22.jpg)
Wireframe game
Design a
“Book Your International
Flight”
order form
![Page 23: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/23.jpg)
min
![Page 24: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/24.jpg)
PresentEasy
Difficult
Differences
Similarities
![Page 25: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/25.jpg)
(Post) Prod techniques
![Page 26: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/26.jpg)
Usability Guidelines
247 web usability guidelinesDr. David Travis
The Research-Based Web Design & Usability Guidelines
Usability.gov
![Page 27: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/27.jpg)
Usability Guidelines
“Evaluate the form
designed by another group
in the previous game”
![Page 28: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/28.jpg)
min
![Page 29: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/29.jpg)
PresentEasy
Difficult
Differences
Similarities
![Page 30: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/30.jpg)
System Usability Scale• John Brooke (1986)
• The most used questionnaire for measuring
perceptions of usability
• 10 item questionnaire with 5 response
options
• Fixed response format
![Page 31: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/31.jpg)
Scoring SUS• For odd items = user response -1
• For even items = 5 - user response
• Add up and multiply by 2.5
• This create a 0 to 100 scale
• Average SUS score from all 500 studies is
68
![Page 32: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/32.jpg)
Other useful techniques• URL
• Personas
• Prototyping
• Eye tracking
• Heuristic Evaluation
• Microsoft Desirability Toolkit
• CSUQ, QUIS, SUMI, …
![Page 33: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/33.jpg)
One more thing …
![Page 34: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/34.jpg)
Your
Achievements
![Page 35: Exploring the world of UX](https://reader033.fdocuments.net/reader033/viewer/2022052321/55512b5ab4c905325d8b4a04/html5/thumbnails/35.jpg)
Go further• Usability.gov
• useit.com
• userfocus.co.uk