An introduction to Usability
•
41 likes•14,170 views
A basis introduction to usability with examples & how to's.
Recommended
Recommended
More Related Content
Viewers also liked
Similar to An introduction to Usability
Similar to An introduction to Usability (20)
Recently uploaded
Recently uploaded (20)
An introduction to Usability
- 1. Don’t make me think
- 3. Erlend Debast Web designer at Proximity BBDO erlend.debast@proximity.bbdo.be twitter.com/erlend artueel.be
- 4. Us•a•bil•i•ty “... is the effectiveness, efficiency, and satisfaction with which users can achieve tasks in a particular environment of a product.”
- 5. Bringing ease, joy and fun to the people around us.
- 7. Internet has become part of our daily lives. Yet, with very poor usability.
- 8. 4 common situations & solutions
- 9. 5 actually 4 common situations & solutions
- 10. 1 Where the hell am I
- 11. Site logo ★ Is expected “top-left” ★ Clickable, back to home
- 12. Near-perfect
- 13. Goes back to home or news?
- 14. “Home” ★ Is expected ★ First item in main navigation ★ English terminology is accepted
- 15. Home is first & selected
- 16. First item & selected
- 17. Main Navigation ★ Is expected (horizontal) ★ Limit the number of items ★ “Selected” status
- 19. Lovely icons Clearly selected
- 20. Sub Navigation ★ Is expected (vertically) ★ Close to main navigation ★ Selected status
- 21. Close to main nav clearly selected
- 22. Breadcrumbs ★ Indicates “traveled” path ★ Show site/content hierarchy ★ Alternative way of going “back”
- 24. Plain & Simple
- 25. Language ★ Expected near main navigation ★ ISO Standards (NL-FR-EN) ★ Indicate current language
- 27. top right, but not selected
- 28. 2 I can’t find what I’m looking for...
- 29. Typography ★ Difference between titles & paragraphs ★ Links should look like links ★ Use colors & fonts to show importance
- 30. Titles orange links in blue Price in red Meta information in grey
- 31. Sans-font Clear CTA italic for quotes
- 32. Copywriting ★ Use keywords for titles (Google loves that too) ★ Match navigation & page titles ★ Avoid duplicate content ★ Group your content, wisely
- 33. Keywords as navigation Selected
- 34. Whitespace ★ Use whitespace to create structure ★ More screensize doesn’t mean more content ★ Whitespace is sexy
- 37. Search box ★ Expected top-right ★ Average search query is 35 chars
- 38. Top right as exptected
- 40. 3 What’s next please?
- 41. Forms ★ Default OS design is expected ★ Different length for each input format ★ Pre-format input fields/data
- 42. Where is home? This ain’t default
- 43. this field is needed Length that matches input
- 44. Error recovery ★ Show what the user did wrong ★ Indicate how they can fix the mistake ★ Stop punishing your users ★ Use inline errors with care
- 45. Inline errors Default design
- 46. Interactive inline error Obvious Red color to CTA indicate error
- 47. Progress ★ Show a process indicator ★ People love making progress ★ Group your information (obvious vs personal)
- 48. 3 clear steps Selected Default design What happens with my info?
- 49. 4 Where should I click?
- 50. Call to action’s ★ People should know how to join ★ People should know why to join ★ Consistent style for your CTA’s
- 51. Consistent style
- 52. Consistent style
- 53. Consistent style Color usage baby!
- 54. 5 The ever-lasting “above the fold” discussion
- 55. Life below the fold ★ People scroll, yes they do ★ Your lay-out should look “cut” ★ Make your footer usable
- 56. 37signals
- 57. Search as backup Contact us information
- 58. Functional sitemap Switch language
- 59. product Line up
- 60. Get to know your audience
- 61. It takes between 2 & 5 people to fix 70% of the most common usability issues.
- 62. Share your site statistics with all the people involved. Not only with marketing.
- 63. A usable website can result in higher ROI
- 65. Erlend Debast Web designer at Proximity BBDO erlend.debast@proximity.bbdo.be twitter.com/erlend artueel.be