8 Critical Usability Tips Slideshare Post
-
date post
19-Sep-2014 -
Category
Technology
-
view
11 -
download
0
description
Transcript of 8 Critical Usability Tips Slideshare Post
![Page 1: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/1.jpg)
8 Critical Usability Tips: Quick low cost ways to get impressive results
John Whalen, PhDDirector, User Experience and Design, e.magination
![Page 2: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/2.jpg)
Usability Reviews and Usability Testing
![Page 3: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/3.jpg)
Top 8 Critical Usability Tips
Navigation
Content
Interaction
Persuasive Design
![Page 4: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/4.jpg)
Top 8 Critical Usability Tips
Navigation
Content
Interaction
Persuasive Design
![Page 5: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/5.jpg)
Tip 1: Navigation – KISS – Harder than you think…
![Page 6: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/6.jpg)
Tip 1: Navigation – KISS – Harder than you think…
Trying to describe 10 steps…
…but page has 42 links
…29 related to task at hand
…13 leaving page.
Where do I start??
Notice the numbering:4,5,6,7,8…4,5,6,7,8…4???
![Page 7: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/7.jpg)
Take a step back, think like the user
![Page 8: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/8.jpg)
Make an obvious first step
![Page 9: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/9.jpg)
Distinguish primary and secondary navigation
![Page 10: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/10.jpg)
Provide a table of contents
![Page 11: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/11.jpg)
Informal Test – Where should you click first?
30%Correct
30%Correct
e.magdesign
100%Correct
e.magdesign
100%Correct
![Page 12: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/12.jpg)
Tip 2: Navigation – Less is More
![Page 13: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/13.jpg)
Tip 2: Navigation – Less is More
2 sets of tabs…
Clickable buttons for navigation…
Clickable buttons for actions…
Clickable objects for navigation…
Large distance between question and “Next” button
Large distance between help and question
![Page 14: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/14.jpg)
Tip 2: Navigation – Less is More
NextNextPreviousPrevious
![Page 15: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/15.jpg)
NextNextPreviousPrevious
Informal Test – Which would you prefer?
8%8%
e.magdesign
92%
e.magdesign
92%
![Page 16: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/16.jpg)
Top 8 Critical Usability Tips
Navigation
Content
Interaction
Persuasive Design
![Page 17: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/17.jpg)
Top 8 Critical Usability Tips
Navigation
Content
Interaction
Persuasive Design
![Page 18: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/18.jpg)
Tip 3: Content – Provide visual clues that direct eyes.
![Page 19: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/19.jpg)
A B
0 Seconds
![Page 20: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/20.jpg)
A B
5 Seconds
![Page 21: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/21.jpg)
A B
15 Seconds
After 15 seconds, users “below the fold”
![Page 22: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/22.jpg)
Tip 4: Content – Create scan-able content
✓
![Page 23: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/23.jpg)
Users scan content in an “F” pattern
![Page 24: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/24.jpg)
They skip irrelevant content
![Page 25: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/25.jpg)
Top 8 Critical Usability Tips
Navigation
Content
Interaction
Persuasive Design
![Page 26: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/26.jpg)
Top 8 Critical Usability Tips
Navigation
Content
Interaction
Persuasive Design
![Page 27: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/27.jpg)
Tip 5: Interaction – Make the next step “duh” obvious
![Page 28: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/28.jpg)
Informal Test – Where should you click next?
6%Correct
6%Correct
Amazon
91%Correct
Amazon
91%Correct
![Page 29: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/29.jpg)
What makes it obvious?
• Distinct color• Size• Affordance (click-ability)• Next in user eye-flow• Absence of any other
items with that style• Consistency in
positioning
![Page 30: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/30.jpg)
Tip 6: Interaction – Search + Refine
![Page 31: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/31.jpg)
Do you prefer Search + Refine?
No 15%No 15%
Yes85%Yes85%
![Page 32: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/32.jpg)
Top 8 Critical Usability Tips
Navigation
Content
Interaction
Persuasive Design
![Page 33: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/33.jpg)
What makes it obvious?
• Distinct color• Size• Affordance (click-ability)• Next in user eye-flow• Absence of any other
items with that style• Consistency in
positioning
![Page 34: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/34.jpg)
Top 8 Critical Usability Tips
Navigation
Content
Interaction
Persuasive Design
![Page 35: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/35.jpg)
Tip 7: Persuasion – Invoke reciprocity, social validation, and similarity
Reciprocity: • Give things away.• Create an environment
where you contribute, then ask for something in return.
![Page 36: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/36.jpg)
Tip 7: Persuasion – Invoke reciprocity, social validation, and similarity
Social Validation: • You’re making the
right choice.• Lots of other people
choose this too.
![Page 37: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/37.jpg)
Tip 7: Persuasion – Invoke reciprocity, social validation, and similarity
Similarity: • People just like you choose us.
![Page 38: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/38.jpg)
Tip 8: Persuasion – Find the right social networks and provide thought leadership
Source: Forrester.com
![Page 39: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/39.jpg)
Tip 8: Persuasion – Find the right social networks and provide thought leadership
Develop a B.E.S.T. formula
• Behavioral: Everything you communicate is designed to change customer behavior
• Essential: Your communications really help your customers succeed in their jobs
• Strategic: Your content becomes a integral part of your business strategy
• Targeted: Target your content so that it is truly relevant to your clients.
![Page 40: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/40.jpg)
8 Critical Usability Tips
Navigation1. K.I.S.S. – Make the first step obvious2. Less is More – Remove unnecessary navigationContent3. Provide visual clues that direct eyes to next step4. Create scan-able contentInteraction5. Make the next step “duh” obvious6. Search + RefinePersuasion7. Invoke reciprocity, social validation, and similarity8. Find the right social networks and provide thought leadership
![Page 41: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/41.jpg)
Your Summer Reading List…
![Page 42: 8 Critical Usability Tips Slideshare Post](https://reader035.fdocuments.net/reader035/viewer/2022081412/541bf7507bef0a594d8b5909/html5/thumbnails/42.jpg)
THANK YOU!
John Whalen, PhD
Director, User Experience
Twitter: @johnwhalen
Email: [email protected]
LinkedIn: http://www.linkedin.com/in/johnwhalen
…or talk to us!