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

‣ Google

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!

Google

✔ 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