Complexe content en UX design: hoe rijm je dat?

04 september 2017 Inzichten / Complexe content en UX design: hoe rijm je dat?

Alsmaar vaker krijgen we de vraag om complexe contentwebsites te ontwerpen. Dat gaat van uitgebreide, verplichte infofiches in de financiële wereld tot eindeloze productgamma’s in e-commerce. Zulke complexe content heeft zijn invloed op het webdesign.

Interessant weetje: in de afgelopen 10 jaar is onze aandachtsspanne van 12 minuten naar 5 minuten gezakt. Ons vermogen en onze wil om veel content te lezen, zijn dus duidelijk geëvolueerd. Hoe kunnen wij dan überhaupt ons volledig verhaal online vertellen en de doelgroep daarbij aandachtig houden? De juiste designinsteek kan daar alleszins bij helpen.

Vergeet ‘above the fold’

Mid jaren 90 waren webgebruikers niet gewend om te scrollen, maar tegenwoordig is het een volledig natuurlijke handeling geworden. We surfen meer op mobile, en dat maakt dat scrollen een bijna intuïtieve actie werd. Usability-onderzoek van design agency Huge wees zelfs uit dat users altijd scrollen, ongeacht of het design hen aanmoedigt om het te doen. Dat is ook de reden waarom Apple de scrollbar in 2011 default wegliet: het is vanzelfsprekend geworden voor de gebruiker dat hij/zij kan scrollen op een webpagina. Je hoeft dus niet langer meer alle informatie ‘above the fold’ te proppen.

We scrollen spontaan op een webpagina. Alle info op de homepage van Matexi boven the fold proppen hoeft dus niet.

Heel wat studies tonen ook dat mensen eerst een webpagina scannen - en dus sowieso scrollen - om te bepalen of de content voor hen interessant is. Zoals bekend scannen ze daarbij in een F-patroon, of een Z-patroon. Waarbij een F-patroon vooral voorkomt bij echte contentpagina’s. Pagina’s met traditioneel minder copy, zoals een landingspagina, worden eerder in een Z-patroon bekeken. Dat betekent dus ook dat je daarmee rekening houdt in je design: cruciale info toon je op de plaatsen waar het oog van je lezer blijft hangen: bovenaan van links naar recht, diagonaal naar beneden en onderaan weer van links naar rechts.

Weg met overtollige info

Om niet te hoeven scrollen, werd er tot voor kort gebruik gemaakt van bijvoorbeeld tabbladen of verborgen panelen. Content werd op die plaatsen vaak herhaald, vanuit de nood om gebruikers altijd de belangrijkste info mee te geven, zodat ze ook de rest van de info zouden begrijpen. (Bron: Medium) Die nood is er nu veel minder, aangezien scrollen intuïtief gebeurt. Content herhalen is met andere woorden geen goed idee, en kan zelfs irritatie opwekken. John Maeda, voormalig directeur van de Rhode Island School of Design, noemt het ‘doordachte reductie’ als een aanpak voor een beter ontwerp. Hij verklaart: simplicity is about subtracting the obvious and adding the meaningful.

Ook bij Wijs volgen we die strategie. Een website moet het doel hebben om de gebruiker op een overzichtelijke manier te informeren met behulp van hapklare content. Indien die propvol informatie zit, zal het onopzettelijk de gebruiker overweldigen. Wat hierbij kan helpen, is om de focus te leggen op je key values (USP’s, product- of dienstcategorieën, …) en die in de verf te zetten. Als designers werken wij daarom altijd samen met een informatiearchitect die precies die key values zal bepalen.

Hapklare content op de site van Proximus Move.

Tone of voice in woord en beeld

Vooraleer we aan de slag gaan met het design staan we even stil bij allerlei vragen die de site zullen vormgeven.

  • Wat is het doel van de website?
  • Welke boodschap willen we overbrengen?
  • Wie is de doelgroep?
  • Hoe navigeert de gebruiker doorheen de website?
  • Wat is de tone of voice?

Voor verdere voorbeelden refereren wij graag naar het Honeycomb principe van Peter Morville. Kort samengevat hoort een designer te anticiperen op wat de gebruiker nodig heeft. Dat betekent dat je de interface moet voorzien van eenvoudig bereikbare, begrijpbare en bruikbare elementen die hen hierin ondersteunen.

Met al die antwoorden in het achterhoofd, kunnen wij ons verder focussen op de uitwerking van het conceptverhaal. Dat concept zetten we dan kracht bij door het bepalen van passende lettertypes, kleuren, beeldmateriaal en andere ondersteunende visuals.

Aandacht naar de juiste elementen

Zeker bij complexe content is het van belang om inhoud binnen een interface duidelijk te organiseren voor gebruikers. Daarvoor kijken wij naar de visuele hiërarchie.

Die is aanvankelijk gebaseerd op de psychologie. Het hoofddoel is om de inhoud op de drager (webpagina, poster, …) te presenteren zodat gebruikers het belang van elk element kunnen begrijpen. Daarnaast zijn er nog een aantal verschillende manieren om de bezoeker te leiden naar de juiste elementen op de pagina.

De organisatie van de verschillende componenten geeft het belang aan voor de gebruiker op deze pagina van Pasco.

De kracht van copy

Woorden zijn een krachtig wapen. Ze kunnen iemand begeesteren of verwarren, kracht bijzetten of eerder zwak overkomen, bijdragen aan conversie of iemand afschrikken. High-quality copy is voor een website daarom net zo essentieel als andere visuele elementen.

Efficiënte copy binnen gebruikersinterfaces wordt bepaald door twee basiscriteria: de kwaliteit van het schrijven en de aansluitende looks.
Tubik Studio omschrijft het als volgt: “Woorden en visuele elementen moeten elkaar wederzijds ondersteunen, in harmonie samensmelten en organische consistentie bieden. Ieder stukje moet dus zorgvuldig geanalyseerd en gecreëerd worden op een manier die overeenkomt met het algemene ontwerpconcept en de positieve gebruikerservaring verbeteren door succesvolle interactie.”

Woord en beeld ondersteunen elkaar op de website van Mylène.

Geïmplementeerde copy kan op die manier verschillende functies vervullen:

  • informeren
  • communiceren
  • aanzetten tot interactie
  • aanzetten tot navigeren
  • beroep doen op de emoties
  • tone and voice creëren

Prikkelende beelden

Visuals zijn uiteraard een krachtige tool om je content kracht bij te zetten en je lezer ‘vast te houden’. Beelden zijn voor ons een integraal onderdeel van het concept. Ze ondersteunen het, zetten het kracht bij en geven context waar nodig.

Visuals ondersteunen de filosofie van Lineas: een dynamisch spoorbedrijf dat naar de toekomst kijkt.

BLogistics evolueerde van een typisch log staatsbedrijf naar een dynamisch, hedendaagse en winstgevende spoorwegmaatschappij onder de naam Lineas (lees de volledige case). De fotografie daarbij moest precies dat uitstralen: een dynamisch bedrijf dat hedendaagse transportoplossingen biedt.

Bij Wijs streven we altijd naar een uniform beeldgebruik en mijden we stockafbeeldingen omdat die vaak te generiek zijn en nooit een uniforme stijl kunnen bieden.

Animaties die de aandacht trekken

Animaties zijn veel meer dan leuke extraatjes om een pagina op te vrolijken. Ze hebben een duidelijk doel in het design, en worden het best op voorhand gedefinieerd. Animatie kan op 3 manieren gebruikt worden:

Interactie aanduiden:

Wanneer gebruikers over een klikbaar object hoveren, kan met een animatie worden duidelijk gemaakt dat er interactie mogelijk is met dit item.Zo kan een button bijvoorbeeld rood zijn, en oranje worden en inzoomen als je erover hovert.


Site voor Rock Werchter: als je over de elementen hovert, maakt een animatie duidelijk dat ze klikbaar zijn.

Nadruk leggen:

animaties kunnen de aandacht vestigen op een specifiek stukje informatie of een actie, bijvoorbeeld om de gebruiker aan te zetten om naar een volgende stap te gaan in een formulier.

Onthullen of net verbergen:

animaties kunnen gebruikt worden om extra info te verbergen of te onthullen. Een goed voorbeeld daarvan is de mobiele navigatie die openspringt vanuit een hamburgericoon.

Animaties helpen de gebruiker zo om op een bepaalde manier te navigeren doorheen de site. Met animatie creëer je een ervaring, maar het helpt ook om de merkidentiteit uit te dragen. Zo werkten we bij Samurai at work met cirkelanimaties die gebaseerd zijn op hun 4D-filosofie, inclusief de kleuren die daarbij horen. Het terugkerende cirkelmotief werd in een CSS-animatie gegoten die zorgt voor herkenbaarheid doorheen de site. Bovendien creëerden we zo een mooie balans tussen een dynamische look en feel, zonder de b2b-context te vergeten.

Cirkelvormige animaties in kleur ondersteunen het verhaal van Samurai at work.

Hoe een animatie aanvoelt is met andere woorden ook een belangrijk punt om over na te denken. Val Head legt in zijn boek Designing Interface Animation uit hoe je adjectieven die gebruikt worden om een merk te omschrijven, kan omzetten naar beweging of animaties. Een voorbeeld: een zachte, springerige beweging voelt als levendig en energiek. Een verende animatie die doet denken aan een elastiek komt dan weer over als speels en vriendelijk. Eens je alle animaties voorzien hebt, kan je patronen instellen van waar je welk soort animatie zal gebruiken. Waar je nadruk wil leggen zijn ze misschien eerder springerig, terwijl je animatie bij het hoveren over een button net zacht en geleidelijk zijn.

Animaties om de features van Harmony in de verf te zetten. 

Ademruimte voor elk element

Een manier om de aandacht te vestigen op verschillende elementen binnen je website is door het creëren van ademruimte. Als er aanzienlijk veel witruimte gelaten wordt tussen of rondom elementen, zullen die beter zichtbaar en scanbaar worden. Spacing kan bijvoorbeeld een elegant alternatief zijn op het gebruik van uitgesproken lettergroottes. De truc is om een juiste balans te vinden tussen witruimte, beeldmateriaal en copy. Een voorbeeld: op de site van Anorel neemt een sectie ‘productcategorie’ minstens 75 à 80 procent van de volledige beeldruimte in. Dat maakt dat je kan focussen op 1 component, dat bovendien voldoende ‘ademruimte’ krijgt en zo beter gelezen wordt.

Conclusie

Complexe content biedt een stevige uitdaging voor webdesign, maar als je het goed aanpakt ondersteunt het net die complexiteit en vereenvoudigt het de content voor de gebruiker. Bij Wijs streven we er daarom altijd naar om gebruikers makkelijk en snel te leiden naar de juiste content. Daarbij houden we rekening met gebruikersverwachtingen en baseren we ons dus op gedrag van bezoekers en patronen binnen webdesign. We begeleiden onze klanten in de kennismaking met hun doelpubliek en vertalen de tone of voice naar een online verhaal.

Ook een stevige digitale contentuitdaging voor de boeg? Kom eens praten met onze webdesigners.

Lees meer

Iedereen bij Wijs deelt zijn expertise, ook Jasper en Evi. Benieuwd naar de laatste nieuwtjes en blogposts? Schrijf je in voor onze nieuwsbrief!