Vormgeving
Uit Usability
Inhoud |
Algemene principes
- Hou ontwerpen helder en simpel. Vermijd toeters en bellen.
- Ontwerpen is de kunst van het weglaten (43).
- Gebruik vooral klassieke esthetische elementen zoals symmetrie en witruimtes.
- Voorkom rommelige en volle pagina's (1). Elk extra element concurreert om aandacht met de reeds aanwezige elementen. Hoe meer elementen hoe groter de ruis en hoe minder duidelijk individuele elementen opvallen (17).
- Elementen in 'dunbevolkte' gebieden op de pagina worden eerder gezocht en sneller gevonden (1).
- Maak gebruik van rustpunten: iconen, afbeeldingen en headers dienen bij het scannen als 'rustpunten' en als beginpunten.
- Een vertrouwde vormgeving (common look & feel) van een website blijkt ook direct effect te hebben op de functionaliteit van de website
- het maakt de website makkelijker in gebruik, maakt bepaalde werkprocessen inzichtelijker, en verhoogd daardoor uiteindelijk de efficientie van het gebruik (4).
- Zorg voor visuele consistentie, zowel binnen een site als tussen sites van dezelfde organisatie (1)(21).
- Bezoekers moeten elke pagina kunnen herkennen als deel van een groter geheel (44).
- Denk daarbij onder andere aan de grootte en type van letters, kleuren die gebruikt worden voor labels, lettertypes en achtergronden, en de plaats van labels, teksten en afbeeldingen.
- Het gebruik van verschillende maten interactieve elementen (widgets) heeft geen aantoonbaar negatief effect op de effectiviteit of de voorkeuren van gebruikers (1).
- Gebruik geen verschillende manieren om dezelfde soort informatie op een pagina te benadrukken (1).
- Gebruik de juiste manier van nadruk voor de mate van belangrijkheid van een object.
- Er is een natuurlijke rangorde van manieren (1):
- Beweging is de meest effectieve manier om aandacht te trekken. Het is vrijwel onmogelijk voor gebruikers om hun ogen van bewegende elementen af te houden. Het nadeel daarvan is dat niet-relevante bewegende elementen continue de aandacht van de gebruiker afleiden van de rest van de informatie op de pagina;
- Grote objecten, vooral grote afbeeldingen, trekken eerder de aandacht dan kleinere objecten. Gebruikers fixeren zich eerder en langer op grote objecten. Gebruikers slaan echter snel afbeeldingen over die ze als louter decoratief of als advertenties beschouwen;
- Gebruikers kijken eerst naar afbeeldingen, en dan pas naar de begeleidende tekst. In veel gevallen worden teksten alleen als laatste redmiddel gebruikt, als de afbeelding zelf niet begrepen wordt;
- Kleur is minder geschikt als methode om aandacht te trekken. Het is wel een belangrijke manier voor de gebruiker om het relatieve onderlinge belang van objecten of stukken tekst in te kunnen schatten (1).
- Zet elementen aan elkaar zijn gerelateerd (dicht) bij elkaar.
- Gebruikers gaan er van uit dat elementen die dicht bij elkaar staan, conceptueel bij elkaar horen (1).
- Van tekstgedeelten die dezelfde achtergrondkleur hebben, wordt ook aangenomen dat ze aan elkaar zijn gerelateerd (1).
Kleurgebruik
- Wees consequent met kleurgebruik bij het geven van betekenis (21).
- Gebruik geen verschillende kleuren binnen een lopende tekst.
- Alleen (bezochte) links mogen een afwijkende kleur hebben (21).
- Zorg ervoor dat communicatieve elementen hun betekenis niet uitsluitend door kleur overbrengen (1).
- Gebruik zwarte tekst op een effen achtergrond met een goed contrast.
- Over het algemeen geldt: hoe groter het contrast tussen de tekst en de achtergrond, hoe makkelijker de tekst is te lezen (1).
- Zwarte teksten op een witte achtergrond zijn 30% sneller te lezen dan lichte teksten op een zwarte achtergrond (1).
Typografie
- Wees voorzichtig met het gebruik van verschillende lettertypes om nadruk te geven.
- Het gebruik van verschillende soorten lettertypes door elkaar kan de leessnelheid tot 20% vertragen. Gebruik verschillen daarom spaarzaam in grote tekstblokken en/of lopende tekst (1).
- Gebruik geen onderstreping om bepaalde woorden of zinsdelen te benadrukken. De conventie is dat onderstreping voor hyperlinks wordt gebruikt, en de meeste gebruikers gaan ook van die conventie uit.
- Vermijd het gebruik van boven- en onderschrift waar mogelijk (21).
- Gebruik kleine letters met hoofdletters voor lopende teksten (1).
- Gebruik een consistente structuur voor tekstreeksen (zoals telefoonnummers).
- Gebruik een vorm waar gebruikers mee bekend zijn (1).
- Gebruik voor telefoon- en faxnummers de volgende standaardvorm(21):
(070) 333 44 44
(0180) 11 11 11
06-11 11 11 11
0900-11 11 11 (0,03 euro/min.)
0800-11 11 11 (gratis)
+31 234 56 78 90
+31 20 623 45 67
+31 6 53 45 67 89
- Gebruik bekende lettertypes.
- Uit onderzoek blijkt dat er geen verschil in leesbaarheid is tussen letter met schreef (zoals Times Roman) en schreefloze letters (zoals Arial of Verdana).
- Gebruik ten minste een 12-punts lettertype.
- Letters kleiner dan 12 punten vertragen de leessnelheid van gebruikers. Gebruik nooit letters die kleiner zijn dan 9 punten (1).
- Voor gebruikers van boven de 65 jaar is het vaak zelfs beter om 14-punts letters te gebruikers (1).
- Houdt er rekening mee dat browsers de grootte van letters soms anders kunnen weergeven. Test het ontwerp altijd in alle gangbare browsers.
- Gebruikers kunnen via hun browser zelf de grootte van het lettertype instellen. Schakel die functie niet uit en houdt ook daar rekening mee bij het ontwerp van een pagina.
- Gebruik vetgeschreven tekst spaarzaam, en tekst in hoofdletters al helemaal niet.
- Woorden die alleen in hoofdletters zijn geschreven, worden in de etiquette van het Internet als schreeuwerig beschouwd.
Homepage
- Zorg ervoor dat de homepage er ook als een homepage uitziet.
- Het is belangrijk om ervoor te zorgen dat onderliggende pagina's niet met de homepage (kunnen) worden verward (1).
- Probeer de homepage op één scherm te houden.
- Lukt dat niet, zorg er dan voor dat de pagina niet onderaan het scherm lijkt op te houden omdat daar toevallig een logische knip in het ontwerp zit (49).
- Oudere en onervaren gebruikers zijn eerder geneigd om informatie te missen die onder het bovenste scherm staat (below the fold, 400-500 pixels) (1).
Links & labels
- De naam van een pagina moet duidelijk te herkennen zijn.
- In de meeste gevallen heeft de naam van de pagina het grootste lettertype -- vergelijk de titel van een hoofdstuk in een boek (18).
- Hyperlinks moeten makkelijk herkend kunnen worden door gebruikers.
- Zorg ervoor dat hyperlinks zich niet alleen door kleur onderscheiden maar bij voorkeur ook door onderstreping (39).
- Andersom geldt dat tekst die geen hyperlinks is er ook niet als een hyperlink uitziet -- vermijdt daar dus juist onderstreping (3).
- Broodkruimelpaden (bread crumbs) kunnen het beste als volgt worden vormgegeven
- gebruik een klein lettertype;
- gebruik het '>' symbool om de verschillende niveau te onderscheiden;
- geef het laagste niveau een andere vormgeving van de hogere niveaus (bijvoorbeeld vet).
Lijsten
- Gebruik tabellen alleen als het echt om de presentatie van data (relationele informatie) gaat, niet voor de opmaak van een pagina (19)(21).
- Zet niet teveel items op een overzichtspagina.
- Houdt het bij voorkeur op maximaal twintig items (21).
- Kies voor een bladerfunctie om de overige items te tonen (21).
- Kies het juiste type opsomming.
- Bullets werken het beste bij lijsten zonder rangorde of volgorde (1).
- Bij instructies werken genummerde lijsten het beste (1).
- Begin de nummering nooit met een nul (0). Als mensen tellen beginnen ze altijd met één (1), nooit met nul (1).
- Gebruik de juiste volgorde voor de items.
- Ga uit van de logica van de gebruiker en niet die van de ontwerper (1).
- Zet, vanuit die logica geredeneerd, het belangrijkste item bovenaan.
- Veel gebruikers stoppen met het scannen van lijsten zodra ze iets relevants tegenkomen (1).
- Als er geen duidelijke volgorde is, sorteer de items in de lijst dan op alfabetische volgorde (1).
- Orden niet alfabetisch als er een meer betekenisvolle ordening mogelijk is (bijvoorbeeld populariteit). Alfabetisch staat in veel gevallen gelijk aan willekeurig.
- Geef tabellen zo vorm dat ze goed te scannen zijn.
- Toon opsommingen in kolommen in plaats van rijen.
- Het scannen van een horizontale lijst duurt 20% langer dan van een verticale lijst (1).
- De lijst moet als een apart, bij elkaar horend geheel te herkennen zijn (1).
- Zorg binnen een lijst voor onderscheidende kenmerken zoals verschillende achtergrondkleuren per rij en duidelijke labels voor de rijen en kolommen (1).
Grafieken
- Grafieken zijn bij uitstek geschikt voor situaties waarin gebruikers veranderingen in data moeten kunnen aflezen (1).
- Laat ook de exacte waarden van de data (data values) in grafieken zien als nauwkeurige lezing van de data is vereist (1).
- Pictogrammen zijn met name geschikt voor het aanleren van handelingen.
- Uit onderzoek blijkt dat afbeeldingen veel beter zijn in het overdragen van informatie in een leercontext dan teksten (1).
- Afbeeldingen van bekende objecten worden beter herkend en beter onthouden dan hun tekstuele weergave (1).
- Gebruik kleuren om verschillende soorten data van elkaar te onderscheiden.
- De prestatie van gebruikers met betrekking tot de interpretatie en verwerking van data neemt met 40% als er gebruik wordt gemaakt van kleurcodering. Die verbetering treedt echter alleen op als er wordt uitgelegd hoe de kleuren moeten worden geïnterpreteerd, bijvoorbeeld in een duidelijke legenda (1).
- Gebruikers kunnen tot tien verschillende soorten kleuren onderscheiden die aan (tien) verschillende categorieën zijn toegewezen. Het is echter veiliger om niet meer dan vijf verschillende soorten te gebruiken (1).
Afbeeldingen & knoppen
- Vertoon nooit ongevraagd vensters of afbeeldingen.
- Pop-ups zijn uit den boze en leiden tot grote irritatie bij gebruikers.
- Gebruik geen afbeeldingen die er, bij voorbeeld door hun formaat en/of stijl, uitzien als advertenties (banner ads).
- Gebruikers slaan banners over bij het scannen van pagina's -- (functionele) afbeeldingen die op banners lijken worden ook overgeslagen (1).
- Gebruik simpele of liever helemaal geen afbeeldingen op de achtergrond van pagina's.
- De teksten op de voorgrond zijn dan vaak moeilijk te lezen (1).
- Gebruik alleen afbeeldingen als ze bijdragen aan het succes van de website als geheel.
- Het leidt tot grote irritaties bij gebruikers als ze lang moeten wachten totdat een afbeelding is gedownload, en de afbeelding dan geen enkele toegevoegde waarde lijkt te hebben (1).
- Laat daarom, als het tonen van de afbeelding op ware grootte niet kritisch is, de gebruiker eerst een verkleining van de afbeelding (thumbnail) zien.
- Zorg ervoor dat de afbeelding de bedoelde boodschap overbrengt.
- Bij het selecteren van de beste afbeelding uit een verzameling van vergelijkbare afbeeldingen, kiezen gebruikers meestal de afbeelding die de meeste andere gebruikers ook kiezen (dat wil zeggen de afbeelding die het bekendste voorkomt). Ontwerpers geven meestal de voorkeur aan de meest artistieke afbeelding (1).
- Grafische elementen met een bewegingsfunctie (zoals knoppen of tabbladen) worden het beste als zodanig herkend als ze er zoveel mogelijk uitzien als hun niet-virtuele tegenhanger (1).
- Zorg ervoor dat het label op een drukknop de actie duidelijk aangeeft.
- Alt-teksten bij een knop moeten de functie van de knop beschrijving en niet de afbeelding die op de knop staat (21).
- De combinatie van een tekst label en een illustratief icoon heeft een duidelijke meerwaarde (1).
- Het is niet duidelijk of het laten zien van foto's van medewerkers bijdraagt aan het vertrouwen van gebruikers in de website.
- In de literatuur lijken de stemmen verdeeld. Sommige onderzoeken treffen inderdaad een positief verband aan, andere onderzoeken vonden juist geen enkele relatie (1).
Audio & video
- Gebruik video, animatie en audio alleen als dat helpt om de boodschap van de website beter over te brengen.
- Het gebruik van dynamische media louter om de aandacht van de gebruiker te trekken, kan tot een overload aan indrukken leiden en werkt dan eerder averechts (1).
- Biedt een inleidende uitleg aan voordat de animatie wordt vertoond (1).
- Voorzie elke video van captions en biedt daarnaast een volledig uitgeschreven tekst (transcriptie) aan (21).
- Zorg ervoor dat gebruikers controle kunnen uitoeferen over tijdsafhankelijke media-objecten.
- Als er tijdsafhankelijke media objecten worden gebruikt voor animaties of bewegende tekst, moeten gebruikers de objecten naar believen kunnen pauzeren, stoppen en herstarten (3).
- Biedt video altijd gelaagd aan.
- Gebruik Flash-video als het belangrijkste formaat (19)(21).
- Biedt het videobestand ook altijd als download aan (19)(21).
Externe links
Stijlgids voor corporate websites van Ministeries:
http://stijlgids.overheid.nl/
Stijlgids voor corporate websites van gemeenten:
http://egem-iteams.nl/stijlgids-gemeenten-03
