10 practical and hands-on tips to make your website more usable.

1. A website that works
Titel tekst
10 tips for a
usable website
Beschrijving slide
Bart De Waele - 22/6/2008

2. Hi! My name is Bart

3. I work at webagency Netlash
and at a startup called MetaTale:

4. This is my son Kobe

5. I’m passionate about coffee

6. You can find me at:
www.ondernemeringent.be
www.netlash.com
www.metatale.eu
www.kobedewaele.be
www.kopjekoffie.be
(Yes, that’s a lot of www)

7. A website that works
10 tips for a usable website

8. Any new technology knows 3 waves:
copy translate own

9. The web is finding its own language
it’s not a brochure
it’s not a videoclip
it’s certainly not radio (podcast is dead)

10. No 10 tips
(lots more)

11. I’ll give you
8 basic principles

12. 8
consistency content
typography accessibility
portability technology
speed interaction

13. 8
consistency content
typography accessibility
portability technology
speed interaction

14. 1. Consistency

15. 1. Consistency
Expectations
logo breadcrumb searchbox language
‘home’ disclaimer navigation

16. 1. Consistency

17. 1. Consistency
You are here

18. 1. Consistency
Logo
Top left
With tagline (optional)
With link to homepage

20. 1. Consistency
Language
Top left, below the logo
ISO (NL-FR-EN)
Show all options

21. 1. Consistency
Home
First in main navigation, or in logo
Is expected
English terminology is ok!

22. 1. Consistency
Breadcrumb
Below main navigation
Shows the travelled path
Clickable, except last item

23. 1. Consistency
Searchbox
Top right
Dangerous!
User expects Google...

24. 1. Consistency
Navigation
Preferably top horizontal
Subnavigation at the left
Not done: right or bottom

25. 1. Consistency
Secondary navigation
Bottom, in footer
Privacy statement, sitemap
For bigger sites: contact webmaster, about

26. 1. Consistency
Consistency gives people grip
It’s clear for them:
- where they came from
- where they are now
- where they can go
In a visual language they know from other sites

27. 1. Consistency
You are here

28. 8
consistency content
typography accessibility
portability technology
speed interaction

29. 2. Typography
http://www.flickr.com/photos/dmitry-baranovskiy/489116782/

30. 2. Typography
The web is text
For the moment, people are still
writing more to each other
than they are using the phone

31. 2. Typography
Line length
No infinitely long lines
+- 55 characters per line
So: no liquid design

32. 2. Typography New York Times

33. 2. Typography Smashing magazine

34. 2. Typography
Scalable fonts
Let users scale fonts themselves
No pixel values (use relative)
a-A is nothing more than a band aid

35. 2. Typography
Serif or Sans-serif?
On screen: sans-serif.
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam
nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat
erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation
tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
consequat. Duis autem vel eum iriure dolor in hendrerit in Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse
vulputate velit esse molestie consequat, vel illum dolore eu feugiat molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros
nulla facilisis at vero eros et accumsan et iusto odio dignissim qui et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril
blandit praesent luptatum zzril delenit augue duis dolore te feugait delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum
nulla facilisi. Nam liber tempor cum soluta nobis eleifend option soluta nobis eleifend option congue nihil imperdiet doming id quod
congue nihil imperdiet doming id quod mazim placerat facer mazim placerat facer possim assum. Typi non habent claritatem insitam;
est usus legentis in iis qui facit eorum claritatem. Investigationes
possim assum. Typi non habent claritatem insitam; est usus
demonstraverunt lectores legere me lius quod ii legunt saepius. Claritas
legentis in iis qui facit eorum claritatem. Investigationes
est etiam processus dynamicus, qui sequitur mutationem consuetudium
demonstraverunt lectores legere me lius quod ii legunt saepius.
lectorum. Mirum est notare quam littera gothica, quam nunc putamus
Claritas est etiam processus dynamicus, qui sequitur mutationem

36. 8
consistency content
typography accessibility
portability technology
speed interaction

37. 3. Portability

38. 3. Portability
Mohammed and the mountain
Don’t try to lure visitors to your website
Spread your content to those places
that already have visitors

39. 3. Portability

40. 3. Portability
Presentation

41. 3. Portability

42. 3. Portability
Presentations

43. 3. Portability
RSS
RSS = Really Simple Syndication
Makes content portable
http://nl.wikipedia.org/wiki/Really_Simple_Syndication

44. 3. Portability
API
API = Application Programming Interface
Gives third parties access to your data
http://nl.wikipedia.org/wiki/Application_Programming_Interface

45. 8
consistency content
typography accessibility
portability technology
speed interaction

46. 4. Speed

47. 4. Speed
Visitors are impatient
Load fast (technical speed)
To the point (speed of content)
Scannable (structural speed)

48. 4. Speed
Test!
http://www.websiteoptimization.com/services/analyze/

49. 8
consistency content
typography accessibility
portability technology
speed interaction

50. 5. Content

51. 5. Content
New!

52. 5. Content

53. 5. Content
“A website is like underwear.
Refresh each day.”

54. 5. Content
Publish on a regular basis
Follow a set pattern
Value and relevancy
News

55. 5. Content
CMS
Use a Content Management System.
Update your website: NOT via IT!

56. 8
consistency content
typography accessibility
portability technology
speed interaction

57. 6. Accessibility

58. 6. Accessibility
Build an accessible site
Usable
Cross-browser and cross-platform
Anysurfer
Google

59. 6. Accessibility
Usable
User centered design
User testing
Usability

60. 6. Accessibility
Cross-browser
Works on PC/Apple/Linux
Works on IE/Firefox/Safari/Opera
Don’t forget mobile!

61. 6. Accessibility
Anysurfer
http://www.anysurfer.be

62. 6. Accessibility
Google
Biggest traffic driver
SEO-friendly!

63. 8
consistency content
typography accessibility
portability technology
speed interaction

64. 7. Technology

65. 7. Technology
There will always be new technology
Flash - Flex - Air
AJAX
Podcast
Video

66. 7. Technology
Technology should not be a driver
Think hard about the added value

67. 8
consistency content
typography accessibility
portability technology
speed interaction

68. 8. Interaction

69. 8. Interaction
Let your audience participate
Tests, applications, forms
Feedback mechanisms (rating, review)
Comments, forum
Let them even contribute content! (Ooooh!)

70. Hey Bart!
What about that
Web 2.0 thing?

71. 9
consistency content
typography accessibility
portability technology
speed interaction
web 2.0

72. 9. Web 2.0

73. 9. Web 2.0
Web 2.0 removes the artificial membrane
between the organisation and the public.

74. 9. Web 2.0
quot;Web 2.0 is an architecture
of participationquot;
TIM O’REILLY

75. 9. Web 2.0

76. 9. Web 2.0

77. 9. Web 2.0

78. 9. Web 2.0
Web 2.0 is not a look
Gradients
Pastel colors
Rounded corners

79. 9. Web 2.0
Web 2.0 = people
Site-centric
User-centric

80. 9. Web 2.0 The ‘Soylent Green’ moment

81. 9. Web 2.0 The ‘Soylent Green’ moment
The web is
people

82. The web is used
by people

83. Real people, not ‘users’

84. People with children

85. People with passions

86. Web 2.0
Web 2.0 = people
So treat them as
people:
conversation

87. 9. Web 2.0
Conversation

88. (Ok, so maybe there
are 10 tips after all)

89. 10
consistency content
typography accessibility
portability technology
speed interaction
web 2.0 conversation

90. Questions?

91. Bart de Waele
bart@netlash.com
www.netlash.com
www.ondernemeringent.be
Bart De Waele - 22/6/2008