In dit artikel wordt het creatieve onderdeel van het optimalisatieproces besproken. Je bent in deze fase van het optimalisatieproces weer een stap dichterbij de ultieme customer experience en één stap verwijderd van het daadwerkelijke online experiment waarin je je ideeën gaat testen. Voordat je het experiment kunt uitvoeren, moet je ideeën omzetten in designs. De eerder gestelde hypothese vormt nu de basis voor je designs. Deze designs moeten zo worden gemaakt dat ze jouw hypothese kunnen verifiëren of falsifiëren. Oftewel wordt de hypothese verworpen of niet?
Het creatieve proces bestaat uit meerdere onderdelen en vormt de basis van het experiment waarin je je ideeën gaat testen:
- Testmethode kiezen
- Wireframes maken
- Mock-ups ontwerpen
- Mock-ups omzetten naar definitieve designs
Stap 1: Kies de geschikte testmethode
De testmethode die je gebruikt speelt een belangrijke rol in de ontwikkeling van je designs. Deze kies je dus vooraf om te voorkomen dat je de designs opnieuw moet ontwikkelen. De testmethode bepaalt namelijk wat je kunt veranderen. Je kunt gebruik maken van A/B-testing of multivariate testing. Bij A/B-testing verander je één element op de pagina, denk bijvoorbeeld de kleur van een button. Bij multivariate testing verander je meerdere elementen op een pagina, zoals een afbeelding en bijbehorende tekst.
Stap 2: Wireframes en mock-ups voor visualisatie
Zowel wireframes als mock-ups worden ingezet bij het visualiseren van ideeën. Beiden dragen bij aan de definitieve designs en zorgen ervoor dat je weet hoe het eindproduct er uit komt te zien. Je begint met wireframes, een soort ruwe schets. Vervolgens zet je die om in mock-ups, een visuele uitwerking van de schets. Als de mock-ups zijn goedgekeurd, zet je deze om tot definitieve designs. Bij kleinere websites kun je het wireframe-gedeelte ook wat minder uitgebreid houden, maar volledig overslaan is niet aan te raden. Wireframes vormen namelijk de basis voor de mock-ups.
Stap 3: Starten met wireframes
Bij een wireframe draait het om structuur. Je kiest in deze fase bijvoorbeeld niet de kleur van de button, maar voor de plaats waar de button komt te staan. Zo kun je in één oogopslag zien of de gekozen plaats logisch is en of de belangrijkste elementen op de pagina zijn aangebracht. De belangrijkste elementen zijn bijvoorbeeld de footer, header, navigatie en contentblokken. Een wireframe is een platte weergave van het definitieve ontwerp.
Door eerst een wireframe te ontwerpen, voorkom je dat de vormgeving in een latere fase moet veranderen indien belanghebbenden het er niet mee eens zijn. Zo’n frame is makkelijker aan te passen dan een volledig grafisch concept. Door de abstractheid kan het ook wel lastig zijn een wireframe te begrijpen, waardoor het vaak extra aandacht en uitleg vergt.
Stap 4: Van abstract naar details
Grafische elementen zijn een belangrijk onderdeel van de mock-up. Een mock-up is namelijk de eerste echte uitwerking van het design en hierin wordt de visuele weergave duidelijk. Met de mock-up komt het design voor het eerst echt tot leven. Je kiest het kleurenschema, de layout, de witruimte, het contrast en de typografie.
Een mock-up helpt je bij het creëren van een look-and-feel en is heel realistisch. Dit zorgt ervoor dat het geheel tastbaarder wordt en weinig extra uitleg nodig heeft. Met mock-ups verklein je de kans dat er iets mis gaat in het creatieve proces. Fouten ontdek je namelijk al voordat je aan de slag gaat met het definitieve ontwerp.
Wanneer de mock-ups zijn goedgekeurd, worden deze omgezet naar definitieve designs. Deze designs functioneren als eindproduct en zijn zo gedetailleerd mogelijk. Het ziet er uit als volledige website of applicatie.
Ga voor het mogelijke!
In het ontwerpproces is het belangrijk om rekening te houden met de mogelijkheden binnen je eigen website. Wanneer je bepaalde elementen niet kunt veranderen, is het ook niet verstandig om deze mee te nemen in het nieuwe design. Verander je deze elementen wel, dan kan het ontwerp niet volledig worden omgezet tot een experiment en heeft het onnodig veel tijd gekost. Een compleet nieuw design is dus geen probleem, zolang het tot de mogelijkheden van je website behoort!
Uit onderzoek van Optimizely blijkt dat 77% van de experimenten bestaat uit twee varianten (A+B). Slechts 14% van alle testen heeft drie varianten (A+B+C) en slechts 3% gebruikt meer dan vijf varianten (A+B+C+D+E). Toch kun je veel beter minimaal vijf varianten opnemen in je experiment. Je hebt namelijk 75% hogere kans op een winnend experiment wanneer je 5 of meer variaties opneemt in je experiment. Hoe meer variaties, hoe beter! Maak dus minimaal vijf ontwerpen volgens het creatieve proces voor je experiment. Begin met wireframes en eindig met vijf definitieve designs. Gebruik ze allemaal in volgende stap van het optimalisatieproces: het experiment zelf.