Mobiel voorop: responsive design voor mijngarage.nl

Ontwerpen voor mobiel: van noodzaak naar leidend voorwerp

Sinds de eerste echte succesvolle smartphones acht jaar geleden op de markt verschenen is er actief ontworpen voor mobiele apparaten. Anno 2013 is ontwerpen voor mobiel echter compleet anders dan 6, of 3 jaar geleden. Het ontwerpvraagstuk is verschoven van 'hoe kunnen we minder met mobiel doen?' naar 'hoe kunnen we juist méér met mobiel doen?'

In dit artikel wil ik je meenemen in zo’n mobile first ontwikkeltraject. Dat doe ik aan de hand van mijngarage.nl, waar we vanuit Mangrove aan gewerkt hebben. Welke keuzes worden er gemaakt en waarom? Hoe verliep het ontwerpproces? Welke lessen leerden wij en de klant tijdens het ontwikkeltraject, en hoe zijn de eerste resultaten?

Steeds meer schermen

Gedurende de eerste mobiele jaren stond ontwerpen voor mobiel gelijk aan het optuigen van een mobiele website. Deze mobiele variant was meestal een uitgeklede equivalent van de ‘normale’ website. Ontwerpers baseerden de use case voornamelijk op 'mobiel gebruik': in welk noodgeval grijpen onze gebruikers naar hun telefoon? Zo duidelijk als de verschillen toen waren, zo is het al lang niet meer. Door de snelle adoptie van smartphones en mobiel internet, en doordat de mogelijkheden en schermen van smartphones steeds groter zijn geworden is de scheidslijn alleen maar vager geworden.

Met de komst van de tablet werden de grenzen alleen maar minder duidelijk. Is de Samsung Galaxy Note 2 met z’n 5,55″ scherm een telefoon of een tablet? Deze versplintering zal alleen maar verder toenemen. Met de opkomst van de connected car, Google Glass, smartwatches en connected TV’s lijkt het erop dat we mobiel niet meer op basis van verschijning en schermgrootte kunnen indelen. Hoe gaan we al deze screens bedienen? Om de gebruiker op elk device optimaal te kunnen bedienen wordt er steeds vaker gekozen voor een responsive design.

Responsive design

Een responsive design is een adaptief ontwerp. Dat wil zeggen dat het ontwerp zich aanpast aan de gebruikerssituatie. Een veelgebruikte definitie luidt als volgt:

“Responsive web design is an approach that suggests a website should respond to the user’s environment based on screen size, platform and orientation”.

Praktisch betekent dit dat de site bestaat uit een flexibel grid gevuld met content, navigatie-elementen en afbeeldingen die worden gepositioneerd op basis van de schermgrootte. Technische ontwikkelingen, zoals de komst van CSS3, hebben responsive design in een stroomversnelling gebracht. Dit stelt ontwikkelaars in staat om op verschillende resoluties, apparaten en schermindelingen (zoals staand of liggend) te richten. De webpagina wordt zowel voor desktop, tablet als smartphone anders opgebouwd. De site past zich dus aan aan het device van de gebruiker. Zodoende is het mogelijk om de gebruiker altijd een seamless experience te bieden.

Mobile first: terug naar de essentie

De afgelopen jaren is het ontwerpvraagstuk verschoven van 'hoe kunnen we minder met mobiel doen?' naar 'hoe kunnen we juist méér met mobiel doen?'. Mobile first is een trend die zich richt op het ontwerpen met mobiel als basis. Het brengt alles terug tot de kern: 'wat heb je echt nodig op je website?'.

Mobile first houdt in dat de art director van het ontwikkelteam (na de conceptfase) begint met het schetsen van het mobiele ontwerp. Dat helpt je te prioriteren wat écht belangrijk is. Waarvoor komt de bezoeker nu echt naar de website toe? Welke informatie heeft hij nodig om zijn keuzes te maken? In dit proces wordt de essentiële van de aanvullende content gescheiden. Met responsive design kun je aanvullende content niet op kleine maar wel op grote schermen tonen.

Vanuit het mobiele ontwerp wordt vervolgens een desktop variant geschetst. Dat het inmiddels helder is welke zaken echt belangrijk zijn helpt enorm bij het desktop ontwerp. De aanvullende features komen vaak ook niet meer terug in het desktop ontwerp.

Case mijngarage.nl

Om meer in detail te schetsen hoe zo'n mobile first ontwikkeltraject er uit ziet, en welke keuzes daarbij komen kijken, wil ik je een kijkje in de keuken geven bij de ontwikkeling van mijngarage.nl. Vanuit Mangrove we samen met mijngarage.nl in mei dit jaar een nieuw mobile first design gelanceerd.

Op mijngarage.nl kunnen autobezitters een gegarandeerde prijs berekenen voor hun klus en direct een afspraak maken met een garagebedrijf naar keuze. De opdracht was simpel: de conversie moet omhoog. Het proces tot het maken van een afspraak bij een garagebedrijf bedroeg maar liefst 8 stappen.

Keuzes: wat mag blijven?

Je begint zo’n proces bij de basis; waarom komt de bezoeker naar je site? Wat is zijn doel? In het geval van mijngarage.nl is de bezoeker op zoek naar een garage die hem kan helpen zijn auto te laten repareren.

Deze essentie wil je terug laten komen in het design. Dat is zowel prettig voor de gebruiker als voor de effectiviteit van de site. De gebruiker vindt immers makkelijker de weg naar zijn doel.

Dat je door mobiel gedwongen wordt om na te denken over de belangrijkste doelen van de website werkt heel verhelderend. Dat maakt het ook verder in het proces duidelijk wat de focus is. Zo komt aanvullende content vaak ook niet meer terug op desktop.

Op mobiel is er bij mijngarage.nl voor gekozen om direct te beginnen met het proces van het kiezen van een garage. Zo kun je in het eerste scherm je kentekennummer, postcode en de reparaties invullen om vervolgens het aanbod op te vragen. Andere functies die terugkomen op het eerste scherm zijn herkenning (het logo en de payoff) en beknopte navigatie. Wanneer de gebruiker naar beneden scrollt kan hij daar meer informatie vinden en zijn er diverse elementen om de gebruiker te overtuigen.

In de oude situatie bestond de conversiefunnel uit 8 stappen. Na het kiezen van de klus moest de gebruiker via een actie onder de vouw doorklikken naar het ingeven van het kenteken. Vervolgens kreeg hij de beste prijs geserveerd, en kreeg hij pas na het opgeven van de postcode onder de vouw een overzicht van garages. Na het selecteren rest hem nog het formulier in te vullen.

In de nieuwe situatie het aantal stappen teruggebracht tot 3. Het selecteren van de klussen en het opgeven van het kenteken en de postcode is teruggebracht tot 1 stap. In de tweede stap krijgt de gebruiker direct een lijst van garages gepresenteerd, en in de laatste stap moet hij het formulier invullen.

Middels een progressiebar is het tijdens het proces duidelijk waar de gebruiker zich in het proces bevindt. Zo haakte in de oude situatie 80 procent van de gebruikers af nadat zij de beste prijs te zien krijgen. Dat kwam gedeeltelijk omdat dat het doel van de gebruikers was, maar ook omdat gebruikers het idee kregen dat dit het einde van het proces was.

Subdoelen

Naast deze hoofdfunnel zijn er ook nog twee parallelle funnels. “We weten dat veel bezoekers op zoek zijn naar meer informatie over een bepaalde reparatie”, aldus Ralf Groen, Projectmanager bij mijngarage.nl. “Ook zien we dat veel bezoekers lokaal op zoek gaan naar een klus. Om dit soort zoekopdrachten op te vangen hebben we relevante landingspagina's opgezet. Zoek je in Google bijvoorbeeld op “distributieriem vervangen” dan kom je uit op de landingspagina over de reparatie 'Distributieriem vervangen'.” Deze content wordt dus wel op een relevante manier aangeboden, maar 'vervuilt' niet het clean design.

Toekomst

De nieuwe site van mijngarage.nl is nu een paar weken live. Ralf laat weten dat de conversie van de nieuwe site in die eerste weken meer dan het dubbele is van de oude site. In de toekomst zijn we van plan om meer aandacht te besteden aan de gebruikssituatie. De smartphone wordt immers anders gebruikt (o.a. veelal onderweg, transactiegericht) dan de tablet (o.a. laid-back, thuis op de bank) en desktop (o.a. met name overdag). Zodoende zullen verschillende typen bezoekers de site anders gebruiken. Middels responsive design willen we deze in de toekomst relevanter gaan bedienen.