Så hittar du inspiration till mobilgränssnitt och omsätter den i en designbrief
Ett praktiskt arbetsflöde för att samla referenser för mobilgränssnitt, studera hela skärmsekvenser och omsätta visuella iakttagelser i en egen, testbar designbrief.
En mapp full av attraktiva appskärmar är lätt att samla och svår att använda. Utan en fråga som vägleder sökningen kan visuella referenser dra en design mot imitation samtidigt som den faktiska användaruppgiften lämnas olöst.
Använd skärmdumpar som uppmaningar för utredning. Ett användbart arbetsflöde börjar med en uppgift, jämför fullständiga flöden, registrerar besluten bakom det visuella och förvandlar dessa observationer till ett kort som du kan prototyper och utvärdera.
Viktigaste lärdomarna
- Definiera användar-, uppgifts- och designosäkerheten innan du samlar in referenser.
- Studera skärmsekvenser och interaktionstillstånd, inte isolerade visuella behandlingar.
- Skriv ner överförbara principer, fatta sedan ursprungliga beslut för din produkt och validera dem med människor.
- Kontrollera tillgänglighet och plattformspassning medan trosan fortfarande är flexibel.
1. Börja med en designfråga
Innan du surfar, skriv en mening om personen och ögonblicket du designar för. Till exempel: "En förstagångskock måste välja ett recept på en veckokväll och förstå vad han ska göra härnäst." Nämn sedan osäkerheten: är det svåra att skanna val, lita på en rekommendation eller starta ett recept i flera steg?
Den frågan ger sökgränserna. Bestäm vilken plattform, produktområde och uppgift som spelar roll. Om du utforskar en första-användningsupplevelse, bläddra bland introduktionsexempel; om problemet är val av plan, titta på betalväggsskärmar; för datainmatning, jämför formulärmönster. ScreenKits låter dig bläddra bland riktiga appskärmar efter kategori. Spara användbara appar som webbläsarbokmärken så att du kan återgå till deras skärmar under syntesen.
- Vem är den avsedda personen och vad försöker de åstadkomma?
- Vilket designval är osäkert: hierarki, sekvens, navigering, innehåll eller feedback?
- Vilka begränsningar spelar roll, som plattform, tillgänglighet, enhetsstorlek eller affärsregler?
2. Samla ett litet målmedvetet referensset
Samla en handfull exempel som tar upp samma uppgift eller en närbesläktad. Inkludera mer än ett tillvägagångssätt: en direkt väg, en guidad väg, kanske en version som hanterar ett fel eller ett tomt tillstånd. För varje kandidat, spara appen och notera skärmen eller ögonblicket du vill besöka igen. Ett kompakt set gör jämförelsen enklare än en ofiltrerad inspirationstavla.
Titta över kategorierna när det underliggande problemet delas. En schemaläggningsapp och en livsmedelsapp kan båda behöva hjälpa någon att välja ett datum och bekräfta en ändring. Det användbara sambandet är beslutsstrukturen, inte yttemat. Undvik att behandla en liknande målgrupp eller bransch som ett bevis på att dess gränssnitt löser ditt specifika problem.
- Välj referenser av en anledning som du kan ange, till exempel "visar hur ett valt alternativ ändrar sammanfattningen."
- Inkludera olika lösningar så att det första polerade exemplet inte blir standardsvaret.
- Använd webbläsarbokmärken för att hålla utvalda appar tillgängliga för jämförelse när du skriver kort.
3. Läs flödet, inte bara skärmdumpen
En isolerad skärm visar arrangemang, färg, text och kontroller i ett ögonblick. Den avslöjar inte vad som ledde dit, vad som händer efter ett tryck eller om en uppgift lyckas. Gå igenom varje relevant skärm i ordning. Notera ingångspunkt, beslut, åtgärd, feedback och nästa tillstånd. Inkludera alternativ som valideringsfel, avskedanden och återgång för att redigera ett val när dessa tillstånd påverkar uppgiften.
Separera observation från tolkning. "Den primära åtgärden stannar nära botten över tre steg" är en observation; "det här måste vara lättare att använda" är ett påstående som du inte har fastställt. En skärmdump kan inspirera till en hypotes, men den är inte användbarhetsbevis. NN/g beskriver prototyper och användartester som sätt att identifiera potentiella användbarhetsproblem och lära sig hur människor interagerar med ett föreslaget gränssnitt.
| Spela in | Exempel från ett receptvalsflöde |
|---|---|
| Användarmål | Välj ett middagsrecept som passar kvällens tid. |
| Observerat mönster | Tids- och kostfilter visas före receptlistan. |
| Möjlig princip | Sätt kraftfulla begränsningar innan du bläddrar i resultat. |
| Öppen fråga | Vet folk vilka filter som är valfria? |
| Produktbeslut | Visa två viktiga filter, med fler alternativ tillgängliga på begäran. |
4. Omsätt iakttagelserna i en egen designbrief
Syntes är där referenser blir användbara. Dra fram en princip som kan resa, till exempel "gör konsekvensen av ett urval synlig innan bekräftelse." Bestäm sedan hur den principen ska fungera i din produkt, baserat på dess uppgift, innehåll och begränsningar. Kopiera inte en märkesillustration, exakt formulering eller distinkt layout bara för att det förekommer i ett övertygande exempel.
För receptexemplet kan referensuppsättningen föreslå att visa tid tidigt och förhandsgranska vad ett valt filter ändrar. Den ursprungliga briefen kan ange en kort middagsplaneringsväg, en synlig tidsbegränsning, tydliga filtertillstånd och ett steg för granskning innan du sparar. Dessa beslut svarar mot produktens mål; de återskapar inte en annan apps skärm.
- Publik och sammanhang: vem behöver detta, och var eller när kommer de att använda det?
- Användarmål och framgång: vad ska de kunna avsluta eller förstå?
- Flöde: vilka är de viktigaste stegen, besluten och viktiga alternativa tillstånd?
- Designprinciper: vad ska gränssnittet göra tydligt eller enkelt?
- Begränsningar och öppna frågor: vad måste vara sant och vad behöver forskning?
- Utvärderingsplan: vilken uppgift kommer du att ge någon som använder prototypen, och vad kommer du att observera?
5. Prototypa, kontrollera tillgängligheten och förfina
Förvandla trosan till ett grovt trådflöde innan du polerar den visuella stilen. Prototypa nyckelbeslutet och dess feedback, och be sedan någon som är representant för den avsedda publiken att slutföra en realistisk uppgift. Se upp för tvekan, oväntade val och fel. Revidera flödet och upprepa; NN/g:s forskningsvägledning behandlar iterativ design och prototyputvärdering som en del av lärandet, snarare än att anta att ett första utkast är klart.
Kör en tillgänglighetsgranskning vid sidan av det arbetet. Apples riktlinjer för mänskligt gränssnitt betonar märkbara, anpassningsbara interaktioner och hänsyn till olika inmatningsmetoder. Kontrollera storleksändring av text, kontrast, kontrollstorlek och avstånd, tydliga etiketter och om betydelsen enbart beror på färgen. Kontrollera också att flödet anpassar sig till längre text och kan förstås med hjälpmedel. Material Designs tillgänglighetsvägledning är en användbar följeslagare när din produkt följer Android-konventioner.
- Ge en uppgiftsuppmaning, inte en rundtur i gränssnittet, och observera om människor kan fortsätta.
- Testa en tidig version med låga detaljer medan strukturella förändringar fortfarande är enkla.
- Granska plattformsvägledningen som är relevant för enheten och designsystemet du stödjer.
- Återgå endast till referenserna för att undersöka en fråga; låt inte visuell likhet stå för bevis.
Referens-till-kort checklista
Innan du lämnar ut briefen, se till att den beskriver ett produktbeslut snarare än en moodboard. Någon som inte samlat in referenserna borde kunna förstå den tänkta uppgiften, det föreslagna flödet, de val som fortfarande är olösta och hur teamet planerar att lära sig om designen fungerar.
- Den ursprungliga användaren och uppgiften är explicita.
- Varje referens har en anteckning som förklarar vilken fråga eller vilket mönster det hjälper till att utforska.
- Observationer är åtskilda från antaganden och användbarhetskrav.
- Briefen beskriver ett eget flöde och produktspecifik motivering.
- Tillgänglighet, plattformsbeteende och viktiga alternativa tillstånd ingår.
- En prototypuppgift och en observationsbaserad granskningsplan definieras.
