ux: what not to do
DESCRIPTION
5/22/12 SkillShare ClassTRANSCRIPT
![Page 1: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/1.jpg)
UX: What Not to DoCommon user experience mistakes
May 22nd, 2012
![Page 2: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/2.jpg)
Rob SurrencyUser Experience Designer, AKQA@robsurrency
Max MinerAssociate User Experience Designer, AKQA@MxMnr
Who are we
May 22nd, 2012
![Page 3: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/3.jpg)
What is User Experience?
May 22nd, 2012
![Page 4: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/4.jpg)
May 22nd, 2012
UX designers work to create experiences that are “useful, usable, desirable, and differentiated.”
![Page 5: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/5.jpg)
What not to do
![Page 6: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/6.jpg)
1.0 Don’t make me think
![Page 7: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/7.jpg)
Example
May 22nd, 2012
![Page 8: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/8.jpg)
May 22nd, 2012
1.0 Don’t make me think
• Provide clear calls to action
• Give easy to understand instructions
• Keep options focused
• Do the heavy lifting for the user
![Page 9: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/9.jpg)
May 22nd, 2012
Example
![Page 10: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/10.jpg)
May 22nd, 2012
Example
![Page 11: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/11.jpg)
2.0 Don’t overloadcontent
![Page 12: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/12.jpg)
May 22nd, 2012
Example
![Page 13: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/13.jpg)
May 22nd, 2012
2.0 Don’t overload content
•Provide a clear hierarchy
•Make content easy to scan and digest
•Only show what’s needed
•Let the users have control
![Page 14: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/14.jpg)
May 22nd, 2012
Example
![Page 15: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/15.jpg)
3.0 Don’t confusethe navigation
![Page 16: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/16.jpg)
May 22nd, 2012
Example
![Page 17: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/17.jpg)
May 22nd, 2012
3.0 Don’t confuse the navigation
• Make labels clear and distinct
• Limit the number of navigational items
• Structure navigation based on the user’s needs
• Keep interactions subtle
![Page 18: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/18.jpg)
May 22nd, 2012
Example
![Page 19: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/19.jpg)
May 22nd, 2012
Example
![Page 20: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/20.jpg)
4.0 Don’t complicate workflows
![Page 21: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/21.jpg)
May 22nd, 2012
4.0 Don’tcomplicateworkflows
• Limit the number of steps
• Show the steps
• Indicate user progress
• Make it easy to go back
![Page 22: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/22.jpg)
May 22nd, 2012
Example
![Page 23: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/23.jpg)
May 22nd, 2012
Example
![Page 24: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/24.jpg)
5.0 Don’t forget user feedback
![Page 25: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/25.jpg)
May 22nd, 2012
Example
![Page 26: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/26.jpg)
May 22nd, 2012
5.0 Don’t forget user feedback
• Always provide users a way to give feedback
• Make it persistent and easy to access
• Be proactive - ask for it
• Listen and respond
![Page 27: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/27.jpg)
May 22nd, 2012
Example
![Page 28: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/28.jpg)
May 22nd, 2012
Example
![Page 29: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/29.jpg)
6.0 Don’t hide Help& Contact
![Page 30: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/30.jpg)
May 22nd, 2012
6.0 Don’t hide Help & Contact
• Provide multiple help & contact calls-to-action
•Makethempersistentandeasytofind
• Provide a robust support center
• Give several ways to get in touch
![Page 31: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/31.jpg)
May 22nd, 2012
Example
![Page 32: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/32.jpg)
May 22nd, 2012
Example
![Page 33: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/33.jpg)
7.0 Don’t deceive your users
![Page 34: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/34.jpg)
May 22nd, 2012
Example
![Page 35: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/35.jpg)
May 22nd, 2012
7.0 Don’t deceive your users
• Be ethical - don’t use ‘dark patterns’
• Be transparent
• Explain why user information is needed
• Remember the Golden Rule
![Page 36: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/36.jpg)
May 22nd, 2012
Example
![Page 37: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/37.jpg)
May 22nd, 2012
Example
![Page 38: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/38.jpg)
8.0 Don’t forget design basics
![Page 39: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/39.jpg)
May 22nd, 2012
Example
![Page 40: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/40.jpg)
May 22nd, 2012
8.0 Don’t forget design basics
• Structure your design with grids
• Know your color theory
• Design with affordances
• Take care with your typography
![Page 41: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/41.jpg)
May 22nd, 2012
Example
![Page 42: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/42.jpg)
May 22nd, 2012
Example
![Page 43: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/43.jpg)
9.0 Don’t overuse features
![Page 44: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/44.jpg)
May 22nd, 2012
Example
![Page 45: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/45.jpg)
May 22nd, 2012
9.0 Don’t overuse features
• ‘Flashy’ doesn’t always mean functional
•Definetheendgoal
• Make sure each feature has a purpose
• Understand each feature and it’s implications
![Page 46: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/46.jpg)
May 22nd, 2012
Example
![Page 47: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/47.jpg)
UX: What not to doRecap
1. Make me think
2. Overload content
3. Confuse the navigation
4.Complicateworkflows
5. Forget user feedback
Don’t...
6. Hide help & contact
7. Deceive your users
8. Forget design basics
9. Overuse features
May 22nd, 2012
![Page 48: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/48.jpg)
Workshop
![Page 49: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/49.jpg)
The Set Up
10 Groups3 People per group
May 22nd, 2012
![Page 50: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/50.jpg)
The Task:
Now, knowing what not to do - how would you improve these
experiences?
May 22nd, 2012
![Page 51: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/51.jpg)
The Scenarios:
1. eBay product detail page (groups 1 & 2)
2. Hulu video page (groups 3 & 4)
3.myspaceprofilepage(groups 5 & 6)
4.HuffingtonPosthomepage(groups 7 & 8)
5. Facebook search (groups 9 & 10)
May 22nd, 2012
![Page 52: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/52.jpg)
Questions?
May 22nd, 2012
![Page 53: UX: What Not to Do](https://reader034.vdocument.in/reader034/viewer/2022052505/5555ff94d8b42a3f168b4602/html5/thumbnails/53.jpg)
Rob SurrencyUser Experience Designer, AKQA@robsurrency
Max MinerAssociate User Experience Designer, AKQA@MxMnr
Thank You.
May 22nd, 2012