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

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.

6. Usability is
Anger Management

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

18. Simple &
straightforward

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”

23. Shows
traveled path

24. Plain
& Simple

25. Language
★ Expected near main navigation
★ ISO Standards (NL-FR-EN)
★ Indicate current language

26. Top right
& selected

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

39. Close the
navigation

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

64. Everyone’s happy!

65. Erlend Debast
Web designer at Proximity BBDO
erlend.debast@proximity.bbdo.be
twitter.com/erlend
artueel.be