sandra-larsson
Educator Fullstack Developer Javascript at Chas Academy
{ FJS26 }
WORKSHOP: Skissa, bygg, såga
UX/UI-principer och Figma · projektstart u03
Torsdag 15 oktober · 9.00–16.30 · på plats
WORKSHOPENS UPPLÄGG
Så HÄR KOMMER dagen ut
- - Presentation av teamindelning
- - UI-brott, Ryanair, 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
Workshop: Skissa, bygg, såga{{#}} / {{total}}
Designprinciper
8 designprinciper
1 · Visuell hierarki
Visual hierarchy
Ser jag direkt vad som är viktigast på skärmen?
2 · Närhet och gruppering
Law of Proximity · Common Region
Ligger det som hör ihop nära varandra, och det som inte hör ihop isär?
3 · Konsekvens
Consistency and standards (Nielsen H4)
Ser samma sak likadan ut överallt? Knappar, rubriker, avstånd?
4 · Återkoppling
Visibility of system status (Nielsen H1)
Vet användaren vad som hände, och var i quizet hen är?
5 · Affordance
Affordances och signifiers (Don Norman)
Ser det klickbara klickbart ut, och det som inte går att klicka på inte?
6 · Fitts lag
Fitts's Law
Är det man ofta trycker på stort och lätt att träffa, även på mobil?
7 · Hicks lag och kognitiv belastning
Hick's Law · Cognitive Load
Finns det fler val och mer text än vad som behövs just nu?
8 · Tillgänglighet
WCAG 2.2 (W3C)
Räcker kontrasten? Går det med bara tangentbord? Bär färg ensam information?
Workshop: Skissa, bygg, såga{{#}} / {{total}}
Övning
< UI-brott >
Kundvagnen på nästa bild är dålig med flit. Hitta så många brott mot designprinciperna 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.
Tid
09.15 · 30 min
Mål
Ni kan använda designprinciperna för att säga varför något inte fungerar.
Workshop: Skissa, bygg, såga{{#}} / {{total}}
Övning · UI-brott
Kundvagnen
Vilken princip bryter varje fel mot? Alla åtta finns med.
Bild: MIT 6.813, Reading 17: Heuristic Evaluation. CC BY-SA 4.0.
Workshop: Skissa, bygg, såga{{#}} / {{total}}
Flödet
Nielsens 10 heuristiker
H1
Visibility of system status = 4 ÅterkopplingVisa vad som händer.”Fråga 3 av 10”, en laddningsindikator, ”Sparat ✓”.
H2
Match between system and the real worldTala användarens språk, inte systemets.”Betalningen gick inte igenom” i stället för ”Error 402”.
H3
User control and freedomLåt användaren ångra sig och ta sig ut.”Ångra” direkt efter att ett mejl skickats. En tydlig ”Nej tack”.
H4
Consistency and standards = 3 KonsekvensSamma sak fungerar likadant, och som på andra sajter.Varukorgen uppe till höger, loggan leder till startsidan.
H5
Error preventionFörhindra felet innan det händer.”Skicka svar” är grå tills ett svar är valt. ”Är du säker?” före radera.
H6
Recognition rather than recallVisa alternativen, tvinga inte fram minnet.Senaste sökningar visas. Inte: skriv in namnet på din sparade kundvagn.
H7
Flexibility and efficiency of useGenvägar för vana, utan att störa nybörjare.Ctrl+C. Svara med tangenterna 1–4 i quizet.
H8
Aesthetic and minimalist design = 7 Hicks lagVisa bara det som behövs just nu.Resultatskärmen visar poängen stort, inte sju knappar.
H9
Recognize, diagnose and recover from errorsFelmeddelanden på vanlig svenska som säger vad man ska göra.”Lösenordet behöver minst 8 tecken” i stället för ”Ogiltig inmatning”.
H10
Help and documentationHjälp ska finnas nära uppgiften, och vara kort.Ett ”?” vid fältet. Två rader om reglerna innan quizet startar.
Tre finns redan bland designprinciperna (rosa). Källa: nngroup.com/articles/ten-usability-heuristics
Workshop: Skissa, bygg, såga{{#}} / {{total}}
Övning
< Ryanair >
Boka en resa på ryanair.com och gå hela vägen fram till betalningen, men betala inte. Skriv ner varje gång ni inte kan tacka nej, ångra er eller gå tillbaka, och vad som är förvalt. Koppla varje fynd till en designprincip om det går. Det som inte passar någon princip är ett flödesfel.
Tid
15 min
Mål
Ni ser skillnaden mellan att granska en skärm och att granska ett flöde.
Workshop: Skissa, bygg, såga{{#}} / {{total}}
Ö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.
Tid
09.45 · 20 min
Mål
Ni har fler idéer än den första, och väljer bland dem.
Workshop: Skissa, bygg, såga{{#}} / {{total}}
Ö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.
Tid
10.05 · 75 min
Mål
Del 1 av u03 är påbörjad.
Workshop: Skissa, bygg, såga{{#}} / {{total}}
Ö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 designprinciperna. Promptduell: två skriver var sin prompt för samma ändring. Vilken vann, och varför?
Tid
13.00 · 75 min
Mål
Ni kan bedöma AI-genererad UI med samma måttstock som er egen.
Workshop: Skissa, bygg, såga{{#}} / {{total}}
Ö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.
Tid
14.15 · 45 min
Mål
Ni kan ge och ta emot kritik som går att agera på.
Workshop: Skissa, bygg, såga{{#}} / {{total}}
Ö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.
Tid
15.00 · 75 min
Mål
Ni vet när ni ska välja handpåläggning och när AI.
Workshop: Skissa, bygg, såga{{#}} / {{total}}
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.
Workshop: Skissa, bygg, såga{{#}} / {{total}}
Workshop: Skissa, bygg, såga
By sandra-larsson
Workshop: Skissa, bygg, såga
FJS26 v42 torsdag: övningarna i workshopen UX/UI-principer och Figma.
