Nog niet zo heel lang geleden vroeg de Ambrassade ons om 32 communicatiemedewerkers uit de jeugdsector in te wijden in de geheimen van de Informatie-architectuur. Naast een stevige inleiding over usability kwamen we terecht bij de 10 concepten die een Informatie architect mee moet hebben.

1. CRASH COURSE
In Informatie-architectuur

2. Hallo!
Ik ben Hannes.

4. Informatie architectuur

7. Enkele projecten waar ik aan meewerkte...

10. Waarom is usability belangrijk?
Iedereen wordt er blijer van.

11. Usability... wat is dat eigenlijk?

12. “Iets is gebruiksvriendelijk wanneer een beoogde
eindgebruiker het effectief, efficiënt en naar
tevredenheid kan gebruiken.”
Wikipedia

21. Gebruiksvriendelijk...
‣
Eenvoudig te leren
‣
Efficiënt in gebruik
‣
Makkelijk onthouden hoe het werkt
‣
Fouten voorkomend en duidelijke feedback
‣
‘Plezant’ om te gebruiken

23. Soms een evenwicht zoeken..

24. Eenvoudig te leren?

25. Het belang van gebruikerstesten...

28. Basisprincipes
Waar moet je zéker op letten?

29. 6
consistentie
toegankelijkheid
typografie
technologie
snelheid
inhoud

30. 1. Consistentie

31. Verwachtingen
‣
Logo
‣
Navigatie
‣
Taalselectie
‣
Broodkruimel
‣
Home-knop
‣
Zoekveld

33. Logo
‣
Links boven
‣
Link naar homepage
‣
Optioneel met tagline

35. Taalselectie
‣
Rechts boven
‣
ISO (NL - FR - DE)
‣
Toon alle opties, ook de actieve taal
‣
Geen vlagjes!

37. Home-knop
‣
Eerste knop in hoofdnavigatie
‣
Altijd ‘home’

39. Navigatie
‣
Hoofdnavigatie horizontaal bovenaan
‣
Subnavigatie links
‣
Vermijden: onderaan of rechts

40. Secundaire navigatie
‣
Helemaal onderaan, in de footer
‣
Privacy statement, disclaimer, sitemap

42. Broodkruimel
‣
Toont actieve pagina in hiërarchie
‣
Onder de hoofdnavigatie
‣
Klikbaar, behalve actieve pagina
‣
Zonder ‘je bent hier: ’

44. Zoekveld
‣
Rechts boven
‣
Gevaarlijk!
‣
Bezoekers verwachten Google-niveau

46. Consistentie geeft houvast
Het is duidelijk
‣
waar je vandaan kwam
‣
waar je nu bent
‣
waar je naartoe kan gaan
in de visuele taal die andere websites ook
spreken

47. 6
✔ consistentie
toegankelijkheid
typografie
technologie
snelheid
inhoud

48. 2. Typografie

49. Mensen schrijven meer naar
elkaar dan ze bellen.
“The web is text.”

50. Leeslengte
‣
Ideaal: tot ongeveer 55 karakters per regel
‣
Flexibele layout: gebruik maximumbreedte

53. Lettergrootte
‣
Minstens 14px
‣
Moderne browsers schalen alles
‣
“ A A A ” is overbodig

54. Geschreefd of schreefloos?
Op een scherm: schreefloos (sans-serif)
Ed ut perspiciatis unde
omnis iste natus error sit
voluptatem accusantium
doloremque laudantium.
Ed ut perspiciatis unde
omnis iste natus error sit
voluptatem accusantium
doloremque laudantium.

55. 6
✔ consistentie
toegankelijkheid
✔ typografie
technologie
snelheid
inhoud

56. 3. Snelheid

57. Wat volgt is de hoeveelheid tijd
die een bezoeker wil spenderen
om uit te zoeken hoe een website
werkt:

58. 0

59. Bezoekers hebben geen geduld
‣
Snel laden (technisch)
‣
Focus (inhoud)
‣
Scanbaar (structuur)

60. Korte quiz

65. 6
✔ consistentie
toegankelijkheid
✔ typografie
technologie
✔ snelheid
inhoud

66. 4. Toegankelijkheid

67. Bouw een toegankelijke website
‣
Cross-browser, cross-platform
‣
Anysurfer
‣
Google

68. Cross-browser, cross-device
‣
IE8, IE9, Chrome, Firefox, ...
‣
tablets & smartphones!
‣
muis en keyboard of touch
‣
Webstandaarden!

72. Anysurfer
‣
Kwaliteitslabel
‣
Website toegankelijk voor iedereen,
ook voor mensen met een
functiebeperking

73. Google
‣
Grootste bron van traffiek
‣
SEO!

74. 6
✔ consistentie
✔ toegankelijkheid
✔ typografie
technologie
✔ snelheid
inhoud

75. 5. Technologie

76. Altijd nieuwe technologie
‣
Flash
‣
Ajax
‣
Video
‣
HTML 5

77. Technologie mag geen drijfveer zijn.
Denk na over de
waarde.

79. 6
✔ consistentie
✔ toegankelijkheid
✔ typografie
✔ technologie
✔ snelheid
inhoud

80. 6. Inhoud

81. Vers en fris!

82. Een website is zoals ondergoed.
Ververs elke dag.

83. Publiceer op regelmatige basis
‣
Kies relevante onderwerpen
‣
Relevant nieuws
‣
SEO vs. bezoeker

84. Hou statische inhoud vers
‣
Schrap pagina’s die niet bezocht worden
‣
Kijk af en toe of inhoud nog up-to-date is
‣
SEO vs. bezoeker

85. Publiceren, updaten, ...
Iedere keer langs IT-dienst of webbouwer?

87. CMS
‣
Content Management System
‣
De motor van de website
‣
Makkelijk zélf inhoud bewerken
‣
SEO!

90. Een CMS moet je toelaten om het dagelijkse
beheer van je website onafhankelijk en
zonder technische kennis uit te voeren.

91. 6
✔ consistentie
✔ toegankelijkheid
✔ typografie
✔ technologie
✔ snelheid
✔ inhoud

92. Dus die 6 basisprincipes toepassen en we
zijn er?

93. Bijna.

94. De gebruiker staat centraal
‣
Ontwerpen & bouwen
‣
Observeren
‣
Optimaliseren

95. IA mindset
Magic that happens in an IA-brain.

96. User-centered werken
‣
Aandacht voor eindgebruiker
‣
Testen met échte gebruikers
‣
Duurzaam
‣
Kwaliteit

97. Toptaken
‣
Welke 5 zaken komen bezoekers voor
‣
Liefst met enquête, analytics data én met
KeyWordResearch
‣
Vaak: openingsuren en adresgegevens

98. Verzamelen en schrappen
‣
Leg alles op een hoop
‣
Prioriseer en ontdubbel
‣
Schrap!
‣
Maak je boomstructuur

99. 10 geheime aandachtspunten
Aan de slag!

100. Hoofdnavigatie
‣
Toptaken!
‣
About page?
‣
Actieknop
‣
Liefst 5 max 7

101. Elke pagina = startpagina
‣
Dankzij Google
‣
Waar ben ik, waar ga ik naartoe
‣
Belang van de homepage
‣
Related content

102. Overzicht-Detail
‣
Blijf gefocust
‣
Kiezen of lezen
‣
Compenseren met ‘related’
‣
eindig met CTA (like, volg, koop)

103. Call To Action
‣
Onderaan
‣
Verschillend qua uitzicht
‣
Text: WAT - DOEN
‣
moet niet altijd kopen zijn

104. Footer
‣
Voor wie de weg kwijt is
‣
Voor wat anders in de weg staat
‣
Algemene engagement (nieuwsbrieffacebook)

105. Formulieren
‣
Onder elkaar
‣
text-form-text-form
‣
Geen afleiding
‣
Enkel wat strikt* nodig is

106. Mobile first/Mobile in mind
‣
Altijd alles onder elkaar: hiërarchie
‣
Leeslengte op grote schermen
‣
Navigatiepatronen
‣
Durven weglaten.

107. Relevante filters
‣
Zo weinig mogelijk
‣
In de juiste volgorde
‣
Combineer tot nieuwe
‣
Haal ze uit een API

108. De rechter kant
‣
Wordt nauwelijks bekeken
‣
Mobiele surfers
‣
Alternatieven: nog op vallender, minder
noodzakelijk (bijv. filters)

109. Homepage
‣
Keuzepagina van de volledige website
‣
Wel erg emotioneel
‣
Branden-direct trafiek
‣
AIDA

110. Meten is weten
Nee, echt waar.

111. Een website is zoals een schip

112. Meten, evalueren, bijsturen
1. Statistieken
2. Expert audit
3. Gebruikerstest

113. 1. Statistieken
‣
Google Analytics
‣
Hoeveel, van waar, welk pad, ...
‣
Kwantiteit, geen kwaliteit
‣
Continu
‣
Gratis (doe-het-zelf)

114. 2. Expert audit
‣
Analyse van bestaande website
‣
Basisfouten komen naar boven
‣
Toetsing aan de theorie
‣
Praktisch advies en tips

115. 3. Gebruikerstest
‣
Ervaren van échte gebruikers
‣
Toetsing aan de praktijk
‣
Ideale methode
‣
Praktisch advies en tips

116. Conclusie
‣
Begin met een goeie strategie
‣
Bezoekers aantrekken heeft alleen
zin bij optimale usability!
‣
Usability beïnvloedt conversie
‣
Meten is weten

117. ‣
http://www.goodui.org