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

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

    View full-size slide

  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

    View full-size slide

  3. Jonas Söderström • 2022
    Exempel på designsystem:


    Arbetsförmedlingen


    Volvo


    Hallå Konsument

    View full-size slide

  4. Jonas Söderström • 2022
    Grids

    View full-size slide

  5. Jonas Söderström • 2022
    ”Atomic design”

    View full-size slide

  6. Jonas Söderström • 2022
    Webbformulär

    View full-size slide

  7. Jonas Söderström • 2022
    Förnamn
    Efternamn
    Epost
    Telefon
    👍

    View full-size slide

  8. Jonas Söderström • 2022
    Förnamn
    Efternamn
    Epost
    Telefon
    👎

    View full-size slide

  9. Jonas Söderström • 2022
    Skattetabell
    Byggnadsår
    Tomtyta
    Kommun

    View full-size slide

  10. Jonas Söderström • 2022
    🤔
    👎
    Skattetabell
    Byggnadsår
    Tomtyta

    View full-size slide

  11. Jonas Söderström • 2022
    Skattetabell
    Byggnadsår
    Tomtyta
    Kommun

    View full-size slide

  12. Jonas Söderström • 2022
    👎
    Skattetabell
    Byggnadsår
    Tomtyta
    Kommun

    View full-size slide

  13. Jonas Söderström • 2022
    Födelsedatum (ÅÅ-MM-DD)
    Telefon (enbart siffror)
    👍

    View full-size slide

  14. Jonas Söderström • 2022
    Födelsedatum
    Telefon
    👎
    (ÅÅ-MM-DD)
    (enbart si
    ff
    ror)

    View full-size slide

  15. 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”

    View full-size slide

  16. 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

    View full-size slide

  17. Jonas Söderström • 2022
    Bilmärke
    Modell
    År
    Önskad körsträcka
    👎
    Självrisk
    Driftskostnad

    View full-size slide

  18. 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

    View full-size slide

  19. Jonas Söderström • 2022

    View full-size slide

  20. Jonas Söderström • 2022

    View full-size slide

  21. 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)

    View full-size slide

  22. 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

    View full-size slide

  23. 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

    View full-size slide