Fre 25 nov • Designsystem med mera • IxD • Nackademin_ht_22

Transcript

1. Jonas Söderström • 2022 Designsystem Design av webbformulär Presentera användningstester Jonas Söderström • Fredag 28 nov 2022 Interaktionsdesign och prototyping • Nackademin ht 22
2. Jonas Söderström • 2022 Idag 25/11 Förmiddag Föreläsning: 
 Designsystem, grids, formulär Presentera användningstester Tvärgruppsredovisning av wireframes Eftermiddag
3. Jonas Söderström • 2022 Exempel på designsystem: Arbetsförmedlingen Volvo Hallå Konsument
4. Jonas Söderström • 2022 Grids
8. Jonas Söderström • 2022 ”Atomic design”
9. Jonas Söderström • 2022 Webbformulär
10. Jonas Söderström • 2022 Förnamn Efternamn Epost Telefon 👍
11. Jonas Söderström • 2022 Förnamn Efternamn Epost Telefon 👎
12. Jonas Söderström • 2022 Skattetabell Byggnadsår Tomtyta Kommun
13. Jonas Söderström • 2022 🤔 👎 Skattetabell Byggnadsår Tomtyta
14. Jonas Söderström • 2022 Skattetabell Byggnadsår Tomtyta Kommun
15. Jonas Söderström • 2022 👎 Skattetabell Byggnadsår Tomtyta Kommun
16. Jonas Söderström • 2022 Födelsedatum (ÅÅ-MM-DD) Telefon (enbart siffror) 👍
17. Jonas Söderström • 2022 Födelsedatum Telefon 👎 (ÅÅ-MM-DD) (enbart si ff ror)
18. Jonas Söderström • 2022 21 mars 1978 Födelsedatum (ÅÅ-MM-DD) 👍 ! Skriv ÅÅ-MM-DD Validera fält medan användarens skriver – inte efter hon tryckt ”Skicka”
19. Jonas Söderström • 2022 Skattetabell ? Din skattesats beror bland annat på i vilken kommun bor och om du är medlem i Svenska kyrkan eller i något annat trossamfund. Hämta din skattetabell på Skatteverket X Visa formulärhjälp på samma sida som formuläret
20. Jonas Söderström • 2022 Bilmärke Modell År Önskad körsträcka 👎 Självrisk Driftskostnad
21. Jonas Söderström • 2022 👍 Bilmärke Modell År Önskad körsträcka Självrisk Driftskostnad Välj bil Välj prismodell Kom ihåg att • chunka • ordna • märka
22. Jonas Söderström • 2022
23. Jonas Söderström • 2022
24. Jonas Söderström • 2022 Takeaways • Vertikalt linjerat är mest överskådligt – snabbast att läsa/tolka. • Lägg etiketter (fältrubriker) och instruktioner utanför fälten. • Om de ligger i fälten försvinner de när användaren klickar. • Validera fälten innan ”Skicka” • Placera varningar / rättelser nära fält • Instruktioner till formulär öppnas i modal • Glöm inte strukturera formulär (chunka, märka, ordna)
25. EXEMPEL PÅ ENKELT UPPLÄGG 1 Presentera problemställning, 
 1 sida 2 2 Beskriv metoden: hur många personer, testmetod; exempel på scenarios, 2 sidor 2–3 Ge resultaten i dataform (”4 av 10 klarade göra x”), 
 2–3 eller fl er sidor 2–3 Ett par talande citat från de intervjuade, 2–3 sidor Era insikter / slutsatser, 
 2–3 eller fl er sidor 1–2 Förslag på vidare research. 
 Ev extrainformation 1–2
26. DETALJERAD REDOVISNING 1 Presentera problemställning, 
 1 sida 2 2 Beskriv metoden: hur många personer, testmetod; exempel på scenarios, 2 sidor +10 Detaljerade sidor med speci fi ka fynd för varje interaktionsdel 2–3 Ett par talande citat från de intervjuade, 2–3 sidor Era insikter / slutsatser, 
 2–3 eller fl er sidor 1–2 Förslag på vidare research. 
 Ev extrainformation 1–2