You Never Get A Second Chance…
“Another aspect of the Mac OS x ui that I think has been tremendously influenced by [Steve] Jobs is the setup and first-run experience. I think Jobs is keenly aware of the importance of first impressions…I think Jobs looks at the first-run experience and thinks, it may only be one-thousandth of a user’s overall experience with the machine, but it’s the most important onethousandth, because it’s the first one-thousandth, and it sets their expectations and initial impression.”

—Uit Getting Real (37 signals) John Gruber

Bij het ontwerpen van bruikbare, intelligente en aantrekkelijke user interfaces, wordt vaak een gemiddelde type content gebruikt. Gelukkig hebben we geleerd om ook ‘typisch schreeuwerige’- banners te gebruiken. En (visueel) te testen met gebruikerscontent dat niet in eerste instantie ons ontwerpers hart harder doet kloppen. Elke mogelijke smerige detail is afgedekt en uitgewerkt… maar hebben we ook gedacht aan de zogenaamde “Blank Slate” die bezoekers of gebruikers als eerste ervaring zullen opdoen?

Design patronen

Met mijn geheime alter-ego ben ik opnieuw gaan inschrijven bij diverse grote sociale netwerken om te zien hoe zij dat doen. Hoe word ik verleidt om na het registreren de site te gaan gebruiken. Te gaan vullen met mijn waardevolle persoonlijke informatie. Of om het te personaliseren voor mezelf, zodat ik nog eens terug kom. Kortom: hoe ziet die ‘Blank Slate’ bij de meeste grote bekenden eruit?

Opvallend is dat meeste sites de gebruiker in één moeite in de “invite”-val lokken. Door een invulveld voor e-mailadres (wat voor ook de inlog van de site is) en password neer te zetten, lijkt het alsof je inlogt. Twitter neemt deze first-time user ‘trap’ erg ver, maar mogelijk wel op meest interessante wijze:

Twitter: Look who else is here. Start folowing them!

Enkele andere goede en minder goede Blank-Slate voorbeelden

Facebook: voor de gevorderde 'social-networkers', geen inspiratie

Linkedin: vol en schreeuwerig!

Slideshare: beginnen met (te veel?) inspiratie opdoen.

Google RSS reader: mijn persoonlijke favoriet. Niet overladen, wel uitnodigen.

Flickr: zwarte band 'Blank Slate' ontwerpen.

Backpack: van 37signals; uitvinders van het 'Blank Slate'- issue

Best practices, waar moet je aan denken:

• Lege ruimtes gebruiken voor tutorials of help features.
• Maak gebruik van on-afgemaakte delen content, gebruikers hebben de neiging om het af te maken, netjes te maken.
• Laat een voorbeeld van een gevulde pagina zien, wat bezoekers kunnen verwachten en waarom ze even moeten doorbijten.
• Beantwoord first-time vragen als: “wat voor pagina is dit?”, “wat moet ik nu doen?” en “hoe ziet het er vol uit? (is het mijn moeite waard?)”
• Kortom: schep de juiste verwachtingen, help frustratie verminderen, voorkom intimidatie en verwarring.

Bronvermelding: Getting Real (37 signals)

Een van deze methodes is om Personae’s in te zetten. Een Persona is een fictieve gebruiker die representatief staat voor een gebruikersgroep. Gedurende het ontwerpproces kunnen keuzes hieraan getoetst worden. Nu is het niet de doelstelling van deze post om inzicht te geven in het opzetten van Persona’s maar juist inzicht te geven in het bestaan van diverse gebruikersgroepen en duidelijk te maken hoe deze ons kunnen helpen bij bij het verbeteren van de User Experience. Klik hier als je verder wilt lezen over Persona’s.

Een introductie in de Theorie van Kolb

De theorie van Kolb is (zoals de naam al doet vermoeden) ontwikkeld door David A Kolb. Kolb is leerpsycholoog die veel invloed heeft gehad op ons huidige leermodellen die wordt toegepast in het onderwijs. Kolb ontwikkelde de Leercyclus van Kolb. Dit model gaat ervan uit dat wanneer wij leren dat wij vier dimensies doorlopen.

• Concreet Ervaren
• Waarnemen en Overdenken
• Abstracte Begripsvorming
• Actief Experimenteren

Ieder dimensie kenmerkt zich door zijn eigen manier waarop men leert en omgaat met informatie en kennis. De gebieden tussen deze dimensies definieerd 4 verschillende typen leerstijlen.

De leerstijlen van Kolb

Hieronder volgt in het kort enkele eigenschappen van de leerstijlen. De leerstijlen hebben niet als doel de hokjesgeest te bevorderen, maar geeft inzicht dat bepaalde leerstijlen beter toepasbaar zijn in bepaalde omstandigheden.

Dromer - Concreet Ervaren en Waarnemen & Overdenken.

• Groot voorstellingsvermogen
• Bekijkt een probleem vanuit meerderen perspectieven
• Zoekt informatie
• Is erg creatief

In de praktijk

• Zorg voor meerdere ingangen om een taak uit te voeren.
• Geef sturing in het ontwerp zodat men niet raakt afgeleid.
• Bied informatie niet alleen vanuit het product aan maar ook vanuit een thema.

Denker - Waarnemen & Overdenken en Abstracte Begripsvorming.

• Houdt van abstracte concepten
• Kan theoretische modellen ontwikkelen
• Geduldig

In de praktijk

• Bekijkt eerder tabellen dan verhalen
• Kan makkelijk omgaan met nieuwe interactie patronen en concepten.
• Informatie kan op een complexere manier getoond worden.

Beslisser - Abstracte Begripsvorming en Actief Experimenteren.

• Kan theoretische modellen ontwikkelen
• Erg gericht op ontwerp
• Kan goed logisch redeneren
• Actie gericht

In de praktijk

• Maak content scanbaar
• Zorg voor een duidelijke call-to-action op ieder pagina.
• Prefereert opsommingen boven lange verhalen.

Doener - Actief Experimenteren en Concreet Ervaren

• Brengt ideeën in actie / doelgericht
• Kan zich makkelijk aanpassen aan de omgeving
• Intuïtief
• Experimenteren

In de praktijk

• De doener wordt verleidt door knoppen, sliders en ander elementen wat interactie uitlokt.
• Presenteer informatie op een interactieve wijze.

Kolb voor een betere User Experience

Leuk deze theorie, maar nu de praktijk! Wat bovenstaande duidelijk maakt is dat je de eindgebruikers niet over één kam kan scheren. Wanneer je ontwerpt voor een brede doelgroep is inzicht in de diverse gebruikersgroepen van wezenlijk belang. Zorg ervoor dat je de diverse gebruikersgroepen bedient en inhoud op verschillende manieren vorm geeft. Zo leert het ons dat niet iedereen interesse heeft om lange verhalen te lezen. Een Dromer zal dit graag lezen, maar een Beslisser daarentegen is al snel afgeleid. De Doener wil veel interactie en een Denker houdt van orde en overzicht.

Moet je nu altijd alle leestijlen bedienen? Nee, ik denk dat voor sommige momenten je eerder zal toespitsen op een bepaalde type gebruiker. Maar het is wel goed om ook de andere leerstijlen in het achterhoofd te houden. Wanneer je de gebruiker veel informatie moet vertellen zorg er bijvoorbeeld voor dat de tekst scanbaar is, zodat ook een denker en beslisser verleidt wordt om de informatie tot zich te nemen. En wissel stukken tekst af met opsommingen een visual om de tekst te illustreren.

Voorbeelden uit de praktijk

Hieronder volgen enkele websites van verzekeraars waar is gekeken hoe de diverse Leerstijlen worden toegepast. Er is bewust voor deze type website gekozen omdat juist websites van verzekeraars meerdere gebruikersgroepen behoort aan te spreken.

Zilverenkruis.nl

De website van Zilveren Kruis bedient verschillende leerstijlen door o.a. het toepassen van duidelijke call-to-actions naar producten, de thematische insteek (hooikoorts) en de grote foto die meer een Dromer zal aanspreken. De Doener wordt verleidt door bijvoorbeeld een hooikoortstest. Voor Denkers en Beslissers zijn er duidelijke call-to-actions en wordt informatie puntsgewijs gepresenteerd.

netpolis.nl

Netpolis spreekt hier niet alle leerstijlen aan. Alhoewel er wel gebruik is gemaakt van een grote foto blijft de hoeveelheid informatie erg beperkt en wordt deze maar op één manier getoond. De website richt zicht met name op de Doener en Denker.

Unive.nl

Hierboven wordt de landingspagina van de doorlopende reisverzekering van Unive.nl getoond. De informatie wordt op meerdere manieren aangeboden. Brochures zijn direct onderaan de pagina beschikbaar , rechts onderaan het scherm is een module ‘Keuzehulp’ die met name een Dromer en Doener zal aanspreken. Er is een call-to-action naar premieberekenen wat een Beslisser zal aanspreken. Voor een Denker mist hier nog een  overzicht van het product in een abstractere weergave.

Conclusie

Het toepassen van deze leerstijlen is niet de garantie voor een goede User Experience, maar draagt hier wel aan bij. Het helpt ons om inzicht te krijgen in de diverse manieren waarop mensen informatie tot zich nemen en met websites/apparaten interacteren. Voor het goed toepassen van deze inzichten zijn andere methodieken beschikbaar.

Verder lezen

• Heldere Presentatie over de Leerstijlen van Kolb (http://www.haygroup.com - engels)
• Leer hier jouw Leerstijl te ontdekken

Seth Godin laat zien dat het bereiken van verandering schuift van factory model, tv-model naar leading-model.

Alhoewel dergelijke modellen goed de verschillende fases binnen webontwikkeling weergeven en ook houvast biedt bij ontwerpkeuzes die gemaakt moet worden blijven ze nog erg gericht op het uiteindelijke eindproduct. Bijvoorbeeld een website of desktopapplicatie. Het model biedt geen houvast voor het ontwerpen van de steeds dynamische manier waarop de gebruiker interacteert met diensten, apparaten en systemen. Het oude model waarbij de gebruiker via één systeem interacteert begint te veranderen. Niet de applicatie, maar de (virtuele) locatie van de gebruiker wordt steeds belangrijker (cross-source).

Ontwikkelingen die hieraan bijdragen;

• Sterke groei van social media; Via linkedin, twitter en hyves ben je altijd in contact met je netwerk.
• Mobiliteit; De gebruiker is altijd en overal online. De gebruiker is niet meer beperkt tot zijn kantoor. De behoefte voor informatie moet overal beantwoord kunnen worden.
• Flexwerken; Men heeft geen vaste werkplek meer waardoor hij/zij op meerdere locaties toegang moeten kunnen krijgen tot de systemen.

Je kan een prachtige online User Experience neerzetten om je product te verkopen, maar de doelgroep zit niet te wachtten om de website te bezoeken. De doelgroep zit namelijk op hyves of linkedin en doet dit vanaf een laptop of mobiele telefoon.

Om die reden is het belangrijker om een goede cross-source User Experience te ontwerpen die de klant ervaart daar waar hij/zij op dat moment is.

1. Make It Direct
   ‘In-page editing’, ‘Drag and Drop’ en ‘Direct Selection’
2. Keep It Lightweight
   ‘Contextual tools’ en ‘Secondary menu’
3. Stay of the Page
   ‘Overlay & Inlay’, ‘Inline paging’, ‘carousels’ en alles ‘Single Page’
4. Provide an Invitation
   “Invite me to do it!”
5. Use Transitions
   ‘Transitional patterns’ en design voor focus
6. React Immediately
   ‘Live search + suggest’, ‘Autocomplete’: ‘lookup patterns’

Meteen is al duidelijk dat het boek “Designing Web Interfaces” bedoeld is voor rich (web-) interactions. Een boek vol design patronen, gericht op het ontwerpen van rijke user experiences, bij voorkeur single-page interacties.

Elk hoofdstuk, elk design principle, begint met een stuk theorie. De design patronen worden ontleed qua werking en de valkuilen of voordelen worden duidelijk op een rijtje gezet. Elk subhoofdstuk wordt afgesloten met een sectie ‘best practices‘ (aanrader voor scannende lezers), een rijtje “do’s and don’ts” die de moeite waard zijn om te overwegen. En redenen die je allang was vergeten of die je kunt gebruiken wanneer je voor een bepaald patroon moet pleiten (of afbranden).

Tijdens het schrijven van dit boek hebben Bill en Therese ons lang lekker gemaakt met kleine tipjes van de sluier op designingwebinterfaces.com. Met een Flickr collectie met de meeste, zo niet alle, patronen uit het boek: omdat het kleine plaatje in het boek niet altijd even duidelijk is.

Met andere woorden…

Een aanrader! Het is een prettig boek om te lezen, zelfs om snel te scannen omdat de tekst in kleine brokjes is opgedeeld. Handig om paraat te hebben, dankzij de theorie en de vele tips en suggesties.

De eerste in een serie is de Gestalt Theorie. Geïntroduceerd door Christian von Ehrenfels en bekend geworden door Wertheimer. Deze theorie, die met name bekend is geworden om zijn visies op onze visuele perceptie, geeft waardevolle inzichten bij het ontwerpen van overzichtelijke ‘interfaces’ in zowel de fysieke als de online ruimte.

Gestalt (Duits voor geheel, gedaante, voorkomen) gaat ervan uit dat onze waarneming niet een eenvoudige opstelsom is van wat wij zien. Maar dat deze informatie onder andere wordt gefilterd door persoonlijke en culturele ervaringen en gewoontes. Daarnaast zijn onze hersenen erop ingericht om een optimaal en meest eenvoudige vorm te creëren van hetgeen wat wij waarnemen.

Een onderdeel van de Gestalt Theorie die voor ontwerpers interessant is, is de wet van Prägnanz. Deze wet zegt dat wij geneigd zijn om onze waarnemingen te ordenen zodat het consistent, gestructureerd, symetrisch en eenvoudig is.

De wetten van Prägnanz

Hieronder volgt een overzicht van de wetten van Prägnanz. Deze wetten kunnen uiteraard twee kanten op werken. Zo kan de wet van overeenkomst ook gebruikt worden om elementen juist van elkaar te onderscheiden.

Wet van ‘Similarity’

Wanneer de vorm die wij bekijken complex wordt willen onze hersenen deze vorm vereenvoudigen. Een methode om dit te doen is om onze waarneming te groeperen op basis van overeenkomstigheid in grootte, kleur en vorm. In de praktijk zie je dit goed terug bij een afstandbediening. Hier zijn knoppen met een overeenkomstige functionaliteit gegroepeerd doordat zij dezelfde vorm hebben.

Op basis van vorm worden functionaliteit gegroepeerd. Hierdoor is het ondanks de beperkte kleurgebruik al snel duidelijk welke knoppen bijelkaar horen.

Door informatie in een zelfde vorm weer te geven kunnen we informatie groeperen.

Wet van ‘Proximity’

Een andere mechanisme van groeperen is op basis van nabijheid. Elementen die dicht bij elkaar liggen worden als groep beschouwd.

Door de afstand tussen de zoekresultaten en google-adds ontstaan hier 2 groepen. Binnen de groep van zoekresultaten wordt een witregel gebruikt om individuele resultaten van elkaar te scheiden.

Op vergelijk.nl wordt goed gebruik gemaakt van de 'wet van nabijheid' om de diverse elementen van elkaar te onderscheiden.

Wet van ‘Closure’

Wat deze wet aangeeft is dat wij in onze waarneming een vorm aanvullen op basis van onze ervaringen. Hierdoor zijn kleine visuele hints al voldoende om een vorm te suggereren. Deze principe wordt gebruikt in onder andere het ontwerp van iconen, logo’s en fotografie.

Je leest hier IBM omdat je hersenen de witte lijnen invullen

Binnen de fotografie wordt Closure vaak gebruikt om foto’s aantrekkelijker en spannender te maken. Door elementen weg te laten wordt het aan de verbeelding van de gebruiker overgelaten.

Je hoeft niet de snoepautomaat in zijn geheel te zien. Op basis van eerdere ervaringen kunnen we de vorm aanvullen.

Wet van ‘Continuance’

Deze wet beschrijft een mechanisme om de waarneming van een gebruiker te sturen. De Gestalt psychologen gebruikte hierbij een experiment waarbij 2 lichtpunten die iets van elkaar verwijderd waren vlak achter elkaar oplichten. Wanneer wij dit aanschouwen zijn wij geneigd hierin een beweging te zien. Ook op andere manieren kan de gebruiker worden gestuurd in zijn waarneming. Als iemand naar boven kijkt en wijst zijn wij geneigd om ook daadwerkelijk naar boven te kijken of wanneer op een website een pijl naar recht wijst ben je geneigd om direct rechts van de pijl te kijken.

Je volgt automatisch de pijl naar het de tekst eronder.

De pijl op Ditzo.nl wijst weg van de button. Waardoor je aandacht van de knop wordt weggetrokken.

Wet van ‘Simplicity’

Onze hersenen zijn er niet op gericht om complexe vormen waar te nemen. De hersenen bedenken altijd de meest eenvoudige oplossingen op basis van ervaringen. Onderstaand voorbeeld illustreert dit principe.

Als je de linker vorm ziet zou je denken dat het twee cirkels zijn waarbij de zwarte cirkel de groene cirkel overlapt. Terwijl de groene cirkel in werkelijkheid misschien kan bestaan uit een complexere vorm.

Wanneer onze hersenen geen aanknopingspunten hebben om de waarneming te groeperen en te vereenvoudigen ervaren wij hetgeen wat wij zien als chaotisch. Kortom de gebruiker klikt de website weg of laat het apparaat liggen. De wetten van Gestalt geeft voor een ontwerper enkele aanknopingspunten bij het ontwerpen van gebruikersvriendelijke website. En  biedt anderen een houvast om een website te beoordelen en te begrijpen.

Gestalt in de praktijk

Telegraaf.nl

De website van de Telegraaf biedt ons visueel weinig houvast om het beeld te groeperen en/of te vereenvoudigen. Er worden teveel verschillende vormen gebruikt en de content staat te dicht op elkaar waardoor we het beeld niet kunnen groeperen. Tevens is de content niet uitgelijnd waardoor onze waarneming niet wordt gestuurd. De gebruiker zal deze website ervaren als druk en onoverzichtelijk.

Funda.nl

Funda laat veel ruimte tussen de diverse elementen op het scherm waardoor we het goed kunnen groeperen. De elementen uit de hoofdnavigatie hebben een gelijke vorm waardoor we deze goed kunnen onderscheiden van de subnavigatie die hier direct onder wordt getoond. De achtergrond kleuren en randen om de elementen helpen ons bij het structureren van de informatie.

Concertagenda.nl

Dit is het agendaoverzicht van concertagenda.nl. Omdat de ‘buttons’ voor de tickets en de koppen van het agendaitem dezelfde kleur hebben zou de gebruiker dit als een groep van dezelfde niveau kunnen ervaren. Door de knop naar de tickets een andere kleur te geven is het voor de gebruiker eenvoudiger om een onderscheid aan te brengen en het beeld te ordenen.

Nog meer over Gestalt

Wil je nog meer weten en lezen over Gestalt en hoe je dit kan toepassen om de User Experience te optimaliseren dan volgen hieronder enkele links.

• Slideshare presentatie over Gestalt en Design - Henk Wijnhold
• Gestalt beschreven door Jim Saw
• Definitie van Getalt op Wikipedia
• Gestalt en webdesign - Usability web

In de volgende post zal ik de Theorie van David Kolb toelichten. Deze geeft ons belangrijke inzichten in verschillende leerstijlen van gebruikers.

Om de gebruiker niet elke keer te verrassen is het aan te raden om een patroon te kiezen die aansluit bij de verwachtingen van de gebruiker en om collectief  afspraken te maken hoe een dergelijk interactie patroon zich zou moeten gedragen. Op het internet bestaan er diverse websites die een overzicht geven van Design Patterns. Hieronder volgt een overzicht van een aantal handige websites.

UI Patterns | http://ui-patterns.com/

Eén van de meest volledige design-pattern overzichten is die van UI Pattern. Naast meerdere voorbeelden per pattern worden er heldere en uitgebreide beschrijving gegevens van de oplossingen en rationales.

Yahoo Design Patterns Library | http://developer.yahoo.com/ypatterns/

De YDPL geeft een handig overzicht van enkele veel gebruikte design patterns. Onder andere voor zoeken, navigatie maar ook voor social sites en RIA achtige applicaties. De website is helaas niet zo uitgebreid als je zou verwachten van een dergelijke website als Yahoo.

Welie Patterns | http://www.welie.com/patterns

Martijn van Welie heeft op zijn persoonlijke website een uitgebreid overzicht van diverse interactiepatronen. Daarbij geeft hij ook voorbeelden uit de praktijk en kunnen bezoekers hierop reageren.

Andere websites

• Pattern Tab | http://patterntap.com/ - Screenshots van toepassingen van Design Patterns
• Aanvulling? We vernemen ze graag.

Bij deze dan ook de oproep om mee te schrijven aan het artikel ‘User Experience Design‘ op Wikipedia!

Daarnaast zijn het aantal aanbieders per product enorm toegenomen. Deze ontwikkeling en de steeds mondiger wordende consument op het internet maakt de klant steeds kritischer.

User Experience Design verdient daarom meer aandacht. Dagelijks worden er nog producten en diensten gelanceerd met een beroerde User Experience die onze wereld vervuilen met ongebruiksvriendelijke, frustrerende en tijdrovende interacties.  Bijvoorbeeld de stem-herkenning als je ABN Amro belt en uiteindelijk 3 keer hetzelfde moet zeggen alvorens het systeem je begrijpt of dat je net voordat je een betaling wilt doen bij SNS internetbankieren eruit wordt gegooid omdat het systeem vindt dat de sessie is verlopen en ga zo maar door.

Daily UX moet een bron van inspiratie worden voor niet alleen vakgenoten, maar ook voor bedrijven die snappen dat een goede User Experience een basis is voor een tevreden klant en hierin willen investeren.