{ FJS26 } 

INFÖR WORKSHOP: UX/UI-principer & Figma

Skissa, bygg, såga: projektstart u03

Torsdag 15 oktober · 9.00–16.30 · på plats

ÖVERSIKT

Innehåll

WORKSHOPENS UPPLÄGG

Så HÄR KOMMER dagen ut

• - Presentation av teamindelning
• - UI-brott, Crazy 8s, Wireframes i Figma
• 12.00 Lunch
• - Figma Make ·
• - Byt och såga andra teams prototyp
• - Gör om ·ert eget
• - Sätt upp Githubrepot och börja planera
•  

UX och UI

Två ord som ofta blandas ihop.

01 · UX OCH UI

Vad är skillnaden?

UX är hur det fungerar.

UI är hur det ser ut.

01 · UX OCH UI

Vem gör vad?

01 · UX OCH UI

Varför ska en utvecklare bry sig?

• Det är du som bygger designen. Du behöver kunna läsa den, och se när något inte håller.
• I u03 gör ni designen själva: wireframes, designskiss och datamodell i Del 1.
• Användbarhet och tillgänglighet sitter i koden, inte bara i skissen.
• Du behöver inte vara designer. Men du behöver kunna säga varför.

Principkorten

Dagens måttstock. Varje omdöme ska kunna peka på ett kort.

”Det ser snyggt ut”

räknas inte som ett argument.

02 · PRINCIPKORTEN 1–4

Principkorten

02 · PRINCIPKORTEN 5–8

Principkorten

02 · KORT 1

Visuell hierarki

Ordna elementen efter hur viktiga de är.

• Storlek: det viktigare är större.
• Färg och kontrast: guidar ögat dit du vill.
• Position: vi läser uppifrån och ner, vänster till höger. F-mönster för mycket text, Z-mönster när det finns luft.
• Whitespace: ger andrum och grupperar det som hör ihop.
• Om allt är viktigt är inget viktigt.

02 · KORT 2 OCH 3

Layout, typografi och färg

• 8-pixel grid: spacing och storlekar i multiplar av 8.
• Alignment: allt står i linje med något.
• Typografi: max 2–3 typsnitt, minst 16 px brödtext, radhöjd 1.5–1.8.
• Färg: en konsekvent palett, och kontrast minst 4.5:1 för vanlig text enligt WCAG AA.

02 · KORT 4 OCH 5

Affordance och återkoppling

• Knappar ser klickbara ut, länkar är understrukna eller färgade.
• Hover- och fokuslägen visar att något går att interagera med.
• En knapp som ser ut som en länk förvirrar.
• Laddar något? Visa det. Rätt eller fel svar? Säg det, inte bara med färg.
• Varje handling får en omedelbar respons.

02 · KORT 6 OCH 7

Fitts lag och kognitiv belastning

• Fitts lag: ju större och närmare ett mål är, desto snabbare träffar man det.
• Klickytor minst 44 × 44 px. Tummar är större än muspekare.
• Hicks lag: ju fler val, desto längre tar beslutet.
• Chunking och progressive disclosure: visa bara det som behövs just nu.
• Mentala modeller: följ etablerade mönster. Överraska bara där det ger något.

02 · KORT 8

Tillgänglighet

• Semantisk HTML: rätt element för rätt syfte. En knapp är ett button-element.
• Allt ska gå att nå och använda med tangentbord, med synlig fokusmarkering.
• Färgkontrast minst WCAG AA.
• Färg får aldrig vara enda sättet att visa något, t.ex. rätt och fel svar.
• Tillgängligt är oftast bättre för alla.

02 · DISKUTERA

Vad är viktigt här?

Öppna sidorna och peka på principkorten.

• stockholm.craigslist.org: vad är viktigast på sidan?
• museum.lingscars.com: hur känns det här? Jämför med lingscars.com i dag.
• Vilka kort bryter de mot, och vilka följer de?

Övning

< UI-brott >

Duplicera Figma-filen med fem quiz-skärmar som är dåliga med flit. Hitta så många brott mot principkorten som ni kan på 15 minuter. 1 poäng om ni namnger rätt princip, 2 om ni också säger hur det borde lösas. Ett brott som inget annat team hittat ger dubbelt.

Från skiss till prototyp

Snabbt och fult först, detaljer sen.

03 · PROTOTYPER

Low- och high-fidelity

Övning

< Crazy 8s >

Var för sig, på papper. Vik ett A4 till åtta rutor och skissa åtta olika versioner av frågevyn på åtta minuter. Lägg fram alla skisser. Varje person sätter tre prickar på de idéer hen gillar mest, oavsett vems de är.

Övning

< Wireframes i Figma >

Wireframes för start, fråga och resultat. En frame per vy i mobilstorlek, i gråskala. Riktiga texter och tre riktiga frågor. Glöm inte rätt svar, fel svar och tiden håller på att ta slut. Namnge frames och lager.

Figma och Figma Make

Vad verktygen kan, inte varje knapp.

04 · VAD ÄR MÖJLIGT

Figma-familjen

Figma Make

Beskriv vad du vill ha, eller klistra in dina frames, så bygger AI:n en klickbar prototyp som du sedan förfinar i chatten.

• Peka på en del av förhandsvisningen och be om en ändring.
• Point and edit för färger, avstånd och typografi.
• Versionshistorik: backa om en prompt gjorde det sämre.

04 · PROMPTA

Lägg krut på första prompten

• Uppgiften: vad ska appen göra?
• Kontext: vilka vyer finns, och hur tar man sig mellan dem?
• Beteenden: vad händer vid rätt och fel svar, och när tiden tar slut?
• Begränsningar: t.ex. mobil först, går att spela med tangentbord.
• Nämn principen när du vill ändra: ”Gör frågetexten till det visuellt viktigaste på skärmen.”

04 · VAR KRITISK

AI:n är inte facit

• Make bygger i React. Det är inte koden till u03, som ska vara vanilla JavaScript.
• Använd Make för att testa idéer snabbt, inte för att få kod att kopiera.
• Det snygga bryter ofta mot ett principkort. Leta efter det.
• Spela alltid prototypen med bara tangentbord.
• AI-krediterna är begränsade: en Make-fil per team.

Övning

< Figma Make >

Klistra in era tre frames och skriv en prompt. Spela quizet, sedan bara med tangentbord. Hitta tre saker AI:n gjorde sämre och tre den gjorde bättre än er skiss, kopplade till principkorten. Promptduell: två skriver var sin prompt för samma ändring. Vilken vann, och varför?

Granska och göra om

Feedback som går att använda.

05 · ÅTERKOPPLING

Tre fraser

Det granskade teamet lyssnar och skriver ner. Inget försvarstal.

Övning

< Byt och såga >

Byt prototyp med ett annat team. Spela deras quiz och fyll i granskningsmallen: betyg 1–3 per princip, var i appen ni såg det, och ett förslag. Ett betyg utan ”var i appen” räknas inte. Läs sedan upp granskningen för teamet, fem minuter var.

Övning

< Gör om och visa >

Rätta de två viktigaste synpunkterna: en för hand i Figma, en med en prompt i Make. Vilket gick snabbast, vilket blev bäst? Visa före och efter på två minuter. Rösta: tydligast hierarki, bäst att spela med tangentbord, största förbättringen.

EFTER PASSET

Till nästa gång

• Wireframes och skisser ligger i repot, exporterade som bilder och med länk till Figma-filen i README.
• Datamodellen står i README: vilka fält har en fråga?
• En designskiss i färg utifrån wireframesen. Den visas för mig i Del 1.
• Alla i teamet har gjort minst en commit innan veckan är slut.

FÖRDJUPNING

Läs mer

• Nielsens tio heuristiker: nngroup.com/articles/ten-usability-heuristics
• Laws of UX: lawsofux.com
• Visual design rules you can safely follow: anthonyhobday.com/sideprojects/saferules
• Refactoring UI: refactoringui.com
• Figma Make i Figmas hjälpcenter: help.figma.com

Du behöver inte vara designer för att bygga användarvänliga gränssnitt.