24 June 2016
Annemarie Faber
Annemarie Faber
Share
Tweet about this on Twitter0Share on LinkedIn0Share on Facebook0

NN/g UX conferentie (22-27 mei 2016, Amsterdam)

De Nielsen Norman group (NN/g) staat bekend als een van de grootste usability consultancies uit de VS. In mei 2016 organiseerde NN/g in Amsterdam een conferentie over aspecten van sites en apps ontwerpen. Informaat’ers Annemarie Faber, Sjors Metz en Peter Vermeulen namen deel en doen verslag van wat ze hebben geleerd in de vorm van talrijke tips, suggesties en vuistregels.

Tijdens de presentaties werden regelmatig video’s getoond van bruikbaarheidstests uitgevoerd door NN/g. Sommige van recente datum, andere al weer enkele jaren oud. De presentaties werden onderbroken door (kleine) opdrachten afgewisseld met pauzes, waardoor de tijd snel voorbij ging en activiteiten interactiever en creatiever werden.

Mobiele websites & apps: ‘Essential Usability Principles’

Hoe mensen in feite hun smartphones gebruiken als je voor mobiel ontwerpt is belangrijk. Er zijn diverse kerntaken waarvoor gebruikers hun mobiel erbij pakken, zoals snel even iets opzoeken, berichten versturen en transacties verrichten.

Als we kijken naar de ‘user flow’ van iemand die met een vriend naar de bioscoop wil dan zijn er in korte tijd veel interactiemomenten. Gebruikers wisselen veel tussen apps om berichten te sturen of de gewenste film te vinden met een zoekmachine. Soms duren de sessies slechts enkele seconden, maar ook in zo’n korte sessie kan een taak nog steeds worden voltooid.

Kortere sessies komen op mobiel vaker voor dan langere: zo’n 73% van alle sessies met een smartphone zijn korter dan een minuut. Is de duur minder dan 15 seconden dan is er sprake van ‘microsessies’. In dergelijke sessies wordt meestal een notificatie gelezen, iets opzocht of gewoon de tijd gedood.

En dan de populaire vraag of je een app moet maken of kan volstaan met een ‘responsive’ site? Onderzoek van NN/g wijst uit dat apps voor specifieke vragen worden gebruikt, waarvan de gebruiker weet dat die app er antwoord op kan geven. Sites daarentegen worden pas geraadpleegd nadat een gebruiker op zoek is naar algemene informatie en via een zoekmachine terechtkomt op de betreffende site.

‘Functions & features’

Aangeraden wordt alleen die functionele mogelijkheden aan te bieden die waarde toevoegen aan de site of app. Probeer niet een app voor alles te maken. Apps met een onduidelijk of eenzijdig doel worden meestal na installatie nooit meer geopend. Apps met een duidelijk doel (zoals Facebook messenger) worden langer en intensiever gebruikt.

Een goed ondersteuning van microsessies en ‘quick actions’ komt de gebruikerservaring ten goede. Gebruikers zijn weliswaar minder met je app bezig, maar behalen hun doelen sneller. Zo houden zij meer tijd over voor leuke dingen en ervaren zij het gebruik van je app als een stuk prettiger.

‘Content’

Deel de content die je wilt tonen duidelijk in. Maakt daarnaast gebruik van bijvoorbeeld accordions en links naar secundaire pagina’s om extra gedetailleerde informatie te tonen. Vaak wordt er te veel informatie in een verkeerde vorm gepresenteerd in de hoop dat gebruikers alles doornemen. Vooral op mobiel is een gebruiker snel afgeleid. Je kan er altijd voor kiezen veel beeldmateriaal te gebruiken, maar NN/g-onderzoek wijst uit dat dit de bruikbaarheid niet ten goede komt.

De bruikbaarheid van een app of (mobiele) site is groter als er vooral tekst in plaats van afbeeldingen wordt gebruikt. Op de desktop werken afbeeldingen daarentegen beter. Dit ligt voor een deel aan de manier waarop iets wordt getoond. Afbeeldingen die een paginadeel in beslag nemen zorgen ervoor dat de ernaast geplaatste tekst moeilijk leesbaar wordt. Terwijl ‘full-width’ afbeeldingen er juist voor kunnen zorgen dat de gebruiker denkt dat het artikel afgelopen is. Voor een prettige gebruikservaring moet je daarom als ontwerper goed nadenken over wat je op welke manier een plaats wilt weergeven.

‘Easy access’

Een app of site moet op mobiel een duidelijke scheiding hebben tussen navigatie (chrome) en content. Niet alleen de zichtbaarheid en indeling van het menu, maar ook de grootte en eventuele verborgen navigatie-elementen moeten consistent zijn. Veel navigatie-elementen die hetzelfde doen kunnen de gebruiker verwarren. Met de huidige trends van ‘flat design’ en ‘material design’ is niet altijd meer duidelijk welke elementen klikbaar zijn. Het gebruik van afwijkende vormen en kleuren kunnen daarbij helpen. Borders dragen daar ook aan bij, net als het gebruik van de standaardplekken voor bijvoorbeeld menu’s op iOS en Android.

‘Workflow’

In het laatste deel van de presentatie ging het vooral over het pad dat gebruikers in je app of site volgen. Het is belangrijk goed na te denken welk patroon je toepast: ‘hub & spoke’ of ‘deck of cards’. Voor verschillende soorten apps is het handiger voor wisselende patronen te kiezen.

Formulieren invullen is op mobiel bijna altijd erg vervelend. Vraag je daarom altijd af of ieder invulveld wel echt nodig is. Vraag gebruikers zo min mogelijk in te voeren en gebruik de juiste invulmanieren bij de velden (bijvoorbeeld een numeriek toetsenbord bij een nummer van een credit card, alhoewel een scan-optie daarvoor natuurlijk geschikter is).

En tot slot heb je bij een flow natuurlijk te maken met het ‘vette vinger principe’, de navigatiepatronen en de klikgebieden (ook visueel) verduidelijken. ‘Hoovers’ werken niet en ‘gestures’ kunnen gebruikers ook niet zomaar gokken. Vaak is de audiofunctie op mobiel uitgeschakeld en ook de verschillen tussen ‘landscape’ en ‘portrait’ zijn erg groot. Daar is tegenwoordig ook nog eens ‘3D touch’ bij gekomen, waar het nog lang niet altijd duidelijk is of deze functionaliteit geïmplementeerd is of niet.

Kortom: Talloze facetten om mee rekening te houden als je voor mobiel gaat ontwerpen. Erg belangrijk dus om goed je doelgroep te bestuderen en kijken hoe ‘tech savvy’ zij zijn en waarvoor zij hun mobiele apparaten gebruiken.

‘UX deliverables & tips’

Ontwerpers moeten niet alleen goede ontwerpen maken, maar ze moeten deze ook effectief kunnen communiceren aan hun belangrijkste stakeholders. Daarvoor zijn verschillende ‘deliverables’ beschikbaar: van wireframe tot high-fidelity prototypes en van usability-rapporten tot stijlgidsen. Voor een effectieve informatie-overdracht is het belangrijk een deliverable te kiezen die bij de kennis en ervaring van je publiek aansluit. Soms wordt de keuze voor een deliverable voor je gemaakt. Stuur je deliverable dan bij de invulling de juiste richting op om je stakeholder te overtuigen. Zorg dat je deliverable begrijpelijk, overtuigend en aantrekkelijk is. Kies een passend niveau van ‘fidelity’ en gebruik echte content. Stuur aan op feedback die je nodig hebt door de juiste vragen te stellen aan je publiek. En geef inzicht in de context door het verhaal van de gebruikers te vertellen.

Antwoord op de vraag ‘Welke deliverable het meest effectief is voor welke doelgroep?’, vind je bij NN/g.

‘The human mind & usability’

Een presentatie geven, dat kunnen ze wel bij NN/g. De dag is lang, maar dankzij een fijne afwisseling van luisteren en interactie vliegt de tijd voorbij. Ook vertalen ze steeds de theorie naar de praktijk met een aantal voorbeelden, wat het een hele fijne sessie maakt. Hieronder vind je ter inspiratie onderwerpen die deze dag aan bod zijn gekomen.

‘Top-down versus bottom-up perception’

Er zijn twee manieren om informatie te verwerken. Top-down perceptie waarbij je je eerder opgedane kennis gebruikt om snel objecten te herkennen. Denk aan het hamburger-icoon als indicator voor een keuzemenu. Bottom-up perceptie daarentegen start met de inzet van onze zintuigen dat zich vervolgens vertaalt naar de hersenen. Door het gebruik van kleuren, contrast, grootte of beweging herken je bottom-up perceptie.

‘Central versus peripheral vision’

Met het centrum van je ogen (het punt waar je naar kijkt) kun je details en kleuren goed zien. Je gebruikt je zogeheten ‘central vision’. Andere delen van je ogen zijn gevoelig voor bewegingen, contrast en schaduw. Dit is je ‘peripheral vision’. Een beweging trekt daarom aandacht als het ergens in je blikveld verschijnt. Hoe verder een object van je central vision is verwijderd, hoe meer beweging of dynamiek nodig is om je aandacht te trekken. Dit is de reden waarom grote, bewegende online advertenties lastig zijn te negeren. Ze blijven doorlopend de aandacht trekken.

‘Attention’

Er zijn vier factoren die onze aandacht beïnvloeden en sturen.

  1. ‘Stimulus salience': Iets dat opvalt krijgt aandacht. Het is de peripheral vision die bijvoorbeeld een advertentie herkent (vooral grote plaatjes en bewegingen, niet de details) en hierdoor weet je welke stukken te negeren (banner blindness). Dit is ook het geval als iets een beetje lijkt op een advertentie. De advertentie herkennen is ‘bottom-up perception’ omdat je je zintuigen gebruikt. Plekken die je overslaat omdat je weet dat er op deze plekken vaak advertenties staan is ‘top-down perception’, want je gebruikt je kennis van eerdere ervaringen.
  2. ‘Prior experience': Oefening en de vertrouwdheid bij de taak, ook heb je dan een bepaalde verwachting. Als je een specifieke taak regelmatig verricht (een online formulier invullen, een overschrijving via internetbankieren verrichten of een product in een webwinkel kopen) ga je dit automatisch doen en gebruik je je ervaring. Fouten worden dan snel gemaakt en er komen capaciteiten van je brein vrij voor andere taken. Dit is de reden waarom er zo vaak geklaagd wordt over een herontwerp: ineens werkt de ‘auto-pilot’ niet meer.
  3. ‘Goals': Wat je wilt bereiken op een site. Mensen gebruiken internet doelgericht (‘task directness’).
  4. ‘Culture': Culturele kenmerken zijn van invloed op waar we onze aandacht op richten. Er is een opvallend cultureel verschil als het gaat om het negeren van context. Waar Westerse mensen meer aandacht hebben voor het object (bijvoorbeeld een trein op een foto) kijken Aziatische mensen meer naar de achtergrond en de context (bijvoorbeeld waar de trein staat, dat er gebouwen achter staan). Aziaten zien daarom veranderingen in de achtergrond veel beter dan Westerlingen.

Geheugen

Onze zintuigen verwerken in feite veel meer informatie dan we feitelijk gebruiken. Waarnemen doen we onbewust en waarnemingen komen binnen in ons snelvervagende sensorisch geheugen. In een fractie van een seconde wordt bepaald of een waarneming naar het kortetermijngeheugen wordt verplaatst. Het kortetermijngeheugen heeft een beperkte capaciteit van ongeveer 20 seconden. Je kunt ongeveer 5 tot 9 brokken informatie onthouden. Om het vervolgens naar het langetermijngeheugen te verplaatsen moet het worden geoefend of moet het passen bij wat je al weet. Er zijn twee typen langetermijngeheugen: het procedurele geheugen, waarbij het gaat om de kennis iets te kunnen doen (bij vaardigheden als fietsen of piano spelen) en het declaratieve geheugen, onder te verdelen in het episodische (een gebeurtenis of een bepaald moment onthouden, zoals een vakantie of conferentie) en semantische geheugen (om feiten te onthouden, zoals een hoofdstad).

Het werkgeheugen is een type kortetermijngeheugen dat je als tijdelijke buffer gebruikt als je met een taak bezig bent. Als ontwerpers moeten we hier niet teveel een beroep op doen. Laat daarom geen placeholders in een formulier verdwijnen als je erop klikt. Ook vergelijkingen zijn lastig te maken als je informatie op twee verschillende schermen ziet. Tabellen zijn veel gemakkelijker om vergelijkingen te kunnen maken, omdat het minder een beroep doet op het werkgeheugen.

Ook moeten ontwerpers zich realiseren dat gebruikers al veel ervaring hebben met andere sites en apps. Ontwerpstandaarden voor consistentie in beleving toepassen ontlasten het werkgeheugen van gebruikers.

Problemen oplossen

Gebruikers scrollen op een pagina naar beneden als het scrollen zelf minder inspanning kost dan het voordeel dat ze verwachten (de ‘interaction cost’ van het scrollen). Wordt er geen voordeel verwacht dan ontbreek een reden te scrollen. Meer hierover vind je bij NN/g.

Voor het switchen tussen apparaten geldt hetzelfde. Met ‘device inertia’ wordt bedoeld dat je toch een bepaald device blijft gebruiken dat niet optimaal is, maar van device wisselen heeft een hogere ‘interaction cost’ dan ermee doorgaan. Maak dus duidelijk wat de voordelen van het switchen zijn. Een gebruiker kan dan zelf bepalen of het de interaction cost waard is.

Analytics & UX: Hoe gebruik je analytics om UX te ondersteunen en verbeteren?

  1. Bedenk waar je wilt beginnen
    Een van de valkuilen van analytics is de overload aan informatie. Bedenk tevoren goed wat je wilt onderzoeken. Je kan analytics gebruiken voor het ontdekken van problemen (usability issues, health monitoring of strategische ondersteuning). Je kan het ook gebruiken om te optimaliseren, te meten hoe effectief je ontwerp is of om een ontwerpvariant te valideren.
  2. Bepaal wat je wilt meten
    Binnen analytics heb je een ruime keuze aan meetinstrumenten, van het aantal ‘page views’ tot ‘goal completion’. Kies een instrument dat goed aansluit bij je onderzoeksdoel. Vaak zijn er meerdere manieren om tot een antwoord te komen. Maak segmentaties ter vergelijking van verschillende groepen. Analytics is veelal goed in de beantwoording van wie-, wat- en waar-vragen. De waarom-vraag is moeilijker te beantwoorden met analytics.
  3. Kies de juiste tool
    Zorg ervoor dat het gekozen hulpmiddel juist is geïmplementeerd. Maak met het instrument een goede keuze welke functionaliteit je kunt en wilt gebruiken.
  4. Stel een goede nulmeting op en maak een valide vergelijking.
    Analytics is erg contextgevoelig. Een ‘bounce rate’ van 47% is op zichzelf niet hoog of laag. Interpreteer je uitkomst in vergelijking met andere pagina’s of met het gemiddelde van vergelijkbare landingspagina’s binnen je sector. Trek valide conclusies uit je onderzoek. Nu je een antwoord hebt op wie, wat of waar, kun je je waarom-vraag beantwoorden door je onderzoek te versterken met gebruikersonderzoek of een vragenlijst.
  5. Deel je bevindingen op een effectieve manier
    Zorg ervoor dat je de juiste gegevens laat zien die voor iedereen goed te interpreteren zijn. Test op dezelfde manier je verbetervoorstel om te zien of probleem echt is opgelost.

‘Web Page UX Design: Optimizing pages to deliver on business goals’

Wat een effectieve pagina is is afhankelijk van het doel ervan. Sommige pagina’s zijn bedoeld gebruikers iets te laten kopen, andere willen slechts informeren en een derde richt zich op gebruikersinteractie met content. Het is de kunst op een bruikbare manier deze doelen zo effectief mogelijk te bereiken. In de NN/g-training kwamen alle basisonderdelen van een goede webpagina aan bod. De meeste onderdelen daarvan kent iedere webontwerper inmiddels. Desondanks is het goed soms even terug naar de basis te gaan, voor je meteen een ontwerp begint te maken.

Bepaal het primaire doel van de pagina en eventuele de secundaire doelen. Zorg ervoor dat het hoofddoel voor een gebruiker duidelijk als zodanig te herkennen is, zonder schreeuwerig te worden. Bouw je ontwerp stuk voor stuk op: content, ‘look-and-feel’, ‘call-to-actions’, navigatie, footers of animatie. Probeer bij iedere stap bewust te kiezen voor een oplossing die het beste past bij je doel. Blijf de pagina als geheel evalueren en stuur bij waar nodig.

Over Annemarie Faber

Annemarie Faber is interaction designer bij Informaat. Ze heeft een achtergrond in informatiekunde en cognitieve psychologie. Annemarie vindt het leuk om alles te leren van een complexe omgeving en met die informatie als basis ontwerpen te maken voor de beste gebruikservaring.

Over Sjors Metz

Sjors Metz (@sjorsmetz) is UX designer bij Informaat. Hij heeft ruim 4 jaar ervaring in uiteenlopende UX projecten, waaronder websites voor het delen van muziek, webshops, intra- en extranetten voor gemeentes en applicaties voor bedrijven in de financiële sector. Naast zijn passie voor ontwerpen is hij bestuurslid bij Stichting Waterdragers en zit hij graag op de racefiets.

Over Peter Vermeulen

Peter Vermeulen is UX designer bij Informaat. Hij heeft een achtergrond in Digitale Media & Communicatie. Als ontwerper heeft hij ook ruime ervaring met SEO en gebruikersonderzoek. In zijn vrije tijd speelt hij graag gitaar of piano en is regelmatig te vinden op zijn mountainbike.

Events (20)

Share
Tweet about this on Twitter0Share on LinkedIn0Share on Facebook0