Bundre fanebar, sideskuffe og FAB-knappen (Floating Action Button) er de hyppigst anvendte mønstre til mobilnavigation på øverste niveau. Hvis du ønsker at designe klare og enkle navigationsstier, skal du bruge et af disse mønstre i din app.
Indfør faktisk tekst
Når du er tilfreds med dit visuelle hierarki, skal du begynde at erstatte pladsholdere og dummy-tekst med rigtigt indhold (faktisk tekst eller det, der er relevant for brugeren). Der er en vigtig grund til, at vi bør undgå dummy-tekst på dette stadie – Lorem Ipsum kommunikerer ikke, hvordan siden støtter brugerne i at nå deres mål. Desuden er mange af de visuelle elementer, vi skaber, baseret på det indhold, vi har i vores produkter. Når du begynder at tilføje reelt indhold, vil du indse, at nogle UI-elementer (eller endda UI-sektioner) ikke er nødvendige for dit produkt.
Som du fylder dine wireframes med reelle detaljer, vil du nogle gange bemærke, at det layout, du har, ikke fungerer godt. I dette tilfælde er det vigtigt at gentage og finde en bedre måde at repræsentere de oplysninger, du forsøger at kommunikere.
Når du har fyldt siden med reel tekst, skal du teste, om siden flyder for brugeren. Noget af indholdet på din side kan være i uorden. Dette er det perfekte tidspunkt til at omorganisere indholdet på siden og forbedre sammensætningen.
Nedenfor er et eksempel på vores wireframe til vores startskærm, der har rigtige data. Der bruges forskellige skriftstørrelser til at prioritere nogle UI-blokke (f.eks. fødevarekategorier).
Sørg for, at dit indhold skalerer godt
Hvis dit design ser godt ud på en mellemstor telefonskærm som iPhone XS, betyder det ikke, at iPhone 5- og iPhone XS Max-brugere vil få den samme gode oplevelse. Selv om det er helt fint at starte med en skærm af mellemstørrelse, når du laver wireframing, er det også vigtigt at tjekke, hvordan indholdet ser ud på forskellige skærmstørrelser (både mindre og større skærme), og justere det om nødvendigt.
Sammenkobl siderne for at skabe et flow
Selv om det er muligt at sende dit design som en samling af individuelle skærme, er det bedre at skabe et flow ud fra dem. UX-flows gør det nemt for teamet at forstå detaljerne i interaktionsscenarier – de kommunikerer, hvordan det er meningen, at folk skal interagere med et produkt.
UX-flows får dig også til at tænke på appens funktionalitet som en helhed. Når du har visualiseret UX-flowet, kan du f.eks. opdage, at du skal indføre en ekstra tilstand mellem startskærmen og en side med søgeresultater (fordi backenden i dit system vil tage et par sekunder om at returnere resultaterne).
Det er også en god idé at give hver skærm et referencenummer. Referencenumre vil gøre dit liv meget lettere, når du diskuterer projektet med andre teammedlemmer eller interessenter.
Test dine designbeslutninger
Testning er det sidste (og et af de vigtigste) trin i wireframing. Testning indebærer brugerinteraktioner, hvilket er grunden til, at dette udtryk ofte bruges i forbindelse med prototyper. Men det er muligt at udføre simpel testning for et flow, der er skabt ud fra wireframes. Ved hjælp af Balsamiq er det muligt at skabe enkle klikbare prototyper ved at sammenkoble wireframes. Målet med en sådan test er at se, om skærmene fungerer sammen.
Konklusion
Det ultimative mål med wireframing er at identificere konturerne af indholdet og skabe et solidt grundlag for de fremtidige trin i designprocessen. Veludformede wireframes gør det visuelle design og interaktionsdesign meget nemmere.
Som med alle designaktiviteter skal du bruge nok tid på at eksperimentere med forskellige værktøjer og processer, og du vil finde din egen stil til wireframing. Øvelse gør mester.
Words by Nick Babich
Originally published on Balsamiq’s UI Education Site