Bottom tab bar, side drawer och Floating Action Button (FAB) är de vanligaste mönstren för mobilnavigering på högsta nivå. Om du vill utforma tydliga och enkla navigeringsvägar ska du använda ett av dessa mönster i din app.
Inför verklig text
När du är nöjd med den visuella hierarkin kan du börja ersätta platshållare och dummy-texter med verkligt innehåll (verklig text eller det som är relevant för användaren). Det finns en viktig anledning till varför vi bör undvika blindtext i det här skedet – Lorem Ipsum kommunicerar inte hur sidan stöder användarna i att nå sina mål. Dessutom är många av de visuella element vi skapar baserade på det innehåll vi har i våra produkter. När du börjar lägga till verkligt innehåll kommer du att inse att vissa UI-element (eller till och med UI-sektioner) inte är nödvändiga för din produkt.
Ibland, när du fyller dina wireframes med riktiga detaljer, kanske du märker att den layout du har inte fungerar bra. I det här fallet är det viktigt att iterera och hitta ett bättre sätt att representera den information du försöker kommunicera.
När du fyllt sidan med riktiga texter ska du testa om sidan flyter för användaren. En del innehåll på din sida kan vara i oordning. Detta är det perfekta tillfället att omorganisera innehållet på sidan och förbättra sammansättningen.
Nedan följer ett exempel på vår wireframe för vår startskärm som har riktiga data. Olika typsnittsstorlekar används för att prioritera vissa UI-block (t.ex. matkategorier).
Säkerställ att ditt innehåll skalas väl
Om din design ser bra ut på en mellanstor telefonskärm som iPhone XS betyder det inte att användarna av iPhone 5 och iPhone XS Max kommer att få samma fantastiska upplevelse. Även om det är helt okej att börja med en mellanstor skärm när man utformar trådlösningar är det också viktigt att kontrollera hur innehållet ser ut på olika skärmstorlekar (både mindre och större skärmar) och justera det om det behövs.
Koppla ihop sidorna för att skapa ett flöde
Sedan tidigare har du inte sett att det är möjligt att skicka din design som en samling av enskilda skärmar, men det är bättre att skapa ett flöde av dem. UX-flöden gör det enkelt för teamet att förstå detaljerna i interaktionsscenarier – de kommunicerar hur människor ska interagera med en produkt.
UX-flöden får dig också att tänka på appens funktionalitet som en helhet. Efter att ha visualiserat UX-flödet kanske du till exempel märker att du måste införa ett extra tillstånd mellan startskärmen och en sida med sökresultat (eftersom backend-systemet i ditt system kommer att ta några sekunder på sig att returnera resultaten).
Det är också en bra idé att ge varje skärm ett referensnummer. Referensnumren kommer att göra ditt liv mycket enklare när du diskuterar projektet med andra teammedlemmar eller intressenter.
Testa dina designbeslut
Testa är det sista (och ett av de viktigaste) stegen i wireframing. Testning innebär användarinteraktioner det är därför denna term ofta används i samband med prototyper. Men det är möjligt att genomföra enkla tester för ett flöde som skapats från wireframes. Med hjälp av Balsamiq är det möjligt att skapa enkla klickbara prototyper genom att koppla ihop wireframes. Målet med sådana tester är att se om skärmarna fungerar tillsammans.
Slutsats
Det yttersta målet med wireframing är att identifiera konturerna av innehållet och skapa en solid grund för framtida steg i designprocessen. Väl utformade wireframes gör den visuella designen och interaktionsdesignen mycket enklare.
Som med alla designaktiviteter, spendera tillräckligt med tid på att experimentera med olika verktyg och processer så kommer du att hitta din egen stil för wireframing. Övning ger färdighet.
Vordon av Nick Babich
Originellt publicerat på Balsamiq’s UI Education Site