Responsive design op enterprise-niveau: kies de juiste focus

Responsive design

Responsive design is hot. Iedereen heeft het er over, veel mensen willen het toepassen, maar waar te beginnen? Vooral in een complex landschap van een grote organisatie is het vaak lastig om vanuit de toch wat abstracte term 'responsive design' een vertaling te maken naar een schaalbare en vooral zinvolle implementatie.

Kleinschalig versus enterprise-niveau

Eén van de grootste struikelblokken bij het implementeren van responsive design, is de vertaling maken vanuit de techniek. Hier is al veel over geschreven, en er zijn genoeg technische frameworks, templates en libraries om snel een start te maken. Maar is dit ook een optimale aanpak om op een zinvolle manier responsive design te implementeren? Voor kleinschalige websites en applicaties zal dit zeker het geval zijn, maar bij implementaties op enterprise-niveau komt meer kijken.

Optimaliseren van de klantervaring

Responsive design is een subdomein van adaptive design en adaptive systemen. Het gaat over het optimaliseren van de klantervaring op basis van de gebruikerscontext. Responsive design en adaptive systemen zijn naar mijn mening niet de heilige graal van webdesign. Het is meer een moderne design-filosofie waarmee we op een reactieve en wendbare manier de onvoorspelbaarheid omarmen van het toekomstige internet-landschap dat met een duizelingwekkende vaart op ons afkomt.

Context: meer dan schermformaat

Bij responsive design denken we vaak als eerste aan het veranderen van de schermlayout op basis van de schermbreedte of schermcontext. Maar de context kan veel complexer zijn: een device of browsercontext kan meer vertellen over de eigenschappen of mogelijkheden van een device of browser. Bijvoorbeeld de geolocatie, netwerksnelheid, en oriëntatie.

We kunnen zelfs nog een stapje verder gaan door bezoekers- of klantcontext toe te voegen, waarbij er belangrijke informatie over de bezoeker of klant beschikbaar is. Daar kan de customer experience weer op afgestemd worden. Dit laatste lijkt al weer heel veel op personaliseren en is te vergelijken met segmentatie- en targetingtechnieken die al veel gebruikt worden binnen het e-CRM-domein.

De hordeloop van nieuwe technieken

Elke nieuwe techniek of technologie heeft een groeipad dat gelijkenis vertoont met een hordeloop. Zodra er een eerste oplossing is voor het probleem, en de eerste horde dus is genomen, duiken we vol op de volgende horde, meestal de eerste horde die we tegenkomen. Zo ook met responsive design.

Waar nu alle aandacht naar toe gaat, en waar iedereen wat over te melden heeft, is het contentvraagstuk. Hoe krijgen we ons CMS zover dat we adaptive content kunnen presenteren? Wat wordt de contentstrategie? Hoe maken we content die geschikt is voor alle platformen? Over het algemeen niet onbelangrijke vraagstukken, maar dit zijn geen doelen op zich. Het zijn alleen middelen om ons uiteindelijke doel te bereiken. Deze verkeerde focus zorgt er voor dat we met zijn allen  rondjes blijven draaien om het contentvraagstuk.

De gebruiker en de business als stakeholders

Maar waar draait het dan om? Uiteindelijk zijn er in een webrelatie maar twee echte stakeholders. In de eerste plaats de gebruiker en als tweede de business, ofwel eigenaar van de website. Beiden partijen hebben in deze relatie een belang. Het belang van de gebruiker is uit te drukken in een doel en een aantal taken dat nodig is om dat doel te kunnen bereiken. Het vermarkten van een product of service is het belang van de business.

Het PEC-model

Om de relatie tussen de stakeholders inzichtelijk te maken heb ik deze afgebeeld in het onderstaande PEC-model (Propositie-Experience-Context). Aan deze relatie heb ik de  dimensie ‘context‘ toegevoegd: een belangrijk onderdeel van responsive design. Het raakvlak van de business en de gebruiker vindt mondt uit in een propositie naar de klant. Product, tone-of-voice, visual design en branding zijn bij deze relatie bepalend.

PEC-model

Het PEC-model vanuit het medium-perspectief

Het koppelvlak van de gebruiker richting business kennen we in de vorm van customer experience. De aard en vorm van de propositie heeft een effect op de ervaring van de gebruiker. Die twee koppelvlakken brengen we bijeen via een kanaal en een medium, in dit geval onze website. Bij een succesvolle afstemming van beide koppelvlakken is er conversie mogelijk.

Adaptive systeem als medium

Als we nu als medium niet een (statische) website maar een adaptive systeem gebruiken, zoals een responsive website, dan wordt onze propositie en de experience afhankelijk van een context. Op dit punt komt alles bij elkaar: de gebruiker, de business en de context van onze responsive website. Door nu te bepalen welk type context toegevoegde waarde kan bieden, en hierop de propositie en de user experience af te stemmen, hebben we al een eerste stap gezet.

Als we het over de device-context hebben, kunnen we bekijken hoe we optimaliseren voor verschillende devices. Als er een klantcontext bekend is, dan kunnen we zelfs onze propositie aanpassen op basis van een scoring-systeem als customer value, of door gebruik te maken van een customer journey-methodiek. Door continu onderdelen van onze webomgeving binnen dit raamwerk te plaatsen, bepalen we op een gedegen manier hoe we zaken het beste aanpakken.

Contextperspectief

Het PEC-model vanuit een contextperspectief.

Business-perspectief

Als we vanuit een business-perspectief naar dit raamwerk kijken, dan kunnen we een aantal praktische tools gebruiken om de juiste propositie te bepalen. Customer value of een ander scoringsysteem als NPS of CES en Customer Lifecycle Management zouden een eerste basis kunnen leggen. Maar vooral het nieuwe gedachtengoed van service design biedt de nodige handvatten om op zoek te gaan naar onvoorziene mogelijkheden in een crosschannel en multi device-omgeving. Ook door gebruik te maken van de nieuwe contextdimensie.

Het resultaat zou dan een nieuw bedieningsconcept of een nieuw siteconcept kunnen zijn. Volgens het Nederlandse bedrijf Designthinkers gaat service design over:

“Het uitlijnen en koppelen van diverse stakeholders, services, partners, locaties en Touch points tot een ecosysteem waarin waarde wordt gecreëerd.”

En laat dit nu net de situatie zijn die het PEC-model beschrijft.

Het PEC-model vanuit een conceptperspectief

Het PEC-model vanuit een conceptperspectief

Gebruikersperspectief

Wanneer we vanuit de gebruiker bovenstaand model bekijken dan zijn er een aantal UX-tools waarmee we een optimale experience kunnen ontwerpen. Met het uitwerken van customer journeys en persona’s is snel inzichtelijk hoe een gebruiker ons medium zou kunnen gebruiken. En met de usability-methodieken zorgen we ervoor dat de interface, welke een onderdeel uitmaakt van de experience, van voldoende kwaliteit is en optimaal bruikbaar.

Maar de gebruiker moet ook nog getriggerd worden om daadwerkelijk gebruik te maken van ons medium, en een product of service af te nemen. Door het modernere neuromarketing en persuasive design te gebruiken kunnen we meer op de psyche van de gebruiker inspelen. Het context-onderdeel geeft ons een extra mechanisme om de gebruikersinteractie en de presentatie van informatie aan te passen aan de specifieke situatie van de gebruiker.

Het contextgevoelige medium

Om de bovenstaande theorie wat te verduidelijken draag ik wat voorbeelden aan. Het unieke verschil tussen de traditionele business-user relatie en het bovenstaande PEC-model is de aanwezigheid van een contextlaag. Dit is informatie over de situatie van de gebruiker. Het kan informatie zijn over het device of browser die hij gebruikt, of informatie over de klant, bijvoorbeeld als deze heeft ingelogd.

Kenmerken van de device-context kunnen zijn: is het een tablet, een smartphone, een meer ‘gewone’ telefoon, een game console of een device dat is geïntegreerd in de auto? Een praktisch voorbeeld van het aanpassen van de service-propositie aan de context is dat er op een desktop een chatfunctie als contactmogelijkheid is. Gebruikt iemand een mobiel device, dan zou een chatfunctie minder handig kunnen zijn, en kan een bel-me-terug-knop worden aangeboden. Bij een TV kan het handiger zijn om een video-chat aan te bieden, omdat de gebruiker een slecht keyboard heeft en een telefoon wellicht niet direct aanwezig is.

Responsive webdesign

Filteren op basis van het contextprofiel

Responsive design is niet alleen een feestje op de cliënt. Het wordt pas een krachtig geheel als je elke systeemlaag betrekt bij de contex-awareness en de adaptive mechanismen. Dat betekent dat ook op de applicatie- of CMS-laag een invulling gegeven moet worden aan het adaptive systeem. Elke laag kan bijvoorbeeld al filteren op basis van het contextprofiel. Wanneer een eerste stap gezet is in het samenstellen en gebruiken van een device-context profiel, bekijk dan eens of het mogelijk is om bezoekers of klantgegevens toe te voegen aan de contextprofielen.

Denk bij het opzetten van een responsive concept niet vanuit pagina’s, maar vanuit componenten en samenstellingen hiervan. Dit vergemakkelijkt de vertaalslag naar de techniek, en zorgt er voor dat je wendbaar blijft met het oog op toekomstige kanalen en devices.

Een kijkje in de toekomst

Met de komst van social intelligence, big data en het steeds mobieler worden van onze klanten zullen we steeds meer te weten kunnen komen over de context van onze bezoeker. Naast de devicegerelateerde context en de klantcontext die wij in onze systemen hebben zitten, zal er ook steeds meer duidelijk worden over de realtime context van een bezoeker.

Deze context verandert namelijk veel gedurende de dag. ‘s Ochtends ben je  een atleet tijdens je dagelijkse conditietraining, terwijl je ook een zakenman bent wanneer je de eerste nieuwsberichten doorneemt na het opstaan. Dan ben je plots een kok die het ontbijt klaarmaakt. Daarna weer een zakenman, een vriend en een coach. Wanneer we dit soort informatie weten is het mogelijk om gepersonaliseerde en relevante proposities te doen en toenadering te zoeken binnen de juiste context. Het domein van contextual marketing geeft hier invulling aan.

Middelen om je responsive doel te bereiken

Ondanks alle aandacht die er is binnen responsive design voor content en techniek, zijn dit uiteindelijk maar middelen om ons responsive doel te behalen. Door te focussen op de twee belangrijkste stakeholders, de klant en de business, wordt het een stuk duidelijker wat de samenhang is binnen het responsive speelveld. Hierdoor is het eenvoudiger om een zinvolle invulling te geven aan responsive design.

Grootste uitdaging ligt aan de business-kant

Knip responsive zaken op, denk in componenten, gebruik het PEC-raamwerk als referentie en blijf wendbaar om snel te kunnen reageren op toekomstige ontwikkelingen. Met de uitbreiding van de contextuele informatie in de toekomst zijn we steeds beter in staat om een gepersonaliseerde en relevante propositie te maken. De grootste uitdaging en kansen van responsive design liggen misschien wel aan de business-kant.

Uitgelicht: Effectieve landingspagina’s (Frankwatching webinar)

Webinar effectieve landingspagina's

Ben je je aan het verdiepen in de conversie van je website? En vraag je je af hoe je de landingspagina's beter kunt inrichten? In het webinar 'Effectieve landingspagina's' leer je wat de belangrijkste elementen zijn van zo'n pagina. Verder leer je hoe je landingspagina's met behulp van Google Analytics kunt testen en optimaliseren!

Meer weten?

Interessant?

Lees dan ook onze andere artikelen over , , , , , , , , , , , , , , , , , , .

Reacties

  1. Bedankt voor je verhaal Mark! Mooi om te zien hoe je responsive design zelf ook een duidelijke context geeft tussen o.a. customer life cycle en customer experience.

  2. Een super verhaal. Het mooie hieraan is dat het duidelijk wordt dat responsive niet alleen een development feest is, maar dat de business hier ook goed op moet aansluiten. Dit stuk maakt het voor de business duidelijk dat je over meer moet nadenken dan schermgrote alleen.
    Bedankt Marc erg verhelderend.

  3. Sterk artikel over de ware potentie van Responsive Web Design. De kracht zit hem inderdaad met name in de koppeling van een flexibele schermgrootte met adaptieve content. Van front-end met back-end. En van zakelijke propositie met gebruikerservaring. Dit artikel is wel nogal technisch. Ik heb geprobeerd om de waarde van Responsive Web Design uit te leggen aan minder technisch onderlegde mensen: http://mediaweb.nl/responsive-website.

Plaats een reactie

Je e-mailadres wordt niet gepubliceerd. Verplichte velden zijn met een * aangegeven.

Verschijnt je reactie niet, dan is deze mogelijk in de spam terechtgekomen. Mail ons dan even!