Content first: van responsive design naar een dynamische website

Auteur: Paul Versteeg


Het tonen van relevante content op de juiste plaats en op het juiste moment. Dit designprincipe leeft al sinds dag één van de geschiedenis van het web maar is met de komst van responsive webdesign nieuw leven ingeblazen.

Responsive design zorgt ervoor dat websites een stuk dynamischer zijn geworden doordat de layout zich aanpast aan het device. Dezelfde technieken moeten nu worden ingezet om de content te presenteren en rangschikken op basis van de interesse van de bezoeker.

Content first: van responsive design naar een dynamische website

Sinds gebruikers browsen met mobiele devices is het belangrijk om in het ontwerpproces rekening te houden met de wijze waarop content zich aanpast aan de beschikbare schermresoluties. Hierdoor zijn designers en front-enders tegenwoordig op een meer dynamische wijze met webdesign bezig. De invalshoek is echter vooralsnog technisch: hoe kunnen we het design zo optimaal mogelijk tonen op de verschillende devices?

Wanneer de content op een mobiel apparaat wordt getoond is het noodzakelijk om goed na te denken over wat er wordt getoond en in welke volgorde. 'Content first' is het label dat op deze designtrend is geplakt. Een volgende stap is om de content niet alleen op basis van deze technische noodzaak maar ook op basis van personalisatie en relevantie aan te bieden. 

Content moet, nu de mogelijkheden er zijn, zo worden georganiseerd dat de bezoeker krijgt wat hij wenst en verwacht. Informatie kan worden gefilterd en gerangschikt zodat deze zich niet alleen aanpast aan het device maar ook aan de gebruikerswensen. Door variabelen zoals relevantie, locatie, tijd en personalisatie in het designproces op te nemen en deze te combineren met dynamische interfaces, zullen websites intuïtiever en nuttiger worden. 

Time Orange: Dynamic layout

Een mooi voorbeeld is Time Orange. Dit is een interne portal waar videorapportages van ING medewerkers worden getoond. De artikelen in het maandelijkse magazine worden telkens op een andere manier gepresenteerd waarbij de redactie de mogelijkheid heeft om ook bepaalde berichten te pushen die minder aandacht kregen. 


Time Orange: Dynamic layout

Waar het om gaat is dat de content responsive is vanuit gebruikersperspectief en niet alleen vanuit de invalshoek van de technische realisatie van een responsive website.

Gebruikers beïnvloeden de layout

De website WWJATB 360 was een initiatief van Nationale-Nederlanden en betreft een verzameling van nieuwsberichten over sociale zekerheid, inkomen en pensioen. Het aantal tweets, hits of views hadden invloed op de wijze waarop de berichten werden getoond. De grootte, de vorm en de positie van de panels was afhankelijk van de populariteit ervan: een relevant artikel werd visueler en kreeg op die manier meer nadruk. Het bijzondere was dat de interface voortdurend werd beïnvloed door het gedrag van haar bezoekers. Het systeem analyseerde het gedrag en paste op basis van een aantal redactionele spelregels de layout van de webpagina aan zodat de content zo relevant mogelijk getoond werd. De website is inmiddels offline gehaald, maar blijft een toonaangevend voorbeeld voor het dynamisch inrichten van de website-content.

Levende interfaces 

Iedereen kent de sluiproutes door grasveldjes die ontstaan als je je route wilt verkorten. Deze olfinantenpaadjes tonen op een mooie manier aan dat mensen hun eigen willen kiezen. Gedrag is moeilijk te voorspellen of af te dwingen en daarom is het beter om de interfaces die we ontwerpen open en flexibel te houden. Door het systeem dynamisch te laten meebewegen sluiten we beter aan op gebruikersbehoeften. 

In het echte leven is alles aan slijtage onderhevig. Denk aan de sporen op een deur. De deurklink slijt en ook het gebied eromheen wordt vaak smoezelig. Het is een interessant gegeven om deze gebruikerssporen ook in de nieuwe media zichtbaar te maken. Dat kan in esthetische zin door interactieve elementen te laten verouderen naar mate deze vaker of verkeerd gebruikt worden. Maar ook in meer metaforische zin: interactieve elementen die vaak gebruikt worden en waarvan we weten dat een gebruiker deze goed weet te vinden zouden kleiner getoond kunnen worden; of juist andersom. Progressive reduction is hier een goed voorbeeld van.

Omdat gebruik, behoefte en context constant aan verandering onderhevig zijn, moet een interface ook dynamisch zijn en langzaam mee-evolueren met de tijd. Interface is een levend ding.  

Webconventies doorbreken

Zodra variabelen als personalisatie, tijd en relevantie in het ontwerpproces worden geïntroduceerd zullen 'webconventies', bijvoorbeeld het logo standaard links bovenin, verdwijnen. Op de homepage of landingspages is een logo relevant vanwege de communicatie van het merk en de link met adverteren. In meer instrumentele gebieden van websites, waar andere content relevanter wordt, is dat veel minder het geval en volstaat een logo in de footer. 

Het is opvallend dat in de wereld van print op een dynamische wijze met logo's en de positionering ervan wordt gewerkt dan op het web. Een cover van een krant of magazine wordt afhankelijk gemaakt van de relevantie en actualiteit van de content. Dit is een heel andere benadering dan statische websites met een carrousel met wat wisselende content. We denken dat de gebruiker eraan gewend is, of dat de klant het wil en denken er verder niet over na. Hier ligt een wereld open voor designers. Klanten en eindgebruikers staan te springen om meer relevante en dynamische interfaces.

De designer als choreograaf of regisseur

De komst van responsive webdesign heeft de rol van de vormgever ingrijpend veranderd. Het bepalen van de online identiteit en het ontwerpen van een visuele beeldtaal blijft zijn voornaamste taak. Het zijn alleen geen statische plaatjes of schilderijtjes meer waarin deze zich manifesteert. De werkwijze is nu gebaseerd op het werken met losse componenten en het denken in transities en scenario's. Voor interaction designers is het gebruikersperspectief een extra dimensie. Het is intrigerend wanneer gebruikers de layout beïnvloeden en de 'olievlek' als het ware zichtbaar wordt. En dit allemaal zonder dat ze zich hiervan bewust zijn.

Dynamiek zal de bepalende factor gaan worden in responsive webontwerp. Met de gebruiker en de relevante content als uitgangspunt, zullen vastgeroeste patronen doorbroken worden en de ontwerper zal als een choreograaf te werk moeten gaan om een nieuwe standaard neer te zetten in relevant en intuïtief webdesign.

Aanbevelingen

Zes tips voor het creëren van een dynamische en relevante website:

  1. Identificeer verschillende bezoekersgroepen en formuleer gedragspersona's. Dit kan bijvoorbeeld door het opzetten van een toptaken- en doelgroeponderzoek en de uitkomsten hiervan combineren met data vanuit een web analytics tool zoals Google Analytics.

  2. Neem het gedrag van de bezoekersgroepen mee als variabele in je ontwerp. Daarbij goed nadenken over welke content relevant is voor welke bezoekersgroep en hoe de verschillende content aangeboden moet worden. Het gepersonaliseerd aanbieden van content is mogelijk met Content Management Systemen met automation tools.

  3. Maak de presentatie van de content (lay-out) afhankelijk van de gebruiker. Het gebruikte device is slechts een van de eigenschappen van de gebruiker. Andere eigenschappen zoals het klik-, en navigatiegedrag zijn minstens zo belangrijk. Gebruik responsive techieken om de layout dynamisch én relevant te maken.

  4. Laat de lay-out mede bepalen door de gebruiker en niet alleen door de ontwerper. De ontwerper bepaalt de kaders maar geen gefixeerde layout. Eigenschappen als vorm, kleur en compositie kunnen veranderen op basis van het gedrag van gebruikers. 

  5. Ontwerp geen template of infrastructuur ('blokkendoos') die je vervolgens vult met content maar ontwerp een systeem waarin de content en hoe de content gebruikt wordt tot leven kan komen. De content bepaalt de lay-out en niet andersom. 

  6. Denk in transities. Doordat een layout dynamisch is, zullen overgangen tussen de verschillende composities geregisseerd moeten worden. In het ontwerp moeten we dus niet alleen de composities vorm geven, maar ook nadenken over de choreografie tussen de verschillende stadia. Een goede transitie zal bijna onzichtbaar zijn, maar draagt tegelijkertijd bij aan de logica van het systeem. De ontwerper is een choreograaf en niet alleen een plaatjesmaker.