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