Designing with the mind in mind 1

Vertekende waarneming, Gestalt-principes, Lezen,

Designing with the mind in mind is de titel van een boek geschreven door Jeff Johnson. Hij beschrijft hierin een aantal regels (design guidelines) die je kunt gebruiken bij het ontwerpen van een user interface.

Wie een college wil zien van Jeff Johnson kan deze video bekijken op Youtube (duur video 107 min). Het volledige e-book kun je hier downloaden.

In dit hoofdstuk worden de eerste guidelines behandeld. Alle richtlijnen zijn gebaseerd op hoe wij waarnemen.

We zien wat we verwachten / We Perceive What We Expect

Is dit serie plaatjes van platte gronden van gebouwen of is het een woord?

Is het middelste karakter een H of een A?

Wat mensen waarnemen heeft te maken met:

• ervaringen - verleden
• huidige context - heden
• doelen -toekomst

Ervaringen - Verleden

In onze cultuur worden wij omringd door beelden. We hebben van jongs af aan geleerd om deze beelden op een bepaalde manier te interpreteren. Deze koe lijkt niet op een echte koe en toch zal iedereen dit zien als koe.

Wat verwacht je wanneer je op de knop rechts onder in het scherm van pagina 4 klikt?

Huidige context - heden

Toekomst - doelen

Hieruit komen de eerste design-regels:

• Vermijd dubbelzinnigheid
  Vermijd dubbelzinnige informatieschermen en test het ontwerp om te controleren of alle gebruikers het scherm interpreteren op dezelfde manier. Waar dubbelzinnigheid onvermijdelijk is, gebruik dan standaarden of conventies, of gebruik hints om de dubbelzinnigheid op de beoogde manier op te lossen.

• Wees consistent
  Plaats informatie en bedieningselementen op consistente plekken. Plaats het menu, de eerste koppen en andere vaste elementen zteeds op dezelfde plaats en gebruik dezzelfde vormgeving. Deze consistentie stelt gebruikers in staat de elementen op te merken en snel te herkennen.

• Begrijp de gebruikersdoelen
  Interactieve systemen worden met bepaalde doelen in gedachten gebruikt. Ontwerpers moeten deze doelen begrijpen en zich realiseren dat gebruikersdoelen onderling kunnen variëren, en dat hun doelen sterk beïnvloeden wat zij zien. Zorg ervoor dat de informatie die gebruikers nodig hebben op elke plaats in een interactie beschikbaar is, prominent, en duidelijk terug te voeren op mogelijke gebruikersdoelen, zodat gebruikers de informatie opmerken en gebruiken.

Oefening 1

1. Kijk naar de bovenstaande video.

Het experiment uitgevoerd in bovenstaande video was een inzending uit 2010 van de psycholoog en hoogleraar Daniel Simons voor The Best Illusion of the Year contest. Simons is een beroemd (experimenteel) psycholoog die onderzoek doet naar onder andere perceptie, geheugen en aandacht. Hij is onder meer bekend vanwege zijn onderzoek naar veranderingsblindheid. Veranderingsblindheid is het fenomeen dat mensen niet goed zijn in het opmerken van veranderingen. Zelfs wanneer het om iets opvallends gaat als een verwisseling van twee personen, hebben de meesten dat niet door.

In het experiment focus je je op de bal die over en weer wordt gegooid. Door die focus op de bal zien ongeveer de helft van de mensen die het filmpje bekijken, niet de gorilla die dwars door het beeld loopt. Als je later weer terugkijkt en  bewust op de gorilla let, dan zie je de gorilla opeens wel. Zoals in de video wordt opgemerkt werkt het alleen als je deze video nog niet eerder hebt gezien en de gorilla daardoor ook niet verwacht.

Het experiment laat duidelijk zien dat als je ergens te veel de focus oplegt, je andere (relevante) zaken over het hoofd kunt zien. Je bent er als het ware blind voor.  

Dit maakt dat een bezoeker aan een website niet alles ziet.

1. Wat klopt er niet aan onderstaande knop?

(naar boven)

Wij willen graag structuren zien - Our Vision is Optimized to See Structure

In het boek Designing with the mind in mind wordt gebruik gemaakt van Gestaltpsychologie. Het belangrijkste principe van Gestalt (de Duitse term voor ‘vorm’ of ‘geheel’) is dat je geen losse elementen waarneemt, maar dat je de losse elementen groepeert en als geheel ziet: het geheel is meer dan de som der losse delen. Het geheel zit in zowel vorm, kleur, afstand en beweging van elementen. Wat we zien is gebaseerd op bepaalde verwachtingen en eerdere ervaringen. De Gestalt zegt dat mensen dingen waarnemen en groeperen volgens een aantal wetten. Om tot een goede vlakverdeling te komen, is de Gestaltpsychologie een hulpmiddel. Gestaltpsychologen probeerden de wetten van de menselijke waarneming te ontdekken.

• Waarom zie we het ene als voorgrond en het andere als achtergrond?
• Hoe kan het dat we vormen kunnen onderscheiden?
• Wat is een goede vorm?
• Hoe en waarom zie we samenhang tussen dingen?
• Welke eigenschappen van een ding zorgen ervoor dat we het kunnen onderscheiden van andere dingen?

In dit document wordt meer uitleg gegeven over Gestaltpsychologie.

De Gestaltprincipes beschrijven hoe je hersenen omgaan met visuele informatie. In een aantal principes leggen zij uit hoe je hersenen snel, automatisch en onbewust dingen waarnemen. Hierbij gaat het er niet om of iets er daadwerkelijk staat, maar wat wij er zelf van maken. Wanneer je goed gebruik maakt van deze wetten op je website, zorg je ervoor dat gebruikers intuïtiever door je website bewegen.

Overzicht Gestaltprincipes

Wet van nabijheid: belangrijk voor snelheid van navigeren

Hoe dichter elementen bij elkaar staan, hoe sneller we het als groep zien, terwijl dingen die ver van elkaar vandaan staan als aparte groepen worden waargenomen. In het figuur hieronder zie je vier sets van strepen in plaats van tien losse strepen.

Als tekst of figuren dicht bij elkaar geplaatst staan op een website, verwacht een bezoeker ook dat dit bij elkaar hoort en dat er dus een relatie tussen bestaat. Deze relatie wordt snel en automatisch gelegd, waardoor de site intuïtiever is. Maar wanneer tekst of een reeks linkjes te ver van elkaar zijn gescheiden doordat er te veel witruimte tussen staat, moet een bezoeker harder nadenken om te bepalen welke informatie waartoe behoort. Een mooi voorbeeld waarin de wet van nabijheid wordt toegepast, is bij de navigatie. De navigatie items die bij elkaar staan horen bij elkaar. Zorg dat er voldoende witruimte staat tussen de elementen die niet bij elkaar horen. 

Wet van continuïteit: belangrijk voor verleiding en conversie

Elementen die op één doorgaande lijn liggen, laten ons denken dat er een continuïteit in de lijn is, ook als er eigenlijk helemaal geen continuïteit is. Ook worden de lijnen als één geheel gezien in een bepaalde flow. Zie het voorbeeld hieronder.

We volgen de flow. Onze hersenen vullen automatisch de ontbrekende informatie aan. Hierdoor zien we niet de losse stippen, maar een stippenpatroon in een golvende lijn. Een aantal punten hoort hier wel bij, en een aantal niet.

Je kunt de Wet van continuïteit gebruiken in design door:

• Verleidelijke ogen
• Suggestie beweging
  

In een eyetracking onderzoek is vastgesteld wat er gebeurt als de kijkrichting van de baby in onderstaande advertentie voor luiers wijzigt.

De rode gebieden zijn bekeken door 80 tot 100 procent van de mensen. In de eerste afbeelding kijkt de baby recht vooruit. Hierdoor kijken wij vooral naar het gezicht van de baby (“Oh, hoe schattig!). Voor de tekst is weinig aandacht, terwijl het de adverteerder daarom draait. Hij wil zijn boodschap overbrengen. Wanneer de baby richting de tekst kijkt, is de kijkrichting compleet anders. Niet alleen de tekst krijgt meer aandacht, ook de ‘kijkbreedte’ is veel groter. We volgen de blik van de baby, waarna slim de aandacht op de tekst wordt gelegd.

De suggestie van beweging kun je op een website gebruiken om de kijkrichting van websitebezoekers te sturen. Je hoeft hiervoor geen moeilijke animatiefilmpjes te laten maken met echte beweging, de suggestie dat iets beweegt of gaat bewegen is voldoende.

Adidas stuurt onze kijkrichting naar links met deze header op hun website, doordat de beweging die kant op gericht is. Wel nogal dom dat het logo en de tekst rechts staan, waardoor deze niet de gewenste aandacht krijgen. Deze sportieve man had beter naar rechts kunnen rennen, om het gewenste effect te behalen. Bij deze dus een tip voor Adidas om hun site te verbeteren!

De KLM pakt het beter aan dan Adidas. Door het vliegtuig richting de belangrijkste tekst op de pagina te laten vliegen, wordt de aandacht hier op gericht.

Wet van gelijkheid: belangrijk voor je herkenning

Dingen die op elkaar lijken worden gegroepeerd en als eenheid gezien. Hoe de elementen eruit zien, maakt niet uit. We groeperen op vorm, kleur, grootte, afstand, beweging of op andere overeenstemmende kenmerken. In het voorbeeld hieronder zie je rondjes en vierkanten. In het figuur zie je een kruis van vierkantjes.

Als iets altijd op een gelijke manier werkt op je website, verwacht je bezoeker dat het de volgende keer ook zo werkt. Zorg daarom dat elementen die hetzelfde werken op de site een consistente vorm of kleur hebben. Vooral gelijkheid van kleur leidt tot een sterk groeperingseffect, met name als er verder weinig kleuren zijn. Gelijkheid en consistent gebruik van vorm, kleur en grootte is bij een call to action (CTA) knop van cruciaal belang.

Wet van de gelijke bestemming/lot

Deze wet gaat over bewegende objecten.
Het stelt dat objecten die samen bewegen worden waargenomen als gegroepeerd of gerelateerde.
Bijvoorbeeld, tonen in een aantal cirkels met pijlen.

Wet van geslotenheid: belangrijk voor overzicht en rust

Figuren, ook al zijn deze niet compleet, zien wij wel compleet, we denken automatisch het geheel erbij. Je ziet hieronder een pandabeer, maar eigenlijk staan er wat losse zwarte vlekken.

Onze hersenen hebben de neiging om visuele gaten te verbinden en op te vullen met een lijn, kleur of patroon. Als een deel van een website omkaderd is door een bijna gesloten geheel, begrijpt de bezoeker dat alle elementen daarbinnen bij elkaar horen. Daardoor kun je kiezen om elementen weg te laten. Door vormen niet helemaal te omkaderen is de website minder druk.

Wet van de eenvoud

Deze wet houdt in dat mensen het fijn vinden als een beeld uit eenvoud bestaat. Denk hierbij aan het HEMA of IKEA logo. Het tegenovergestelde is bijvoorbeeld de telegraafpagina.

De wet van eenvoud leert ons dat we alleen het meest voor de hand liggende zien. Complexiteit in webdesign moet dan ook zoveel mogelijk worden vermeden.

Volgens Jakob Nielsen is eenvoud zelfs het belangrijkste gebruiksvriendelijkeidsprincipe. Des te minder je bezoekers laat zien, des te minder hoeven ze te scannen en te begrijpen en des te groter de kans dat ze de juiste keuze maken. Volgens hem wordt eenvoud niet bereikt door alles weg te halen, maar door enkel de juiste dingen over te houden.

Wet van voorgrond en achtergrond

Door voor- en achtergrond van elkaar te scheiden wordt onze waarneming georganiseerd. Het is daarbij moeilijk zo niet onmogelijk om zowel voor- als achtergrond waar te nemen. Hieronder te zien in het FedEx logo. Wat zie je eerst, de ‘E’ en de ‘x’ of de naar rechts wijzende pijl die gevormd wordt tussen deze letters door de witte restruimte?

Uit de Gestalt-principes komt de design-regel:

• Doe de Gestalt-Check
  Controleer de visuele relaties tussen schermelementen aan de hand van de Gestalt-principes Nabijheid, Gelijkenis, Coninuïteit, Geslotenheid, Eenvoud, Figuur/Grond, Gemeenschappelijk lot.

Om elementen te groeperen gebruik je de wetten voor Nabijheid, Gelijkenis, Gemeenschappelijk lot.
Om losse elementen als een geheel te zien gebruik je de wetten Continuïteit, Geslotenheid, Eenvoud, Figuur/Grond

Oefening 2

1. Bekijk deze video.
2. Zoek bij 4 verschillende principes een voorbeeldwebsite.
3. Kijk hoe je een website die je zelf hebt gemaakt kunt verbeteren aan de hand van deze Gestalt-wetten.

(naar boven)

We zoeken en gebruiken visuele structuur = We Seek and Use Visual Structure

Door het waarnemen van structuur in onze omgeving kunnen we snel betekenis geven aan objecten en gebeurtenissen.

Hieruit komen de volgende guidelines:

• Zorg voor visuele structuur
  Wanneer informatie compact en gestructureerd wordt gepresenteerd, is het makkelijker voor mensen om deze info te scannen en te begrijpen.
  
• Zorg voor visuele hiërarchie
  Zorg dat mensen kunnen focussen op de relevante informatie door deze op te delen in secties en subsecties met duidelijke labels, waarbij de hogere niveaus grafisch sterker gepresenteerd zijn dan de lagere niveaus. Gebruik koppen, opmaak zoals bold en opsomtekens om de hiërarchie in teksten weer te geven.

(naar boven)

We houden wel van taal maar niet van lezen - Reading is Unnatural

Het spreken en luisteren doet de mensheid al zolang deze bestaat. Het menselijke brein heeft geen aangeboren vermogen om te leren lezen. Lezen is, wanneer je het vergelijkt met spreken, een relatieve nieuwe kunstmatige vaardigheid. Mensen leren lezen door systematische instructie en praktijk.

Lezen op het beeldscherm is lastig. Veel tekst schrikt af.

Gebruik bij tekst op een website of app de volgende design guidelines:

• Het lezen niet verstoren maar juist ondersteunen.
  • Gebruik vereenvoudigde taal.
  • Verstoor het lezen niet door het gebruik van moeilijke of kleine lettertypen, drukke achtergronden, onnodige tekstherhalingen en gecentreerde tekst.
  • Gebruik tekstopmaak met visuele hiërarchie om scannend lezen te vergemakkelijken ( koppen, bullets, tabellen en benadrukte woorden).
• Beperk de noodzaak om te lezen.
  • Minimaliseer de hoeveelheid proza-tekst in een user interface.
  • Gebruik bij instructies zo weinig mogelijk tekst, net genoeg om gebruikers in staat te stellen om hun doelen te bereiken. In bijvoorbeeld een productbeschrijving, geef een kort overzicht van het product en laat gebruikers meer detail opvragen als ze dat willen.
    
• Test tekst op echte gebruikers.
  

Oefening 3

1. Maak van deze tekst een html-pagina. Pas hier alle guidelines van dit hoofdstuk toe. Je bent vrij om afbeeldingen, koppen, enz toe te voegen.
2. Geef bij de onderstaande schermen aan welke guidelines ze wel of niet hebben opgevolgd.

 

(naar boven)