LES CMS’S & API’S – WOUTER
VANDERSYPPE – 7/12
USER INTERFACE DESIGN
Interface = punt waarin 2 dingen met elkaar communiceren
o Soort van contract waarin 1 iets met iets anders interageert/communiceert
User interface = punt waarin de gebruiker interageert met een machine
DON’T MAKE YOUR USERS THINK
“A user interface is like a joke. If you have to explain it, it’s not that good”
o User interface ontwerpt zichzelf als die goed ontworpen is
MAAK GANGBARE TAKEN GEMAKKELIJK, ZELDZAME TAKEN MOGELIJK
o Nadenken over wat mensen komen doen op je website en zorgen dat die dingen snel
toegankelijk zijn
DESIGN MET PROGRESSIVE DISCOLORUSE
o Progressive disclosure = dingen progressief gaan ontsluiten
o Wordt vaak gebruikt bij registratieprocessen
omdat je een gebruiker zo weinig mogelijk wil
ontmoedigen om te registereen want het doel
= registratie
Zorgen dat er kleine stapjes zijn,
beginnen met basisinfo en dan
volgende stap => niet allemaal op 1
scherm zetten
o Breng structuur!
Gebruik subitems
VERTREK VAN BESTAANDE UI PATTERNS
Zelfde structuur komt vaak terug want mensen herkennen dat => dus gebruik die
standaarden
In die patronen zitten wel een aantal achterliggende wetten en regels
LAWS OF UX
Law of proximity
o “Objecten die dichtbij of dichtbij elkaar liggen, worden meestal als groepen aanzien”
o Bv hoofdnavigatie van een website => er staat hier geen tekst (zie foto) maar toch het gevoel
van een groep want alle 3 op
hetzelfde niveau gepositioneerd
=> visueel gevoel kan je best
hanteren als je dingen ontwerpt
Miller’s law
o De gemiddelde persoon kan slechts 7 (+/- 2) items in zijn werkgeheugen bewaren”
o Wanneer je 8 kopjes geeft in een menu zal je wss niet allemaal herinneren als je dit 1x gezien
hebt => reduceren naar 5 bv want al makkelijker te herinneren/onthouden
, Von Restorff effect
o Als je meerdere gelijke items hebt op een webpagina zal hetgene dat verschilt van de andere
meestal onthouden worden
o Dit patroon komt vaak terug in een
navigatie waarbij de call to action
opzettelijk een andere look en feel
gekregen heeft => knop dat opvalt (vaak sign up/in)
Hick’s law
o De tijd die nodig is om een beslissing te nemen, neemt toe met het aantal en de complexiteit
van de keuzes
o Op pagina’s waar er iets verkocht
moet worden, worden meestal 3
keuzes aangeboden, waarbij de
middelste meestal een ander kleur
krijgt, want daar willen we mensen
naartoe krijgen (zorgt dus voor meer
conversie door ander kleur)
VERTEL DE GROTE LIJNEN OP DE HOMEPAGE
Zorg ervoor dat mensen niet moeten nadenken
Belangrijk om op 1e pagina in 1e zicht te tonen wat je allemaal aanbiedt
DENK AAN ‘THE FOLD’
The fold = deel van uw webpagina dat zichtbaar is voor de gebruiker voor dat ze moeten scrollen
o Dus wat mensen zeker te zien krijgen op hun scherm
Voorbeelden:
o Op afbeelding rechts is de foto te
druk waardoor de zichtbaarheid
van de navigatie een beetje
verdwijnt
o 6 velden om in te vullen is ook te
veel
MAAK DUIDELIJK WAT KLIKBAAR IS
Foto rechts is de taalselectie op de home page van
Ikea
o Je ziet niet waar je op moet klikken
Momenteel al verbeterd maar eig zijn er heel veel
manieren om de taal van de gebruiker zelf te
achterhalen bv door locatie => kan dus nog beter
VANDERSYPPE – 7/12
USER INTERFACE DESIGN
Interface = punt waarin 2 dingen met elkaar communiceren
o Soort van contract waarin 1 iets met iets anders interageert/communiceert
User interface = punt waarin de gebruiker interageert met een machine
DON’T MAKE YOUR USERS THINK
“A user interface is like a joke. If you have to explain it, it’s not that good”
o User interface ontwerpt zichzelf als die goed ontworpen is
MAAK GANGBARE TAKEN GEMAKKELIJK, ZELDZAME TAKEN MOGELIJK
o Nadenken over wat mensen komen doen op je website en zorgen dat die dingen snel
toegankelijk zijn
DESIGN MET PROGRESSIVE DISCOLORUSE
o Progressive disclosure = dingen progressief gaan ontsluiten
o Wordt vaak gebruikt bij registratieprocessen
omdat je een gebruiker zo weinig mogelijk wil
ontmoedigen om te registereen want het doel
= registratie
Zorgen dat er kleine stapjes zijn,
beginnen met basisinfo en dan
volgende stap => niet allemaal op 1
scherm zetten
o Breng structuur!
Gebruik subitems
VERTREK VAN BESTAANDE UI PATTERNS
Zelfde structuur komt vaak terug want mensen herkennen dat => dus gebruik die
standaarden
In die patronen zitten wel een aantal achterliggende wetten en regels
LAWS OF UX
Law of proximity
o “Objecten die dichtbij of dichtbij elkaar liggen, worden meestal als groepen aanzien”
o Bv hoofdnavigatie van een website => er staat hier geen tekst (zie foto) maar toch het gevoel
van een groep want alle 3 op
hetzelfde niveau gepositioneerd
=> visueel gevoel kan je best
hanteren als je dingen ontwerpt
Miller’s law
o De gemiddelde persoon kan slechts 7 (+/- 2) items in zijn werkgeheugen bewaren”
o Wanneer je 8 kopjes geeft in een menu zal je wss niet allemaal herinneren als je dit 1x gezien
hebt => reduceren naar 5 bv want al makkelijker te herinneren/onthouden
, Von Restorff effect
o Als je meerdere gelijke items hebt op een webpagina zal hetgene dat verschilt van de andere
meestal onthouden worden
o Dit patroon komt vaak terug in een
navigatie waarbij de call to action
opzettelijk een andere look en feel
gekregen heeft => knop dat opvalt (vaak sign up/in)
Hick’s law
o De tijd die nodig is om een beslissing te nemen, neemt toe met het aantal en de complexiteit
van de keuzes
o Op pagina’s waar er iets verkocht
moet worden, worden meestal 3
keuzes aangeboden, waarbij de
middelste meestal een ander kleur
krijgt, want daar willen we mensen
naartoe krijgen (zorgt dus voor meer
conversie door ander kleur)
VERTEL DE GROTE LIJNEN OP DE HOMEPAGE
Zorg ervoor dat mensen niet moeten nadenken
Belangrijk om op 1e pagina in 1e zicht te tonen wat je allemaal aanbiedt
DENK AAN ‘THE FOLD’
The fold = deel van uw webpagina dat zichtbaar is voor de gebruiker voor dat ze moeten scrollen
o Dus wat mensen zeker te zien krijgen op hun scherm
Voorbeelden:
o Op afbeelding rechts is de foto te
druk waardoor de zichtbaarheid
van de navigatie een beetje
verdwijnt
o 6 velden om in te vullen is ook te
veel
MAAK DUIDELIJK WAT KLIKBAAR IS
Foto rechts is de taalselectie op de home page van
Ikea
o Je ziet niet waar je op moet klikken
Momenteel al verbeterd maar eig zijn er heel veel
manieren om de taal van de gebruiker zelf te
achterhalen bv door locatie => kan dus nog beter
