Tabbar onderaan, Side drawer en Floating Action Button (FAB) zijn de meest gebruikte patronen voor mobiele navigatie op het hoogste niveau. Als u duidelijke en eenvoudige navigatiepaden wilt ontwerpen, gebruikt u een van deze patronen in uw app.
Breng echte kopij in
Nadat u tevreden bent met uw visuele hiërarchie, begint u met het vervangen van plaatshouders en dummytekst door echte inhoud (echte kopij of de inhoud die relevant is voor de gebruiker). Er is een belangrijke reden waarom we in dit stadium dummytekst moeten vermijden – Lorem Ipsum communiceert niet hoe de pagina gebruikers ondersteunt bij het bereiken van hun doelen. Ook zijn veel visuele elementen die we maken gebaseerd op de inhoud van onze producten. Als je begint met het toevoegen van echte inhoud, zul je je realiseren dat sommige UI-elementen (of zelfs UI-secties) niet nodig zijn voor je product.
Soms, als je je wireframes vult met echte details, kun je merken dat de lay-out die je hebt niet goed werkt. In dat geval is het belangrijk om te itereren en een betere manier te vinden om de informatie weer te geven die je probeert te communiceren.
Nadat je de pagina hebt gevuld met echte kopij, test je of de pagina stroomt voor de gebruiker. Sommige inhoud op uw pagina zou kunnen zijn uit de volgorde. Dit is het perfecte moment om de inhoud op de pagina te reorganiseren en de samenstelling te verbeteren.
Hieronder ziet u een voorbeeld van ons wireframe voor ons startscherm dat echte gegevens bevat. Verschillende lettergroottes worden gebruikt om prioriteit te geven aan sommige UI-blokken (zoals voedselcategorieën).
Zorg ervoor dat uw inhoud goed schaalbaar is
Als uw ontwerp er geweldig uitziet op een middelgroot telefoonscherm zoals dat van de iPhone XS, betekent dit niet dat gebruikers van de iPhone 5 en iPhone XS Max dezelfde geweldige ervaring zullen hebben. Hoewel het absoluut prima is om bij wireframing uit te gaan van een middelgroot scherm, is het ook essentieel om te controleren hoe de inhoud eruitziet op verschillende schermgroottes (zowel kleinere als grotere schermen) en deze indien nodig aan te passen.
Verbind de pagina’s met elkaar om een flow te creëren
Hoewel het mogelijk is om je ontwerp als een verzameling van individuele schermen te verschepen, is het beter om er een flow van te maken. UX flows maken het gemakkelijk voor het team om de details van interactiescenario’s te begrijpen – ze communiceren hoe mensen verondersteld worden om te interageren met een product.
UX flows zullen je ook laten nadenken over de app-functionaliteit als een geheel. Bijvoorbeeld, na het visualiseren van de UX flow, zou je kunnen opmerken dat je een extra staat moet introduceren tussen het startscherm en een pagina met zoekresultaten (omdat de backend van je systeem een paar seconden nodig heeft om de resultaten terug te geven).
Het is ook een goed idee om elk scherm een referentienummer te geven. Referentienummers maken u het leven veel gemakkelijker wanneer u het project met andere teamleden of belanghebbenden bespreekt.
Test uw ontwerpbeslissingen
Testen is de laatste (en een van de belangrijkste) stappen in wireframing. Testen impliceert gebruikersinteracties, vandaar dat deze term vaak wordt gebruikt in de context van prototypen. Maar het is mogelijk om eenvoudige tests uit te voeren voor een flow die is gecreëerd op basis van wireframes. Met Balsamiq is het mogelijk om eenvoudige klikbare prototypes te maken door wireframes aan elkaar te koppelen. Het doel van zo’n test is om te zien of de schermen met elkaar samenwerken.
Conclusie
Het uiteindelijke doel van wireframen is om de contouren van de inhoud vast te stellen en een solide basis te leggen voor toekomstige stappen in het ontwerpproces. Goed ontworpen wireframes maken het visuele en interactieontwerp veel eenvoudiger.
Zoals met alle ontwerpactiviteiten, besteed voldoende tijd aan het experimenteren met verschillende tools en processen en je zult je eigen stijl voor wireframing vinden. Oefening baart kunst.
Woorden door Nick Babich
Oorspronkelijk gepubliceerd op Balsamiq’s UI Education Site