An introduction to Usability

18,562 views
18,731 views

Published on

A basis introduction to usability with examples & how to's.

Published in: Design
4 Comments
42 Likes
Statistics
Notes
No Downloads
Views
Total views
18,562
On SlideShare
0
From Embeds
0
Number of Embeds
3,314
Actions
Shares
0
Downloads
549
Comments
4
Likes
42
Embeds 0
No embeds

No notes for slide

An introduction to Usability

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

×