UX en interactieontwerp
Wat is UX-ontwerp?
Interactieontwerp is het stuk daaronder. Wat gebeurt er als je op verzenden klikt? Hoe weet je dat het gelukt is? En wat zie je als je je e-mailadres verkeerd intikt? Dat zijn de momenten waarop mensen afhaken. In de meeste projecten worden ze pas bedacht op de ochtend van de livegang.
Wij doen UX-ontwerp met echte mensen erbij. Vijf gebruikers achter een scherm zetten en zelf je mond houden, levert meer op dan een middag vergaderen over wat de gebruiker vast wel zal willen. Meestal zie je binnen een uur de eerste persoon vastlopen. Dat is even slikken, en het is het geld waard.
Gebruiksgemak kun je gewoon meten
Gemak is geen kwestie van smaak. Je kunt tellen hoeveel mensen een formulier afmaken, hoe lang een collega over een handeling doet, en hoeveel telefoontjes er over één scherm binnenkomen. Daar zit de winst van UX-ontwerp.
Meer mensen maken het formulier af: Een formulier van zeven vragen wordt vaker ingevuld dan hetzelfde formulier met veertien vragen. Wij halen weg wat je later toch niet gebruikt, en meten wat dat doet met het aantal aanvragen.
Minder telefoontjes bij je servicedesk: De meeste vragen van klanten gaan over een handjevol schermen. Weet je welke, dan kun je ze aanpassen. Dat scheelt telefoontjes, elke week weer.
Je eigen mensen werken sneller: In een systeem dat de hele dag openstaat telt elke klik. Twee klikken minder per order, twintig keer per dag: dat zie je aan het eind van het jaar terug in uren.
Bewijs in plaats van meningen: De discussie over waar die knop moet staan, win je niet door harder te praten. Je wint hem met vijf mensen die het proberen. Scheelt een hoop vergadertijd.
Voor wie is dit
UX-ontwerp levert het meeste op waar veel mensen dezelfde handeling doen, of waar je aan je cijfers ziet dat er iets niet klopt.
- Je ziet in je bezoekcijfers dat mensen halverwege je formulier stoppen
- Je servicedesk krijgt elke week dezelfde vraag over hetzelfde scherm
- Je collega's hebben zelf een spiekbriefje gemaakt om met het systeem te kunnen werken
- Je hebt intern een discussie over hoe iets moet werken en niemand komt eruit
- Je gaat een nieuwe versie bouwen en wil niet dezelfde fouten nog een keer maken
Wat je krijgt
- Een doorlichting van de route die je bezoeker of collega nu aflegt, met de plekken waar hij vastloopt
- Een test met vijf mensen uit je eigen doelgroep, met opnames die je zelf terug kunt kijken
- Een lijst met verbeteringen, op volgorde van wat ze opleveren en niet van wie ze bedacht heeft
- Nieuwe schermen voor de plekken waar de meeste mensen afhaken
- Foutmeldingen en bevestigingen in gewone taal, dus niet "er is een fout opgetreden"
- Een meting vooraf en een meting achteraf, zodat je zwart op wit ziet wat het gedaan heeft
Hoe we het bouwen
Eerst meekijken. We beginnen bij de cijfers die je al hebt en bij een half uur over de schouder meekijken met iemand die er dagelijks mee werkt. Dat levert bijna altijd iets op wat in geen enkel rapport staat.
Dan testen met vijf mensen. We zetten vijf mensen uit je doelgroep achter het scherm met een opdracht. Zij praten hardop, wij houden onze mond. Wat drie van de vijf niet kunnen vinden, is geen pech maar een fout in het ontwerp.
Dan bijstellen en opnieuw meten. We passen aan wat de meeste mensen raakt, zetten het live en meten opnieuw. UX-ontwerp is geen rapport dat je één keer leest, maar een rondje dat je een paar keer per jaar herhaalt.
Wat kost UX-ontwerp?
In een onderzoek zit de doorlichting, een test met vijf gebruikers en een lijst met verbeteringen. Wordt er daarna ook opnieuw ontworpen en gebouwd, dan is dat een aparte begroting.
De prijs hangt af van hoeveel routes je wil bekijken en van hoe lastig je doelgroep te pakken is. Vijf gewone consumenten heb je binnen een week. Vijf inkopers uit een specifieke branche kosten twee weken bellen en een vergoeding per deelnemer.
Daarna is het slim om te blijven meten. Dat kan binnen een onderhoudsafspraak.
Waarom Mediavisie Web
Wij bouwen zelf wat we in het UX-ontwerp bedenken. Een voorstel dat technisch niet kan, komt bij ons de deur niet uit. Dezelfde mensen moeten het daarna namelijk maken.
We bouwen sinds 2008 portalen en systemen die met elkaar praten. Daardoor zien we vaak een kortere weg. Soms is de snelste winst geen nieuw scherm, maar een veld dat zichzelf invult met gegevens die je ergens anders al hebt staan.
En we leveren op met een controle of alles ook met alleen een toetsenbord te bedienen is. Een scherm dat je enkel met een muis kunt gebruiken, is voor een deel van je mensen geen verbetering maar een drempel.
Waar je op moet letten
UX-ontwerp laat zien wat er misgaat, maar het repareert geen krom proces. Vraagt je formulier zeven dingen omdat de administratie die zeven dingen eist, dan verplaats je met een mooier scherm alleen het probleem. Reken erop dat een eerlijk UX-ontwerp je ook vervelende vragen oplevert over hoe je intern werkt. Vaak zit een flink deel van de winst juist daar, en niet in het scherm.
Klik het door
Vier momenten waarop je iemand kwijtraakt
Een ontwerp laat meestal alleen de eerste zien. Klik de andere drie aan en let op wat er verandert: niet de kleur, maar wat je weet.
Nog niets ingevuld. Wat verwacht je hier?
Er gebeurt iets. Hoe lang nog?
Er ging iets mis. Wat, en hoe los je het op?
Het is verstuurd. Weet je dat zeker?
Klik ze allebei
Dezelfde knop, met en zonder antwoord
Beide versturen precies hetzelfde. Klik links, klik rechts, en let op wat je jezelf afvraagt.
Zonder terugkoppeling
0 keer geklikt
Met terugkoppeling
0 keer geklikt
De rechterknop telt bijna altijd lager. Dat is het hele punt: zonder antwoord klik je nog eens.
De techniek eronder
Alle techniekWaar we het mee bouwen.
-
Ontwerp
Figma
Waar het ontwerp begint en waar je meekijkt. Componenten sluiten aan op wat we daarna in code bouwen.
-
Ontwerp
Storybook
Elk onderdeel los te bekijken en te testen, inclusief de staten die je op de site zelden tegenkomt.
-
Opmaak
CSS
Eigen variabelen voor kleur, ruimte en typografie. Eén plek aanpassen verandert de hele site mee.
-
Opmaak
Sass
Waar een project er al op draait. Nieuwe sites bouwen we met eigen CSS en variabelen, dat is inmiddels genoeg.
-
Beweging
GSAP
Voor animatie die iets uitlegt in plaats van iets opvult. Respecteert de instelling voor minder beweging.
-
Beweging
Lenis
Rustiger scrollen zonder het scrollgedrag van de browser te breken. Uit zodra iemand minder beweging heeft ingesteld.
Werkwijze
Hoe we het aanpakken.
Van het eerste gesprek tot doorbouwen na livegang. Vier fases, en je weet bij elke fase wat er af is en wat er nog komt.
-
1 tot 2 weken
Uitzoeken
Wat er moet komen en wat er al ligt
We brengen in kaart welke systemen mee moeten, wie het straks beheert en waar het vorige traject op vastliep. Daar komen de uitzonderingen boven water die later de planning bepalen.
Lees verder over Uitzoeken -
Eén week
Afbakenen
Van wensenlijst naar een plan met een prijs
We knippen het werk in stukken die los opgeleverd kunnen worden, en zetten er een prijs en een volgorde op. Daarbij spreken we af wat er in de eerste versie zit en wat later komt.
Lees verder over Afbakenen -
6 tot 12 weken
Ontwerpen en bouwen
Eerst de schermen, dan de techniek eronder
Je kijkt vanaf de eerste week mee op een testomgeving. We leveren in rondes op, te beginnen met het deel dat het meeste werk uit handen neemt, zodat je stuurt op wat je ziet.
Lees verder over Ontwerpen en bouwen -
Doorlopend
Doorbouwen
Na livegang begint het pas
Updates, bewaking en nieuwe functies, met een vast aanspreekpunt dat je project kent. We meten wat er gebruikt wordt, en dat bepaalt waar we het volgende kwartaal aan werken.
Lees verder over Doorbouwen
Zo ziet dat er in de praktijk uit
Alle casesWij werken onder andere voor
Aan de slag
Iets te bouwen?
Vertel wat er moet komen. We denken mee over techniek, haalbaarheid en wat het kost, ook als het plan nog niet rond is.