UI/UX och skisser/prototyper

Vad är UX?

User Experience (UX) = Användarupplevelse

• Fokus ligger på användaren (människan) och deras behov, mål och känslor.

• UX handlar om hela processen: från idé och koncept till en slutlig produkt som skapar positiva upplevelser.

Huvudmål:

• Att skapa en produkt som är användarvänlig, effektiv och tillfredsställande.

Exempel:

• Om du använder en bank app vill du att det ska vara enkelt och snabbt att överföra pengar utan att känna dig förvirrad eller osäker under processen. En bra UX-design tar hänsyn till dessa känslor och översätter dem till design och funktioner

Delar av UX-design

1. Research: Förstå användarens behov och beteenden (t.ex. intervjuer, observationer).

2. Prototyping: Skapar skisser och modeller för att testa och iterera designen.

3. User Testing: Få feedback från riktiga användare och justera designen utifrån deras upplevelser.

4. Iterering: Förbättra ständigt baserat på feedback och analys.

Vad är UI?

User Interface (UI) = Användargränssnitt

• UI handlar om den visuella och interaktiva delen av en produkt - det som användaren ser och interagerar med.

• Det inkluderar layout, design och funktionella element som gör produkten intuitiv.

Exempel på UI-komponenter

• GUI (Graphical User Interface): Ikoner, knappar, menyer, skrollbarer.

• Färg: Val av färger som förstärker användarens upplevelse och signalerar funktioner

• Typografi: typsnitt, radavstånd, textstorlek och hierarki.

• Layout: Placering och organisering av element för att göra gränssnittet logiskt och lätt att navigera.

Vad är målet/konceptet med design?

• Att skapa en balans mellan form och funktion

• Uppfylla användarens behov samtidigt som designen är estetiskt tilltalande.

• Prioritera användarvänlighet och tillgänglighet.

Vad är skillnaden mellan UX och UI?

• UX:

  • Fokus på användarens hela resa och upplevelse.

  • Handlar om strategier, forskning och koncept.

  • Exempel: Hur användaren känner sig under processen att boka ett flyg online.

• UI:

  • Handlar om utseende och interaktion.

  • Exempel: Placering av en “Boka nu” - knapp och hur den ser ut

Sammanfattning: UI är en del av UX - den är hur användarupplevelsen ser ut och känns på ytan.

Vad är användbarhet?

• Ett mått på hur effektivt och enkelt en produkt är att använda.

Nyckelprinciper

1. Effectiveness: Hur precist och fullständigt användaren kan uppnå sitt mål

2. Effciency: Hur mycket ansträngning (tid och resurser) som krävs för att uppnå målet.

3. Learnability: Hur enkelt det är för användaren att lära sig att använda produkten.

4. Errors: Hur ofta användaren begår fel och hur lätt det är att återhämta sig.

5. Satisfaction: Hur nöjd användaren är med produkten.

6. Memorability: Hur väl användaren minns hur man använder produkten efter en paus.

Tänkbara tillägg för VG

1. Design principer:

   • Gestalt lagar: Hur användare uppfattar visuella element.

   • Hick’s lag: Ju fler val, desto långsammare beslut.

2. Tillgänglighet:

   • Hur designen tar hänsyn till användaren med funktions variationer (t.ex. färgblindhet, rörelsehinder).

   • Verktyg: WCAG-standarder.

3. Verktyg och metoder:

   • Wireframes och prototyper (Figma, Adobe XD)

   • Analytics för att mäta användarbeteende (Google Analytics, Hotjar).

4. Exempel från verkligheten:

   • Lyft fram framgångsrika produkter som är kända för bra UX/UI (t.ex. Spotify, Youtube).

Vad är Design Thinking?

Design Thinking är en metod utvecklad av IDEO som fokuserar på human-centrerad design. Syftet är att förstå människor och hitta lösningar på deras problem genom en kreativ och iterativ process.

Processen inom Design Thinking

1. Empathize: Förstå användaren genom att observera, interagera och engagera.

   • Ställ frågor som: Vem är användaren? Vad är deras problem? Hur löser de det idag?

   • Använd metoder som observation och intervjuer. “Sätt dig i deras skor.”

2. Define: Samla insikter från empathize-steget och definiera vilket designproblem som ska lösas.

   • Identifiera vad användaren säger att de behöver kontra vad de faktiskt behöver.

3. Ideate: Generera idéer genom brainstorming utan att döma. Tänk kreativt och brett.

4. Prototype: Skapa snabba och billiga prototyper som kan testas.

5. Test: Testa prototyper med användare, samla feedback och iterera för att förbättra designen.

Tre nyckelaspekter

• Desirable: Är produkten lockande för användarna?

• Feasible: Är det tekniskt möjligt att genomföra?

• Viable: Finns det affärsvärde? Är produkten lönsam?

Vad är Lean UX?

Lean UX är en metod som fokuserar på snabb utveckling och ständig inlärning genom att involvera team och användare tidigt och ofta. Det är inspirerat av Lean Startup.

Nyckelprinciper inom Lean UX

1. Samarbete: Tvärfunktionella team arbetar tillsammans.

2. Iterativ process: Små, snabba iterationer för att testa och förbättra idéer.

3. Fokus på resultatet: Målet är att leverera värde till användarna, inte bara funktioner.

4. Mätning: Använd data och feedback för att styra utvecklingen.

Thinking → Making → Testing → Repeat

1. Thinking: Startpunkten där fokus ligger på att formulera en hypotes baserad på användarens behov eller ett identifierat problem.

   • Tvärfunktionella team samarbetar för att skapa en gemensam förståelse för vad som behöver undersökas.

   • Hypotesen handlar om att definiera vad vi tror att användaren behöver och hur vi kan validera denna tro på snabbast möjliga sätt.

2. Making: Här byggs en Minimun Viable Product (MVP) - den enklaste möjliga versionen av produkten som fortfarande kan testas för att validera eller falsifiera hypotesen.

   • MVP kan vara en mockup, wireframe eller en grundläggande prototyp.

   • Syftet är att svara på frågan: "Stämmer vår hypotes eller gör den inte det?”

   • Målet är att arbeta snabbt och med minimal ansträngning, utan att överarbeta designen.

3. Testing: MVP:n testas med riktiga användare för att samla in feedback och insikter.

   • Användarna observeras när de interagerar med produkten, och deras kommentarer samt handlingar analyseras.

   • Data från testarna används för att förstå vad som fungerar och vad som behövs förbättras.

Efter Testing återgår teamet till Thinking för att iterera vidare med ny kunskap. Detta skapar en ständig cykel av förbättringar: Thinking → Making → Testing → Repeat

Skillnader från traditionell UX

• Mindre dokumentation, mer handling

• Fokus på teamets insikter och direkt användarfeedback.

Low-Fi, Mid-Fi och High-Fi

1. Low-Fi (Low Fidelity)

   • Enkla och grundläggande skisser som ger en snabb överblick över designen.

   • Fokus: Layout och struktur, inte detaljer

   • Verktyg: Papper och penna, White board, eller enkla digitala verktyg.

   • Användning: För att snabbt kommunicera idéer och samla tidig feedback.

2. Mid-Fi (Mid Fidelity)

   • Mer detaljerade skisser eller prototyper, där grundläggande visuella element som färger och typografi kan introduceras.

   • Fokus: Navigerings flöden och interaktiva element börjar definieras.

   • Verktyg: Verktyg som Figma, Adobe XD eller Sketch.

   • Användning: För att testa navigering och interaktivitet utan att lägga full tid på detaljerad design.

3. High-Fi (High Fidelity)

   • Nästan färdiga versioner av designen med hög detaljnivå.

   • Fokus: Komplett design med visuella detaljer, typografi, färger och animationer.

   • Verktyg: Avancerade design- och prototyp verktyg som gör det möjligt att simulera en verklig produkt.

   • Användning: För att presentera design för kunder, intressenter, eller utvecklingsteam inför implementering.

Skissprocessen

1. Brainstorma idéer

   • Börja med att samla teamet och generera idéer om hur produkten kan utformas.

   • Inga idéer är för dåliga - syftet är att tänka brett.

2. Skissa lågupplösta koncept

   • Använd papper och penna för att snabbt skissa flera lösningar

   • Fokusera på användarflöden och placering av huvudelementet.

3. Välj ut de bästa idéerna

   • Utvärdera skisser baserat på användarens behov och mål.

   • Kombinera eller förbättra idéer vid behov.

4. Skapa Mid-fi prototyper

   • Börja använda digitala verktyg för att bygga mer strukturerade och funktionella prototyper.

   • Fokusera på flöden, interaktivitet och grundläggande visuella element.

5. Testa och iterera

   • Använd skisser och prototyper för att testa idéerna med riktiga användare.

   • Justera designen baserat på feedback.