UX/UI principer

Syfte

• Bli introducerade till UX/UI och dess begrepp
• Inget deep-dive - ni kommer ha en UX/UI, tillgänglighetskurs v 23-25
• Figma-workshopen leds främst av Sandra Thorén som jobbar med UX/UI på Techlove - passa på att fråga henne!

Agenda

• Vad är UX- och UI-design? 
• Prototyper 
• Grundläggande UX-principer
• Grundläggande UI-principer
• Fler UX-principer
• Mobile-first tänk
• Tillgänglighet
• Prestanda som UX-faktor

Vad är UX- och UI-design?

UX-Design

UX är kort för User Experience och innebär upplevelsen hos användaren
vid interaktion mellan användare och system.

UX-design fokuserar därav på hur användaren upplever en interaktion
med en produkt eller system, hur lätt är det för användaren att lösa ett
problem eller slutföra en uppgift. Vilka behov har användaren och vilka
krav ställer det i sin tur på produkten eller systemet.

UX-design = att skapa enkla, effektiva och relevanta
upplevelser för användaren

UI-Design

UI står för User Interface och innebär det visuella element som gör a
användaren kan interagera med produkter eller systemet. Ett UI element
kan till exempel vara en knapp, en rubrik, en ljud eller en bild.

UI-design strävar efter att visuellt vägleda användaren genom till
exempel en sidas användargränssnitt.

UI-design = att skapa utseende och känsla, hur webbsidan ser ut och fungerar

Vad är UX och UI?

UX

• Hela användarupplevelsen
• Hur produkten fungerar
• Användarens resa och känslor
• Problemlösning och effektivitet

UI

• Det visuella gränsnittet
• Hur produkten ser ut
• Knappar, färger, typografi
• Visuell presentation

Minnesregel:  

UX är hur det fungerar, UI är hur det ser ut

Vad gör en UX-are?

• Research - användarintervjuer, undersökningar, analysera användardata och beteenden, skapa personas och user journeys
• Design och struktur - informationsarkitektur och user flows, wireframes och prototyper, interaktionsdesign
• Testning - användartester och A/B-tester
• Samarbete - workshop med stakeholders, med UI-designers och utvecklare

Vad gör en UI designer?

• Designa UI:et - skapa visuell identitet och stil (färger, typografi, ikoner, grafiska element, layout och komposition, spacing och alignment)
• Skapa detaljerade mockups i exempelvis Figma - d.v.s high-fidelity prototyper för slutproduktioner 
• Samarbeta - Översätta UX-wireframes till visuell design. Leverera design-spec:s till utvecklare
• Annat -  Skapa styleguides, jobba med komponentbibliotek, responsiv design,  interaktiva detaljer

Prototyper

Prototyper innebär allt från enkla pappersprototyper till mer avancerade interaktiva wireframes eller nästan färdiga webbsidor.

Beroende på var i designprocessen man befinner sig så kan man skapa
enklare eller mer invecklade prototyper. Då man talar om olika sorters
prototyper brukar man tala om high fidelity och low fidelity.

I början av utvecklingen brukar man skaps flera olika low-fidelity
prototyper, varefter prototypen blir allt mer avancerad och därav av
typen high-fidelity.

Low-Fidelity

• Low fidelity prototyper innebär enkla skisser på papper eller digitalt
• Enklare att fokusera feedback av design på hur snarare än detaljer kring färgval, typsnitt, skuggor etc. osv.
• Skissen skall vara snabb och okomplicerad
• Prototypen innehåller själv ingen funktionalitet

High-Fidelity

• High-fidelity prototyper skall ge en känsla av hur den färdiga produkten kommer se ut och fungera
• Man skall kunna surfa runt och förstå vad man hittar vart på hemsidan
• High-fiidelity prototyper kan skapas till exempel med Figma

Low- vs High-fidelity

Grundläggande UX-principer

• Användarcentrerad design - utgå alltid från användarens behov, inte tekniska möjligheter
• Konsistens - Både visuellt och i interaktionsmönster genom hela produkten
• Feedback - Systemet ska alltid kommunicera vad som händer
• Enkelhet - Gör det inte mer komplext än nödvändigt

Grundläggande UI-principer

• Visuell hierarki
• Typografi och färg
• Layout och struktur
• Affordances (visuella och interaktiva element som förstärker hur en användare ska interagera med det)

Vad innebär visuell hierarki?

Visuell hierarki är metoden för att ordna element på webbsidan efter hur
viktigt det är. Genom attt ändra på elements storlek, färg och form kan
man påverka hur användarna integrear med webbsidan.

Det är viktigt a tänka på att de flästa läser uppifrån och ner samt från
vänster till höger.

Låt oss kolla på två olika mönster man kan använda inom design på webben!

F-mönster

Kan användas vid större mängder av text

Z-mönster

Kan användas vid mer luft (whitespace)

Visuell hierarki

• Storlek - viktigare element är större
• Färg och kontrast - guida ögat till det viktiga
• Position - Användare läser från vänster till höger, uppifrån och ner
• Whitespace - Ge innehållet andrum, gruppera relaterat innehåll

Tips:  

Om allt är viktigt, är inget viktigt

https://stockholm.craigslist.org/

Vad är viktigt här?

Visuell hierarki

Typografi och färg

Typografi

• Läsbarhet och stil
• Max 2-3 typsnitt
• Rätt teckenstorlek (minst 16px för brödtext)
• Lämplig radhöjd (1.5-1.8)

Färg

• WCAG-standarder (4.5:1 för normal text)
• Färg ska inte vara enda indikatorn
• Konsekvent färgpalett

Layout och struktur

• 8-pixel grid system  - Använd multiplar av 8 för spacing och storlekar
• Alignment - Allt ska stå i linje med något
• Gruppering - Relaterat innehåll ska vara nära varandra
• Balans - Visuell vikt ska vara jämnt fördelad

Varför 8px?  

De flesta skärmstorlekar är delbara med 8, vilket ger bättre pixelprecision, harmoni etc

Fler UX-principer...

Mentala modeller

• Användaren har förväntningar - baserat på tidigare erfarenheter
• Följ etablerade mönster - logo uppe till vänster, meny överst, till vänster
• Ikoner behöver vara universella - eller ha text vid sig
• Överraska inte i onödan - innovation där det ger värde
   

Exempel: 

En knapp som ser ut som en länk förvirrar användaren 

Kognitiv belastning

• Minimera mental ansträngning - varje beslut kostar energi
• Chunking - dela upp information i mindre bitar
• Progressive disclosure - visa endast vad som behövs just nu
• Smart default - Förifyll det som känns troligt
   

Hicks lag: 

Ju fler val desto längre tar beslutet

https://museum.lingscars.com/feature/website.php#models

Hur känns detta?

De har faktiskt gjort en update   https://www.lingscars.com/

Chunking

Affordences och Feedback

Affordances

• Knappar ser klickbara ut
• Länkar ska vara understrukna eller färgade
• Dra- och släpp ska vara tydligt
• Hover-states kommunicerar interaktivitet

Feedback

• Laddar innehållet? Visa spinner
• Formulär skickat? Fel uppstod? Bekräfta det.
• Omedelbar respons på varje handling

Mobile-first tänk

• Design för minsta skärmen först - tvingar prioritering
• Touch-target inst 44x44pcx - tummar är större än musklick
• Innehåll framför navigation - begränsat skärmutrymme utrymme
• Smart default - Förifyll det som känns troligt

Statistik: 

Över 60% av webbtrafiken kommer från mobila enheter

Tillgänglighet (A11y)

• Semantisk html - använd rätt element för rätt syfte
• Keyboard navigation - allt ska gå att nå med keyboard
• Färgkontrast- WCAG AA-standard som minimum (se här)
• Alt-text på bilder - Beskriv innehållet
• Aria-attribut - När semantisk html inte räcker

Bonus: 

Tillgängliga webbplatser är ofta bättre för alla användare

Prestanda som UX-faktor

• Laddningstid påverkar upplevelsen - varje stund räknas
• Perceived performance - känslan av hastighet är viktig
• Skeleton screens - visa layout medan innehåll laddas
• Optimera bilder - största boven till långsam laddning
• Lazy loading - ladda innehåll när det behövs

Statistik: 

53% av användarna lämnar en sida som tar 3 sekunder att ladda

Sammanfattning

• Användarens behov alltid i centrum
• Konsistens skapar förtroende och användbarhet
• Enkelhet är ofta bättre än komplexitet
• Tillgänglighet är inte valfritt
• Prestanda, laddningstid påverkar användarupplevelsen
• Bra design är osynlig - dålig design märks

Kom ihåg: 

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