CRASH COURSE
In Informatie-architectuur
Hallo!
Ik ben Hannes.
Informatie architectuur
Enkele projecten waar ik aan meewerkte...
Waarom is usability belangrijk?
Iedereen wordt er blijer van.
Usability... wat is dat eigenlijk?
“Iets is gebruiksvriendelijk wanneer een beoogde
eindgebruiker het effectief, efficiënt en naar
tevredenheid kan gebruiken.”
...
Gebruiksvriendelijk...
‣

Eenvoudig te leren

‣

Efficiënt in gebruik

‣

Makkelijk onthouden hoe het werkt

‣

Fouten voork...
Soms een evenwicht zoeken..
Eenvoudig te leren?
Het belang van gebruikerstesten...
Basisprincipes
Waar moet je zéker op letten?
6
consistentie

toegankelijkheid

typografie

technologie

snelheid

inhoud
1. Consistentie
Verwachtingen
‣

Logo

‣

Navigatie

‣

Taalselectie

‣

Broodkruimel

‣

Home-knop

‣

Zoekveld
Logo
‣

Links boven

‣

Link naar homepage

‣

Optioneel met tagline
Taalselectie
‣

Rechts boven

‣

ISO (NL - FR - DE)

‣

Toon alle opties, ook de actieve taal

‣

Geen vlagjes!
Home-knop
‣

Eerste knop in hoofdnavigatie

‣

Altijd ‘home’
Navigatie
‣

Hoofdnavigatie horizontaal bovenaan

‣

Subnavigatie links

‣

Vermijden: onderaan of rechts
Secundaire navigatie
‣

Helemaal onderaan, in de footer

‣

Privacy statement, disclaimer, sitemap
Broodkruimel
‣

Toont actieve pagina in hiërarchie

‣

Onder de hoofdnavigatie

‣

Klikbaar, behalve actieve pagina

‣

Zo...
Zoekveld
‣

Rechts boven

‣

Gevaarlijk!

‣

Bezoekers verwachten Google-niveau
Consistentie geeft houvast
Het is duidelijk
‣

waar je vandaan kwam

‣

waar je nu bent

‣

waar je naartoe kan gaan

in d...
6
✔ consistentie

toegankelijkheid

typografie

technologie

snelheid

inhoud
2. Typografie
Mensen schrijven meer naar
elkaar dan ze bellen.
“The web is text.”
Leeslengte
‣

Ideaal: tot ongeveer 55 karakters per regel

‣

Flexibele layout: gebruik maximumbreedte
Lettergrootte
‣

Minstens 14px

‣

Moderne browsers schalen alles

‣

“ A A A ” is overbodig
Geschreefd of schreefloos?
Op een scherm: schreefloos (sans-serif)
Ed ut perspiciatis unde
omnis iste natus error sit
volupt...
6
✔ consistentie

toegankelijkheid

✔ typografie

technologie

snelheid

inhoud
3. Snelheid
Wat volgt is de hoeveelheid tijd
die een bezoeker wil spenderen
om uit te zoeken hoe een website
werkt:
0
Bezoekers hebben geen geduld
‣

Snel laden (technisch)

‣

Focus (inhoud)

‣

Scanbaar (structuur)
Korte quiz
6
✔ consistentie

toegankelijkheid

✔ typografie

technologie

✔ snelheid

inhoud
4. Toegankelijkheid
Bouw een toegankelijke website
‣

Cross-browser, cross-platform

‣

Anysurfer

‣

Google
Cross-browser, cross-device
‣

IE8, IE9, Chrome, Firefox, ...

‣

tablets & smartphones!

‣

muis en keyboard of touch

‣
...
Anysurfer
‣

Kwaliteitslabel

‣

Website toegankelijk voor iedereen,
ook voor mensen met een
functiebeperking
Google
‣

Grootste bron van traffiek

‣

SEO!
6
✔ consistentie

✔ toegankelijkheid

✔ typografie

technologie

✔ snelheid

inhoud
5. Technologie
Altijd nieuwe technologie
‣

Flash

‣

Ajax

‣

Video

‣

HTML 5
Technologie mag geen drijfveer zijn.
Denk na over de

waarde.
6
✔ consistentie

✔ toegankelijkheid

✔ typografie

✔ technologie

✔ snelheid

inhoud
6. Inhoud
Vers en fris!
Een website is zoals ondergoed.
Ververs elke dag.
Publiceer op regelmatige basis
‣

Kies relevante onderwerpen

‣

Relevant nieuws

‣

SEO vs. bezoeker
Hou statische inhoud vers
‣

Schrap pagina’s die niet bezocht worden

‣

Kijk af en toe of inhoud nog up-to-date is

‣

SE...
Publiceren, updaten, ...
Iedere keer langs IT-dienst of webbouwer?
CMS
‣

Content Management System

‣

De motor van de website

‣

Makkelijk zélf inhoud bewerken

‣

SEO!
Een CMS moet je toelaten om het dagelijkse
beheer van je website onafhankelijk en
zonder technische kennis uit te voeren.
6
✔ consistentie

✔ toegankelijkheid

✔ typografie

✔ technologie

✔ snelheid

✔ inhoud
Dus die 6 basisprincipes toepassen en we
zijn er?
Bijna.
De gebruiker staat centraal
‣

Ontwerpen & bouwen

‣

Observeren

‣

Optimaliseren
IA mindset
Magic that happens in an IA-brain.
User-centered werken
‣

Aandacht voor eindgebruiker

‣

Testen met échte gebruikers

‣

Duurzaam

‣

Kwaliteit
Toptaken
‣

Welke 5 zaken komen bezoekers voor

‣

Liefst met enquête, analytics data én met
KeyWordResearch

‣

Vaak: ope...
Verzamelen en schrappen
‣

Leg alles op een hoop

‣

Prioriseer en ontdubbel

‣

Schrap!

‣

Maak je boomstructuur
10 geheime aandachtspunten
Aan de slag!
Hoofdnavigatie
‣

Toptaken!

‣

About page?

‣

Actieknop

‣

Liefst 5 max 7
Elke pagina = startpagina
‣

Dankzij Google

‣

Waar ben ik, waar ga ik naartoe

‣

Belang van de homepage

‣

Related con...
Overzicht-Detail
‣

Blijf gefocust

‣

Kiezen of lezen

‣

Compenseren met ‘related’

‣

eindig met CTA (like, volg, koop)
Call To Action
‣

Onderaan

‣

Verschillend qua uitzicht

‣

Text: WAT - DOEN

‣

moet niet altijd kopen zijn
Footer
‣

Voor wie de weg kwijt is

‣

Voor wat anders in de weg staat

‣

Algemene engagement (nieuwsbrieffacebook)
Formulieren
‣

Onder elkaar

‣

text-form-text-form

‣

Geen afleiding

‣

Enkel wat strikt* nodig is
Mobile first/Mobile in mind
‣

Altijd alles onder elkaar: hiërarchie

‣

Leeslengte op grote schermen

‣

Navigatiepatronen...
Relevante filters
‣

Zo weinig mogelijk

‣

In de juiste volgorde

‣

Combineer tot nieuwe

‣

Haal ze uit een API
De rechter kant
‣

Wordt nauwelijks bekeken

‣

Mobiele surfers

‣

Alternatieven: nog op vallender, minder
noodzakelijk (...
Homepage
‣

Keuzepagina van de volledige website

‣

Wel erg emotioneel

‣

Branden-direct trafiek

‣

AIDA
Meten is weten
Nee, echt waar.
Een website is zoals een schip
Meten, evalueren, bijsturen
1. Statistieken
2. Expert audit
3. Gebruikerstest
1. Statistieken
‣

Google Analytics

‣

Hoeveel, van waar, welk pad, ...

‣

Kwantiteit, geen kwaliteit

‣

Continu

‣

Gr...
2. Expert audit
‣

Analyse van bestaande website

‣

Basisfouten komen naar boven

‣

Toetsing aan de theorie

‣

Praktisc...
3. Gebruikerstest
‣

Ervaren van échte gebruikers

‣

Toetsing aan de praktijk

‣

Ideale methode

‣

Praktisch advies en ...
Conclusie
‣

Begin met een goeie strategie

‣

Bezoekers aantrekken heeft alleen
zin bij optimale usability!

‣

Usability...
‣

http://www.goodui.org
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Crash course in informatie-architectuur
Upcoming SlideShare
Loading in...5
×

Crash course in informatie-architectuur

2,147

Published on

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.

Published in: Marketing
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
2,147
On Slideshare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
14
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Crash course in informatie-architectuur

  1. 1. CRASH COURSE In Informatie-architectuur
  2. 2. Hallo! Ik ben Hannes.
  3. 3. Informatie architectuur
  4. 4. Enkele projecten waar ik aan meewerkte...
  5. 5. Waarom is usability belangrijk? Iedereen wordt er blijer van.
  6. 6. Usability... wat is dat eigenlijk?
  7. 7. “Iets is gebruiksvriendelijk wanneer een beoogde eindgebruiker het effectief, efficiënt en naar tevredenheid kan gebruiken.” Wikipedia
  8. 8. Gebruiksvriendelijk... ‣ Eenvoudig te leren ‣ Efficiënt in gebruik ‣ Makkelijk onthouden hoe het werkt ‣ Fouten voorkomend en duidelijke feedback ‣ ‘Plezant’ om te gebruiken
  9. 9. Soms een evenwicht zoeken..
  10. 10. Eenvoudig te leren?
  11. 11. Het belang van gebruikerstesten...
  12. 12. Basisprincipes Waar moet je zéker op letten?
  13. 13. 6 consistentie toegankelijkheid typografie technologie snelheid inhoud
  14. 14. 1. Consistentie
  15. 15. Verwachtingen ‣ Logo ‣ Navigatie ‣ Taalselectie ‣ Broodkruimel ‣ Home-knop ‣ Zoekveld
  16. 16. Logo ‣ Links boven ‣ Link naar homepage ‣ Optioneel met tagline
  17. 17. Taalselectie ‣ Rechts boven ‣ ISO (NL - FR - DE) ‣ Toon alle opties, ook de actieve taal ‣ Geen vlagjes!
  18. 18. Home-knop ‣ Eerste knop in hoofdnavigatie ‣ Altijd ‘home’
  19. 19. Navigatie ‣ Hoofdnavigatie horizontaal bovenaan ‣ Subnavigatie links ‣ Vermijden: onderaan of rechts
  20. 20. Secundaire navigatie ‣ Helemaal onderaan, in de footer ‣ Privacy statement, disclaimer, sitemap
  21. 21. Broodkruimel ‣ Toont actieve pagina in hiërarchie ‣ Onder de hoofdnavigatie ‣ Klikbaar, behalve actieve pagina ‣ Zonder ‘je bent hier: ’
  22. 22. Zoekveld ‣ Rechts boven ‣ Gevaarlijk! ‣ Bezoekers verwachten Google-niveau
  23. 23. 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
  24. 24. 6 ✔ consistentie toegankelijkheid typografie technologie snelheid inhoud
  25. 25. 2. Typografie
  26. 26. Mensen schrijven meer naar elkaar dan ze bellen. “The web is text.”
  27. 27. Leeslengte ‣ Ideaal: tot ongeveer 55 karakters per regel ‣ Flexibele layout: gebruik maximumbreedte
  28. 28. Lettergrootte ‣ Minstens 14px ‣ Moderne browsers schalen alles ‣ “ A A A ” is overbodig
  29. 29. 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.
  30. 30. 6 ✔ consistentie toegankelijkheid ✔ typografie technologie snelheid inhoud
  31. 31. 3. Snelheid
  32. 32. Wat volgt is de hoeveelheid tijd die een bezoeker wil spenderen om uit te zoeken hoe een website werkt:
  33. 33. 0
  34. 34. Bezoekers hebben geen geduld ‣ Snel laden (technisch) ‣ Focus (inhoud) ‣ Scanbaar (structuur)
  35. 35. Korte quiz
  36. 36. 6 ✔ consistentie toegankelijkheid ✔ typografie technologie ✔ snelheid inhoud
  37. 37. 4. Toegankelijkheid
  38. 38. Bouw een toegankelijke website ‣ Cross-browser, cross-platform ‣ Anysurfer ‣ Google
  39. 39. Cross-browser, cross-device ‣ IE8, IE9, Chrome, Firefox, ... ‣ tablets & smartphones! ‣ muis en keyboard of touch ‣ Webstandaarden!
  40. 40. Anysurfer ‣ Kwaliteitslabel ‣ Website toegankelijk voor iedereen, ook voor mensen met een functiebeperking
  41. 41. Google ‣ Grootste bron van traffiek ‣ SEO!
  42. 42. 6 ✔ consistentie ✔ toegankelijkheid ✔ typografie technologie ✔ snelheid inhoud
  43. 43. 5. Technologie
  44. 44. Altijd nieuwe technologie ‣ Flash ‣ Ajax ‣ Video ‣ HTML 5
  45. 45. Technologie mag geen drijfveer zijn. Denk na over de waarde.
  46. 46. 6 ✔ consistentie ✔ toegankelijkheid ✔ typografie ✔ technologie ✔ snelheid inhoud
  47. 47. 6. Inhoud
  48. 48. Vers en fris!
  49. 49. Een website is zoals ondergoed. Ververs elke dag.
  50. 50. Publiceer op regelmatige basis ‣ Kies relevante onderwerpen ‣ Relevant nieuws ‣ SEO vs. bezoeker
  51. 51. 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
  52. 52. Publiceren, updaten, ... Iedere keer langs IT-dienst of webbouwer?
  53. 53. CMS ‣ Content Management System ‣ De motor van de website ‣ Makkelijk zélf inhoud bewerken ‣ SEO!
  54. 54. Een CMS moet je toelaten om het dagelijkse beheer van je website onafhankelijk en zonder technische kennis uit te voeren.
  55. 55. 6 ✔ consistentie ✔ toegankelijkheid ✔ typografie ✔ technologie ✔ snelheid ✔ inhoud
  56. 56. Dus die 6 basisprincipes toepassen en we zijn er?
  57. 57. Bijna.
  58. 58. De gebruiker staat centraal ‣ Ontwerpen & bouwen ‣ Observeren ‣ Optimaliseren
  59. 59. IA mindset Magic that happens in an IA-brain.
  60. 60. User-centered werken ‣ Aandacht voor eindgebruiker ‣ Testen met échte gebruikers ‣ Duurzaam ‣ Kwaliteit
  61. 61. Toptaken ‣ Welke 5 zaken komen bezoekers voor ‣ Liefst met enquête, analytics data én met KeyWordResearch ‣ Vaak: openingsuren en adresgegevens
  62. 62. Verzamelen en schrappen ‣ Leg alles op een hoop ‣ Prioriseer en ontdubbel ‣ Schrap! ‣ Maak je boomstructuur
  63. 63. 10 geheime aandachtspunten Aan de slag!
  64. 64. Hoofdnavigatie ‣ Toptaken! ‣ About page? ‣ Actieknop ‣ Liefst 5 max 7
  65. 65. Elke pagina = startpagina ‣ Dankzij Google ‣ Waar ben ik, waar ga ik naartoe ‣ Belang van de homepage ‣ Related content
  66. 66. Overzicht-Detail ‣ Blijf gefocust ‣ Kiezen of lezen ‣ Compenseren met ‘related’ ‣ eindig met CTA (like, volg, koop)
  67. 67. Call To Action ‣ Onderaan ‣ Verschillend qua uitzicht ‣ Text: WAT - DOEN ‣ moet niet altijd kopen zijn
  68. 68. Footer ‣ Voor wie de weg kwijt is ‣ Voor wat anders in de weg staat ‣ Algemene engagement (nieuwsbrieffacebook)
  69. 69. Formulieren ‣ Onder elkaar ‣ text-form-text-form ‣ Geen afleiding ‣ Enkel wat strikt* nodig is
  70. 70. Mobile first/Mobile in mind ‣ Altijd alles onder elkaar: hiërarchie ‣ Leeslengte op grote schermen ‣ Navigatiepatronen ‣ Durven weglaten.
  71. 71. Relevante filters ‣ Zo weinig mogelijk ‣ In de juiste volgorde ‣ Combineer tot nieuwe ‣ Haal ze uit een API
  72. 72. De rechter kant ‣ Wordt nauwelijks bekeken ‣ Mobiele surfers ‣ Alternatieven: nog op vallender, minder noodzakelijk (bijv. filters)
  73. 73. Homepage ‣ Keuzepagina van de volledige website ‣ Wel erg emotioneel ‣ Branden-direct trafiek ‣ AIDA
  74. 74. Meten is weten Nee, echt waar.
  75. 75. Een website is zoals een schip
  76. 76. Meten, evalueren, bijsturen 1. Statistieken 2. Expert audit 3. Gebruikerstest
  77. 77. 1. Statistieken ‣ Google Analytics ‣ Hoeveel, van waar, welk pad, ... ‣ Kwantiteit, geen kwaliteit ‣ Continu ‣ Gratis (doe-het-zelf)
  78. 78. 2. Expert audit ‣ Analyse van bestaande website ‣ Basisfouten komen naar boven ‣ Toetsing aan de theorie ‣ Praktisch advies en tips
  79. 79. 3. Gebruikerstest ‣ Ervaren van échte gebruikers ‣ Toetsing aan de praktijk ‣ Ideale methode ‣ Praktisch advies en tips
  80. 80. Conclusie ‣ Begin met een goeie strategie ‣ Bezoekers aantrekken heeft alleen zin bij optimale usability! ‣ Usability beïnvloedt conversie ‣ Meten is weten
  81. 81. ‣ http://www.goodui.org
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×