1. Een websitetekst werkt
Titel die
10 tips voor een
gebruiksvriendelijke website
Beschrijving slide
Haal het maximum uit het web - 24/6/2008

2. Goeiemiddag! Ik ben Bart

3. Ik werk bij webbureau Netlash
en bij een startup die MetaTale heet

4. Dit is mijn zoon Kobe

5. Mijn grote passie is koffie

6. Je vindt me hier:
www.ondernemeringent.be
www.netlash.com
www.metatale.eu
www.kobedewaele.be
www.kopjekoffie.be
(Ja, dat zijn heel wat www’s)

7. Een website die werkt
10 tips voor een
gebruiksvriendelijke website

8. Nieuwe technologie: drie golven
kopiëren vertalen eigenheid

9. Het web vindt zijn eigen taal
géén brochure
géén videoclip
zeker géén radio (podcast is dead)

10. Géén 10 tips
(veel meer)

11. 8
consistentie toegankelijkheid
typografie snelheid
draagbaarheid technologie
inhoud interactie

12. 8
consistentie toegankelijkheid
typografie snelheid
draagbaarheid technologie
inhoud interactie

13. 1. Consistentie

14. 1. Consistentie
Verwachtingspatronen
logo breadcrumb zoekbox taalkeuze
‘home’ disclaimer navigatie

15. 1. Consistentie

16. 1. Consistentie
U bent hier

17. 1. Consistentie
Logo
Links bovenaan
Eventueel met tagline
Met link naar homepage

19. 1. Consistentie
Taalkeuze
Links bovenaan, onder logo
ISO-aanduiding (NL-FR-EN)
Alle opties tonen

20. 1. Consistentie
Home
Als eerste in hoofdnavigatie, of in logo
Wordt altijd verwacht
Engelse term is ok!

21. 1. Consistentie
Breadcrumb
Onder de hoofdnavigatie
Duidt het afgelegde pad aan
Klikbaar, behalve laatste item

22. 1. Consistentie
Zoekbox
Rechts bovenaan
Gevaarlijk!
Gebruiker verwacht Google...

23. 1. Consistentie
Navigatie
Liefst horizontaal bovenaan
Subnavigatie in linkerkolom
Zeker niét rechts of onderaan

24. 1. Consistentie
Secundaire navigatie
Onderaan, in footer
Idem: privacy statement, sitemap
Bij grote sites ook: contact webmaster, about

25. 1. Consistentie
Consistentie geeft mensen houvast
Het is duidelijk:
- waar ze vandaan kwamen
- waar ze nu zijn
- waar ze naar toe kunnen
In een visuele taal die ze van andere sites kennen

26. 1. Consistentie
U bent hier

27. 8
consistentie toegankelijkheid
typografie snelheid
draagbaarheid technologie
inhoud interactie

28. 2. Typografie
http://www.flickr.com/photos/dmitry-baranovskiy/489116782/

29. 2. Typografie
Het web is tekst
Er wordt op dit moment nog steeds
méér naar elkaar geschreven dan er
met elkaar getelefoneerd wordt

30. 2. Typografie
Leeslengte
Géén oneindig lange regels
+- 55 karakter per regel
Dus: géén liquid design

31. 2. Typografie New York Times

32. 2. Typografie Smashing magazine

33. 2. Typografie
Schaalbare lettertypes
Laat mensen zelf vergroten
Geen pixelwaarde (wel relatief)
a-A is een pleister

34. 2. Typografie
Serif of Sans-serif?
Op het scherm: schreefloos
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

35. 8
consistentie toegankelijkheid
typografie snelheid
draagbaarheid technologie
inhoud interactie

36. 3. Draagbaarheid

37. 3. Draagbaarheid
Mohammed en de berg
Probeer niet om bezoekers te lokken naar jouw website
Verspreid jouw inhoud naar die plaatsen
waar er bezoekers zijn

38. 3. Draagbaarheid

39. 3. Draagbaarheid
Presentatie

40. 3. Draagbaarheid

41. 3. Draagbaar
Presentaties

42. 3. Draagbaarheid
RSS
RSS = Really Simple Syndication
Maakt inhoud draagbaar
http://nl.wikipedia.org/wiki/Really_Simple_Syndication

43. 3. Draagbaarheid
API
API = Application Programming Interface
Geef derden toegang tot je data
http://nl.wikipedia.org/wiki/Application_Programming_Interface

44. 8
consistentie toegankelijkheid
typografie snelheid
draagbaarheid technologie
inhoud interactie

45. 4. Snelheid

46. 4. Snelheid
Bezoekers zijn ongeduldig
Snel laden (technische snelheid)
To the point (inhoudelijke snelheid)
Scanbaar (structurele snelheid)

47. 4. Snelheid
Testen!
http://www.websiteoptimization.com/services/analyze/

48. 8
consistentie toegankelijkheid
typografie snelheid
draagbaarheid technologie
inhoud interactie

49. 5. Inhoud

50. 5. Inhoud
Nieuw!

51. 5. Inhoud

52. 5. Inhoud
“Een website is als ondergoed.
Elke dag vers is beter.”

53. 5. Inhoud
Publiceer regelmatig
Een vast patroon
Meerwaarde en relevantie
Actualiteit

54. 5. Inhoud
CMS
Gebruik een Content Management Systeem
Website beheren: NIET via IT!

55. 8
consistentie toegankelijkheid
typografie snelheid
draagbaarheid technologie
inhoud interactie

56. 6. Toegankelijkheid

57. 6. Toegankelijkheid
Bouw een toegankelijke site
Gebruiksvriendelijk
Cross-browser en cross-platform
Anysurfer
Google

58. 6. Toegankelijkheid
Gebruiksvriendelijk
User centered design
User testing
Usability

59. 6. Toegankelijkheid
Cross-browser / Cross-platform
Werkt op PC/Apple/Linux
Werkt op IE/Firefox/Safari/Opera
Vergeet mobiel niet!

60. 6. Toegankelijkheid
Anysurfer
Introductie nodig?
(Het vroegere Blindsurfer)
www.anysurfer.be

61. 6. Toegankelijkheid
Google
Grootste traffic driver
SEO-vriendelijk!

62. 8
consistentie toegankelijkheid
typografie snelheid
draagbaarheid technologie
inhoud interactie

63. 7. Technologie

64. 7. Technologie
Voortdurend nieuwe technologie
Flash - Flex - Air
AJAX
Podcast
Video

65. 7. Technologie
Technologie is géén driver
Goed nadenken over meerwaarde

66. 8
consistentie toegankelijkheid
typografie snelheid
draagbaarheid technologie
inhoud interactie

67. 8. Interactie

68. 8. Interactie
Laat doelgroep deelnemen
Test, applicaties, formulieren
Feedbackmechanismen (rating, review)
Commentaren, forum
Laat ze zelfs bijdragen aan de inhoud! (Oooh!)

69. Hé Bart!
En wat met dat hele
Web 2.0 ding?

70. 9
consistentie toegankelijkheid
typografie snelheid
draagbaarheid technologie
inhoud interactie
web 2.0

71. 9. Web 2.0

72. 9. Web 2.0
Web 2.0 neemt het artificiële membraan
tussen organisatie en publiek weg

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

74. 9. Web 2.0

75. 9. Web 2.0

76. 9. Web 2.0

77. 9. Web 2.0
Web 2.0 is geen ‘look’
Gradiënten
Pastelkleuren
Afgeronde hoeken

78. 9. Web 2.0
Web 2.0 = mensen
Site-centric
User-centric

79. 9. Web 2.0 Het ‘Soylent Green’ moment

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

81. Het web wordt
gebruikt door
mensen

82. Echte mensen, niet ‘users’

83. Mensen met kinderen

84. Mensen met passies

85. Web 2.0
Web 2.0 = mensen
Behandel ze dus als
mensen:
conversatie

86. 9. Web 2.0
Conversatie

87. (Ok, misschien zijn
er dan toch 10 tips)

88. 10
consistentie toegankelijkheid
typografie snelheid
draagbaarheid technologie
inhoud interactie
web 2.0 conversatie

89. Vragen?

90. Bart de Waele
bart@netlash.com
www.netlash.com
www.ondernemeringent.be
Haal het maximum uit het web - 24/6/2008