wireframe

Een wireframe is een vereenvoudigde weergave van een interface die de structuur, de prioriteit van de inhoud en de functionaliteit laat zien zonder dat er al een definitief visueel ontwerp is gemaakt. Meestal weergegeven in grijstinten met placeholder-tekst en eenvoudige vakjes, dient het als hulpmiddel om te bepalen wat er op het scherm komt, in welke volgorde en met welk relatief belang, voordat er tijd en moeite wordt geïnvesteerd in typografie, kleur, afbeeldingen of interactiedetails.

Het doel van het weglaten van visuele opsmuk is om het gesprek te veranderen. Bij een afgewerkt ontwerp bespreken belanghebbenden kleur, fotografie en lettertypekeuze, omdat dat de eigenschappen zijn waarover gemakkelijk een mening te vormen valt. Bij een wireframe zullen ze eerder discussiëren over de aanwezigheid van de juiste inhoud, de logische volgorde en de geschiktheid van de primaire actie. De opzettelijke ruwheid is een kenmerk, omdat het aangeeft dat het werk nog in een voorlopige fase verkeert en uitnodigt tot structurele kritiek, wat in dat stadium het meest nuttig is.

Wireframes maken iteratie ook goedkoper. Het herschikken van vakjes kost minuten, terwijl het herschikken van een voltooide compositie uren duurt en emotionele weerstand tegen verandering oproept vanwege de reeds geïnvesteerde inspanning. Het verkennen van verschillende structurele benaderingen voor hetzelfde probleem is daarom realistisch in de wireframefase en gebeurt zelden wanneer er eenmaal met de gedetailleerde uitwerking is begonnen. Dit is de reden waarom teams die wireframing overslaan meestal het eerste structurele idee dat iemand heeft bedacht, opleveren.

De nauwkeurigheid moet aansluiten bij de gestelde vraag. Ruwe schetsen zijn geschikt voor een vroege verkenning waarbij meerdere richtingen mogelijk zijn. Meer gedetailleerde wireframes met echte inhoud, een nauwkeurige hiërarchie en realistische datavolumes zijn geschikt zodra een richting is gekozen, omdat placeholder-tekst problemen verbergt die met echte inhoud aan het licht komen: koppen die niet passen, productnamen die onhandig afbreken, lege statussen waar niemand aan heeft gedacht en lijsten die zich anders gedragen met drie items dan met driehonderd.

De meest voorkomende fout is dat wireframes worden gezien als een verplichte oplevering in plaats van een denktool. Het produceren van een complete set wireframes voor elk scherm, vervolgens een complete set visuele ontwerpen en daarna een compleet prototype, is een watervalproces dat weken in beslag neemt en het contact met echte gebruikers vertraagt. In de moderne praktijk wordt er selectief met wireframes gewerkt, waarbij de focus ligt op schermen waar de structuur echt onduidelijk is en direct wordt overgegaan op een hogere resolutie waar bestaande patronen de vraag al beantwoorden, vooral wanneer een designsystem kant-en-klare componenten biedt.

Wireframes zijn ook nuttig als communicatiemiddel met de engineeringafdeling, een aspect dat vaak over het hoofd wordt gezien. Een structureel artefact dat laat zien welke content er is, waar deze vandaan komt en welke status elke regio heeft, vormt een betere basis voor een vroege haalbaarheidsbespreking dan een visueel ontwerp. Het brengt namelijk de vragen naar boven die engineers daadwerkelijk beantwoord willen hebben: welke data is nodig, wat gebeurt er als deze ontbreekt, hoe gedraagt ​​de regio zich bij veranderingen in de hoeveelheid content, en welke onderdelen statisch zijn en welke gepersonaliseerd kunnen worden. Het voeren van dit gesprek in de wireframefase leidt vaak tot een ander ontwerp, omdat een structuur die data vereist die niet bestaat of een query die niet kan worden uitgevoerd, beter kan worden geïdentificeerd vóórdat het visuele werk begint dan nadat de implementatie is gestart.

Wireframes zijn ook het geschikte artefact voor vroege tests. Structurele problemen, zoals navigatielabels die mensen niet begrijpen of een flow waarvan de volgorde niet overeenkomt met de verwachting, zijn detecteerbaar met ruwe artefacten en zijn veel goedkoper om op dat moment op te lossen dan na de implementatie. Het uitvoeren van vroege conceptsessies via wireframes is daarom aan te raden. gebruikersonderzoek Testen in de wireframe-fase leidt vaak tot een grotere koerswijziging binnen een project dan testen na het visuele ontwerp, wanneer de kosten voor structurele wijzigingen zijn gestegen en de behoefte daaraan is afgenomen. productontwerp Door de betrokkenheid van de betrokkenen is deze vroege structurele validatie meestal bepalend voor de vraag of het uiteindelijke ontwerp het juiste probleem oplost.