A visual presentation about the key to making great website experiences.

1. Usability,
navigation, and
accessibility
Christoffer Du Rietz

2. Me
Digital designer
• Interaction design
• Art Direction
• Mobile expert

3. Good usability, clear navigation,
and maximized accessibility are
the three cornerstones for
reaching your website goals.

4. Usability -
getting the user from
A to (where you want
them to) B
A 10 step program

5. 1
Donʼt make the user think

7. ?

9. ?

11. ?

12. Click to
visit!

13. Click to
visit!

14. 2
Donʼt test the users patience

16. ×

19. 3
Focus the users attention, and
then let them take action

25. 4
Strive for content and feature
exposure

26. Click to
visit!

30. 5
Use effective writing

33. Click to
visit!

34. 6
Strive for simplicity

36. Click to
visit!

39. 7
Embrace whitespace

46. 8
Use an effective visual
language; prioritize, cut, clarify
and be consistent

48. Click to
visit!

50. Click to
visit!

51. 9
Embrace conventions

53. But mind you, conventions
change quickly on the web.

54. 10
Test and improve, continually!

56. Navigation
Best practices

57. Navigation should be apparent,
and preferably give a hint of
website content

64. Most viable solutions
• Top and left navigation
• Top menu with drop-down, and left or
right navigation
• Left

67. Avoid duplicate content

68. Breadcrumbs - is your site more
than one level deep? Use it.

69. Dynamic loading of content via
Ajax is super, but donʼt break
the back-button or direct URLs

70. Click to
visit!

71. Click to
visit!

72. Pagination dead? Depends on
the content.

73. No pagination
=
Good!

74. Pagination
=
Good!

75. Balance your content structure

77. ?

80. Prioritize and weigh. Cut cut cut.

82. Accessibility
From a design perspective

83. Keep to structured, natural
layouts

84. Use sufficient contrast

85. Bad

86. Good

87. Great

88. Donʼt use Flash™, and make
sure your content and layout
degrades gracefully

89. With
flash

90. Without
flash

91. Provide text alternatives to all
non-text content

92. Provide a mobile version*
*but make sure you have a quick link to get to the
standard version

93. Great!

94. Get a developer whoʼs fluent in
accessibility standards

96. So, ideas?

97. Thank you!
Christoffer Du Rietz
christoffer.durietz@halvarsson.se
Twitter: @durietz