Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Fre 25 nov • Designsystem med mera • IxD • Nackademin_ht_22

Fre 25 nov • Designsystem med mera • IxD • Nackademin_ht_22

Jonas Söderström
PRO

November 25, 2022
Tweet

More Decks by Jonas Söderström

Other Decks in Design

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

  5. None
  6. None
  7. None
  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