Content first: van responsive design naar dynamische website

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.

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.

Inhoud, relevantie en actualiteit bepalen het design

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.

Een mooi voorbeeld is Time Orange. Dit is een interne portal waar videorapportages van ING medewerkers worden getoond. De grootte, de vorm en de positie van de panels is afhankelijk van de populariteit ervan: een populair artikel wordt visueler en verschijnt op een toppositie.

Je kunt dit soort regels overigens ook omdraaien en berichten pushen die weinig aandacht krijgen. 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.

Weten waar je aan toe bent 360˚: Gebruikers beïnvloeden de layout

De website WWJATB 360 is een initiatief van Nationale Nederlanden en betreft een verzameling van nieuwsberichten over sociale zekerheid, inkomen en pensioen. Het aantal tweets, hits of views heeft invloed op de wijze waarop de berichten worden getoond. Populaire berichten worden groter en visueler gepresenteerd. Het bijzondere is dat de interface zich voortdurend aanpast aan het bezoekersgedrag. Gebruikers beïnvloeden de layout van de webpagina zonder dat ze het zelf weten of zonder dat de redactie het weet.

Dynamische interfaces

In het echte leven is alles aan slijtage onderhevig. Denk aan de sporen op een deur. De deurklink slijt en ook het gebied er om heen wordt vaak smoezelig. Of denk aan sluiproutes door grasveldjes die ontstaan als je je route wilt verkorten. 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 andersom.

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 analyticstool 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.

Foto intro met dank aan Fotolia