In deze blog reeks neemt Fish on Fire je mee door de fases van het design proces van een app en digitaal platform. De derde fase: Wireframes & Flows
In onze vorige blog hadden we het over de fase van Gebruikersonderzoek en Experimenteren. Nu alle aannames omtrent het digitale product zoveel mogelijk zijn weggenomen, hebben we genoeg zekerheid om over te gaan op het ontwerpen van het product. We weten ondertussen welke functionaliteiten essentieel zijn voor de eindgebruiker en jouw bedrijf. Daarmee gaan we over tot het opzetten van de flow van de desbetreffende app, web app of het platform. Deze flow geeft weer hoe een gebruiker door het digitale product navigeert, welke pagina's er nodig zijn en waar welke functionaliteiten terugkomen. Deze flow geven we vorm door het opzetten van wireframes.
Wat zijn wireframes?
Wireframes zijn een visueel hulpmiddel om de flow van een app uit te beelden. Het zijn als het ware de bouwtekeningen van jouw digitale product. Ze staan aan de basis van het ontwerpproces, geven de developers inzicht in hoe het product gebouwd moet worden en brengen jouw idee voor het eerst echt tot leven. Daar kijken we nog niet naar het uiterlijk van de app, de focus ligt immers op de content en de flow. De wireframes en uitgedachte flows geven ook de mogelijkheid om in dit stadium met de eindgebruiker een validatie te doen. Zo kun je achterhalen of de flow van het product duidelijk is en of het product het probleem van de eindgebruiker oplost. Dit kan middels geschetste, of digitaal uitgewerkte wireframes worden gedaan. Beiden bieden net zoveel waarde om zo vroeg mogelijk een eerste validatie te doen.
Wireframe in actie:
Dit klinkt misschien allemaal nog erg abstract, dus laten we er een voorbeeld bijpakken. Fish on Fire heeft een app gemaakt voor het Voedingscentrum. Deze app heet Zwangerhap en is bedoeld voor zwangere vrouwen die willen weten welke producten zij wel of niet mogen eten. Er was vraag naar deze app omdat het tussen alle desinformatie online moeilijk was voor het Voedingscentrum om de juiste doelgroep te bereiken.
Wireframe gevisualiseerd voor het Voedingscentrum
Hierboven zie je een voorbeeld van hoe wireframes en een flow eruit zien. Onze UX designer neemt het op zich om de route door een app in kaart te brengen. De verschillende opties, schermen en menu worden weergegeven. Omdat een wireframe eigenlijk een soort geraamte voor de app is, is ontwerp van de gebruikersomgeving hier dus nog niet van toepassing. In het voorbeeld hierboven is te zien hoe de gebruiker zich door Zwangerhap beweegt.
Waarom Wireframes?
Klanten denken soms dat wireframes onnodig tijd en geld kosten, maar op de lange termijn is dat allerminst het geval. We denken met een klant na over hoe een gebruiker zich door een app of platform beweegt en dit testen we tussentijds. Op deze manier wordt het concept, voordat de app helemaal ontworpen en gebouwd wordt, al geoptimaliseerd. Als je pas na livegang tegen conceptuele problemen aanloopt moeten zowel de designers en developers fundamentele wijzigingen doorvoeren. Dit is in de regel veel duurder en kost simpelweg meer tijd. Bij Fish on Fire vinden wij het belangrijk om de klant goed te begeleiden in het gehele app ontwikkelingsproces, een sterke opzet van een concept is daarbij essentieel en scheelt veel in latere fases.
