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.”
Wikipedia
Gebruiksvriendelijk...
‣

Eenvoudig te leren

‣

Efficiënt in gebruik

‣

Makkelijk onthouden hoe het werkt

‣

Fouten voorkomend en duidelijke feedback

‣

‘Plezant’ om te gebruiken
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

‣

Zonder ‘je bent hier: ’
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 de visuele taal die andere websites ook
spreken
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
voluptatem accusantium
doloremque laudantium.

Ed ut perspiciatis unde
omnis iste natus error sit
voluptatem accusantium
doloremque laudantium.
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

‣

Webstandaarden!
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

‣

SEO vs. bezoeker
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: openingsuren en adresgegevens
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 content
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

‣

Durven weglaten.
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 (bijv. filters)
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

‣

Gratis (doe-het-zelf)
2. Expert audit
‣

Analyse van bestaande website

‣

Basisfouten komen naar boven

‣

Toetsing aan de theorie

‣

Praktisch advies en tips
3. Gebruikerstest
‣

Ervaren van échte gebruikers

‣

Toetsing aan de praktijk

‣

Ideale methode

‣

Praktisch advies en tips
Conclusie
‣

Begin met een goeie strategie

‣

Bezoekers aantrekken heeft alleen
zin bij optimale usability!

‣

Usability beïnvloedt conversie

‣

Meten is weten
‣

http://www.goodui.org

Crash course in informatie-architectuur