MAMA15 Tenta 15

MAMA15 TENTA 15.3

DESIGNPROCESSENIterativ design (iterativ = upprepnings-)

Genom att hela tiden göra om, göra rätt, utvecklas hela tiden ens modell. Man gör om, provar nytt, uppdaterar efter återkoppling osv. Det är viktigt med kontinuerlig kommunikation mellan utvecklare och andra part.

EMPIRISKA MÄTNINGAR

Empirism (åskådning). Användbarhetsmål och user experience-mål ska definieras i början på projektet. Dessa mål kan sedan mätas/utvärderas med användare under designprocessens olika faser

METODER I EN DESIGNPROCESS

Det finns det 4 grundläggande aktiviteter i interaktionsdesignprocessen:

Ta fram krav

Vilka är användarna?

På vilket sätt kan en interaktiv produkt/system stödja användarna?

Vilka behov har användarna?

Vad ska användarna kunna göra med produkten?

Designa alternativ

Ta fram idéer

- Konceptuell design- Utformning av den konkreta interaktionen- Grafisk design

Bygga prototyper

Bygg något som användarna kan testa

- Low-fidelity prototyping

- High-fidelity prototypingUtvärdering

Utvärdering av hur väl användbarhets-och user experience-målet uppfylls

PRAKTISKA ASPEKTER

Vilka är användarna?

• Primary, secondary & tertiary users

• Primary: slutanvändaren

• Secondary: t ex tillfälliga användare

• Tertiary: t ex någon somköperin produkten

Hur väljerman mellan olika designkoncept?

• Att göra ett designval och motivera dessa

- Ex, tangentbord + mus eller touchscreen

• Baserat på användarstudier och användartesterresonerarman sig framtill det mest lämpliga designkonceptet

DATAINSAMLING

Fem nyckelaspekterför datainsamling

- Sätta uppmål- Identifiera deltagare- Förhållande till deltagare- Triangulering- Pilotstudier

Sätta upp mål

• Det kan verka självklart men det är viktigt att man sätter upp mål för datainsamlingen

• Målen påverkar

- Metoden för datainsamling- Hurman analyserarsina data

Identifiera deltagare

• Man tvingas nästan alltid göra ett urval av deltagare (sampling)

• Målen börstyra urvalet

• Bekvämlighetsurval

– Att man väljer de deltagare som finns till hands av bekvämlighetsskäl bör undvikas

Förhållande till deltagare

• Se till att ha en professionell relation till deltagarna

• Informerat samtycke kan upprätta sför att skydda båda parter.

Triangulering

• Att undersöka ett fenomen från minst två perspektiv

• Ett sätt att öka “kvaliteten” på forskningsarbetet/utvecklingsarbetet

Exempelvis:

Pilotstudier

• En pilotstudie är ett litet test av den riktiga datainsamlingen

• Man vill inte distribuera 500 enkäter och sedan upptäcka attflera av frågorna var felformulerade…

• Använd kollegor och vänner!

PROTOTYPING

Vad är en prototyp?

• En prototyp är en manifestation av ett designförslag som man kan interagera med på något sätt.

I interaktionsdesign kan det vara t.ex.

- En serie skisser av vyerfrån ett datorgränssnitt- En powerpoint-presentation- En video somsimulerar hur systemet skall användas- En bit kartong- Mjukvaramed begränsad funktionalitet

Varför prototyping?

• Man kan utforska och testa design idéer

• Utvärdering och återkoppling är centrala delar av den iterativa interaktionsdesign-processen

• Intressenter och användare kan se, hålla och interagera med en prototyp lättare än att läsa en beskrivning eller titta på en skiss

• Uppmuntrar till reflektion och diskussion

• Hjälper medlemmar i ett designteam att kommunicera

• Hjälper till att prioritera mellan olika designidéer

Lo-fi

Fördelar

• Billigt och snabbt

• Kreativt

• Demokratiskt (alla kan vara med!)

• Kan underlätta kommunikationen mellan designer och användare, samt mellan designer och utvecklare

• Kan vara lättare att få användarfeedback

Nackdelar

• Kan bli omständligt att hålla reda på alla lappar och papper.

• Begränsningar med avseende på navigation och flöde.

• Prototypen kontrolleras av en person.

• Svårare att identifiera fel.

• Otydliga specifikationer: Svårare att skapa kod till.

• Användbarhetstestning blir svårare.

Storyboarding

• Ett sätt att göra ett scenario mer detaljerat

- “Storytelling” är ett naturligt sätt för oss människor att förklara saker och ting

• Effektivt sätt för kommunikation

- med användare- mellan olika yrkesgrupperi

utvecklingsteamet

• Ofta börjar man med scenarier som man

utvecklar till storyboards

Hi-fiFördelar

Väldigt lik den färdiga produkten både utseendemässigt och i funktionalitet

- Diskutera grafisk design- Navigation och flöde fungerar som det är tänkt

• Kan testas som om det är den riktiga produkten

• Upptäcker brister i interaktion och användbarhet

Nackdelar

Tar lång tid att bygga.

- Man ändrar ogärna något man jobbat med länge.

• Användare och utvärderare tenderar att fokusera på ytliga aspekter.

• Kan skapa överdrivna förväntningar.

• En enda bugg kan förstöra ett helt användbarhetstest.

Varför mid-fi prototyping?

• Överbrygger en del av nackdelarna med både lo-fi och hi-fi prototyping

- Lättare att simulera realistiskt flöde och navigation- Ändå inte så likt slutprodukten att man bara får feedback på grafisk layout

Konceptuell design• Att gå från produktkrav till konceptuell modell

Att tänka på:

• Använd ett öppet sinne men glöm aldrig användarna och deras kontext.

• Diskutera idéer med användarna så mycket som möjligt.

• Använd lo-fi-prototyping.

• Iterera, iterera, iterera!

MÄNNISKA-DATORINTERAKTION (MDI)

Ett bra exempel på när de mentala och konceptuella modellerna går olika vägar är med SJs tågdörrar. Det är egentligen en fotocell över dörren som öppnar den, medan fölk som inte fattar bättre står å trycker på den låtsatsknapp som finns för att få folket att röra på dig. Istället, gör en tydlig konceptuell modell från början, något i stil med: “Detta är en dörr som öppnas med en gest.”.

Donald Normans kylskåp

Konceptuell modellEn övergripande beskrivning av hur ett system är organiserat och fungerar

• En abstraktion som ger en bild av vad användaren kan göra med en produkt och vilka koncept som behövs för att förstå hur man interagerar med den

• Komponenter i en konceptuell odell

- Metaforer- Interaktionsmodell- Interaktionsteknik

MetaforerFördelar

- Används i användargränssnitt för att underlätta för användaren att förstå måldomänen.

- Kunskap, erfarenheter och begrepp från källdomänen används för att organisera innehållet i måldomänen.

- En väl utformad metafor erbjuder användaren en god konceptuell modell.

Nackdelar

- En metafor som bygger på en gammal källdomän aktiverar lite eller ingen förkunskap hos yngre användare

De lider av den fysiska världens begränsningar

- Vad händer när bokhyllan blir full?- Det går snabbare att hitta rätt bokmed en lista

Begränsar fantasin hos designers att komma på nya konceptuella modeller

- Skrivbordsmetaforen är nästan 40 år gammal!

Donald Normans designprinciper

”Att lägga kunskapen i världen”

- Lägg informationen i de produkter och system som skall användas på ett sådant sätt att användaren förstår hur man ska interagera med produkten/systemet

De olika principerna

- Synlighet(visibility)- Feedback- Begränsningar(constraints)- Konsekvens(consistency)- Affordance- Mappning (mapping)

Synlighet

- Vad man ser och inte ser i ett användargränssnitt.- Vägledning till vad man ska/kan göra.- Understödjer den automatiska handlingsnivån- ”Göm” eller ta bort mindre nödvändiga funktioner.

Feedback

Att återkoppla information till användaren omvilka handlingar som gjorts och vad resultatet blivit.

- Varje handling ska ge effekt(er)- Vanlig handling – liten feedback- Ovanlig handling – merfeedback- Utnyttjamänniskanssinnen- Relevanta och begripliga felmeddelanden- Delmålsfeedback

Begränsningar

Att begränsa den möjliga interaktion för användaren vid ett visst tillfälle.

- Avvaktivera val som inte är genomförbara för tillfället- Fysisk utformning

Konsekvens

- Liknande uppgifter bör utföras med liknande handlingar och objekt.- Lättare att lära och komma ihåg- Undvik godtycklighet – användaren ska känna igen sig- Internt – konsekvensinomanvändargränssnittet- Externt – konsekvensmellan användargränssnitt

Affordance

- De upplevda egenskaperna hos ett objekt.- De handlingar ett objekt tycks inbjuda till.- Affordance förmedlar ledtrådar till användaren.- Vad bjuder dessa in till?

Upplevd och verklig affordance

Verkliga objekt har verklig affordance som inte behöver läras in.

- Virtuella objekt saknar verklig affordance.- Kan vara olämpligt att designa för verklig affordance i ett

datoranvändargränssnitt!

Till exempel en almenacka, som man är van att använda i riktiga livet.

Synlighet viktig faktorför attförmedla rätt affordance.

- Begränsningar(constraints) kan utnyttjas för att begränsa ettföremåls affordance.

- Forcing functions tvingar användaren att uppfatta en viss sorts affordance.Det… avbryter (”stör”) ett automatiskt beteende och begränsar möjligheten att agera fel (t ex när du måste ”flippa” upp en bilnyckel ur dosan)

Mappning

- God synlighet är ett grundkrav för att mappningen ska kunna bli bra.

- Sträva efter naturlig mappning!Naturlig mappning:Att dra fördel av..1)fysiska liknelser2) kulturella standarder

3) generella biologiska förhållanden för attstödja en enkel, omedelbar och entydig förståelse.

Översikt, orientering och navigeringÖversikt: Vad finns?

Orientering: Var är jag?

Navigering: Hur kommer jag dit jag vill?

Översikt

- Ge användaren en översikt över vad produkten erbjuder- Tätt kopplat tillsynlighet (Norman)

”The F-shaped pattern”

Hur vi läser webbinnehåll

- Nästan 70% av läsarens fokus ligger till vänster i vyn

- Det vanligaste läsmönstret:

1. Horisontell ögonrörelse #1

2. Horisontell ögonrörelse #2

3. Vertikal ögonrörelse

Orientering

Några designriktklinjer:

- Länkarska vara beskrivande- Unika och beskrivande rubriker

S.k. ”breadcrumbs” kan vara användbart

- Visar nuvarande position- Tar lite plats- Erbjuder lätt navigering upp i h

Navigering

Se designriktklinjer för orientering

- Gruppering är en viktig aspekt

FelhanteringHandhavandefel

- Missförstår (man tänker fel)- Slip (man tänker rätt,men gör fel)

Systemfel

- ”Error 404 page not found”

Två sätt att hjälpa användaren är..

– Förebygga fel

Utforma produkten/systemet så att användaren inte kan göra fel, exmed begränsningar och forcing functions

– Åtgärda fel

Se till det finns möjligheter för användaren att upptäcka, förstå och åtgärda ett fel när det händer (och det kommer det att göra!)

Riktlinjer för design av felmeddelanden

- Upplys med artig ton användaren om vad han/hon behöver göra för att åtgärda felet.

- Undvik ord som FATAL, ERROR, INVALID, ILLEGAL etc.- Undvik långa felkoder och stora bokstäver.- Ljudfeedback ska användaren själv kunna ställa in, eftersom de kan orsaka

förlägenhet hos honom/henne.- Ge exakt information.- Erbjud en hjälpikon med vilken användaren kan få kontextberoende hjälp.- Erbjud information på olika nivåer så att kortare meddelanden

kompletteras med längre förklaringar

Sammanfattning- Användarens mentala modell av hur ett system/produktfungerar går via

användargränssnittet men påverkas av användarens bakgrund,förväntningar etc. Användargränssnittet ska spegla den konceptuella modell som systemet har och som speglar designsidans modell

- Använd Normans designprinciper för att placera kunskap i världen- Tänk på översikt – orientering – navigering- Förbygg fel i möjligaste mån och se till att det finns möjligheter för

användaren att upptäcka – diagnostisera – åtgärda felsomuppstår.

InteraktionsmodellerDe sätt en användare interagerarmed ett användargränssnitt (på en konceptuell nivå)

- Ett steg på vägen för att göra demer praktiska designvalen

• Fyra modeller gås igenom i boken:

1. Instruerande (instructing)

2. Konverserande (conversing)

3. Manipulerande (manipulating)

4. Utforskande (exploring)

ndra sätt att ”dela in” detta på kan vara:

- Situationsbaserat, ex. arbete, hemma, i centrum, på väg,…- Aktivitetsbaserat, ex. lära,socialisera, leka, fatta beslut, söka information,

…

Instruerade

Ex på instruerande interaktion

- Skriva textbaserade kommandon- Välja menyer från ett grafiskt gränssnittmedmus eller touch

- Ge kommandonmed röststyrning- Trycka på fysiska knappar

Konverserande

Underliggande konceptuellmodell om att man har en konversation med en annan människa

• Iställetför att ge order(instruerande)så bygger detta på en tvåvägskommunikation där systemet är en ”partner” i interaktionen.

• Allt från enkelröststyrning till mer ”naturliga” dialoger

- Ex. automatisk trafikupplysning, hjälp‐ och support‐system

Fördelen är att vi är vana vid att interagera på detta sätt i vår vardag

Nackdelen är att det kan bli missförstånd och dialogen kan bli väldigt onaturlig och omständlig

Manipulerande

• Innebär att man interagerar genom att dra, välja, öppna,stänga, etc. virtuella objekt

• Bygger på hur vi gör motsvarande aktiviteteri den fysiska världen, (exempelvis Nintendo Wii)

Utforskande

Användaren rör sig genom virtuella miljöer…

• …eller fysiska miljöer förstärkta med inbyggd sensorteknik

• Bygger, precis som manipulation, på att man agerar som man gör i den verkliga miljön också i den miljö man interagerar med (oavsett om den är virtuell eller förstärkt)

Sammanfattning interaktionsmodeller

- Notera att dessa modeller överlappar och går in i varandra och det går inte alltid att kategorisera en aktivitet som det ena eller andra

- Använd dem som utgångspunkt för att fundera på konceptuellmodell- Interaktionsmodell – vad användaren gör när hon interagerar med

systemet (ge kommandon,föra dialog,…)- Typ av användargränssnitt – vilket användargränssnitt som stödjer

användaren i interaktionen med systemet (röst/touch/…‐baserat, grafiskt gränssnittmed menyer,…)

Typer av användargränssnittKommandobaserad interaktion

Användaren ger kommandon som tolkas av systemet

- Förkortningarsomskrivsi kommandotolk (ver, ls)- Tangentbordskommandon (ctrl + alt + del)- Fasta tangentkommandon (delete, enter)

• Konsistens (consistency) är den viktigaste designprincipen

Fördelar

- Snabbt för vana användare- Billigt och enkelt- Flexibelt och rikt på valmöjligheter

Nackdelar

- Kräver träning och memorerande- Hög felfrekvens- Svårt att komma igång med

WIMP

WindowsIconsMenuesPointing device

Fördelar

- Lätt att lära, lätt att minnas- Rikligt med feedback- Visuellt tilldragande

Nackelar

- Kan tamycketskärmyta- Användaren måste lära sig symboler och ikoner- Missledande visuellrepresentation- Tidsödande byta styrdon

Dialogrutor

- Visuell organisation viktigt!- Risk att pressa in för mycket information i en ruta- Man pratar ibland om mappning av handlingssekvens dvs. att styra

användarens uppmärksamhet och handlingar så att han/hon gör saker och ting i rätt ordning.

Formulär

- Metafor: pappersformulär- Högerjustera titlar- Tillåt smidigt navigerig (kunna använda Tab-kanppen)- Ge tydlig feedback när fält fylls i fel

Menyer

- Strukturerat sätt att välja från tillgängliga alternativ- Bygger på principen att vi har lättare för att känna igen än att dra oss till

minnes (recognition overrecall)

Typer av menyer

Expanderande menyer

- Cascading, drop‐down menues- Kan svälja fler alternativ- Merflexibla- Kräver bramotorisk kontroll- Kan vara omöjliga att använda för personer

med funktions‐nedsättning och äldre människor

Kontextuella menyer

- Popup‐menyer- Begränsat antal alternativ som ä rrelevanta för den

speciella kontexten- Dyker upp där man är istället för högt uppe i en

menyrad- Hur vet användaren att den finns?

Designriktlinjer för menyer

- Bättre gråmarkera än ta bort- Positional constancy: Saker och ting bör befinna sig där vi är vana vid

att hitta dem- Lägg mest använda valen överst, minst använda nederst- Dela in valen i naturliga grupper- Erbjud eventuellt flera olika grupperingar av samma information- Använd genvägar

Andra typer av användargränssnitt

Användargränssnitt för mobil

- Inte en dedikerad användarmiljö. Används ”i farten”, på många olika platser.

- Har blivit en uttalad del av vardagslivet för de flesta människor.

Konstant växande applikationsområde:- Ta upp beställningar på restaurang- För att beställa varori affären- Resesällskap – hålla koll på vartåget är,mobilbiljett, studentkort,

underhållning- Multiplayer gaming- Som ett verktyg i undervisning

Designutmaningar:

- Små skärmar, begränsat antalfunktioner- Hantera multitouch- Specialanpassade interaktionssätt utvecklas kontinuerligt och kommer

göra ett tag framöver- Användarna har väldigt olika förkunskaper

Röststyrda nvändargränssnitt

- Tala med systemetför att ge instruktioner/föra en dialog

• Olika former

- Systemet guidar användaren och har kontrollen över dialogen- Mer flexibla system kan tillåta användaren att uttrycka sig friare

Designutmaningar:

- Hjälpa de som uttrycke rsig vagt eller osäkert- Vilken typ av röstskaman använda?- Guida användaren genomsystemet

• Göra val imenyer• Återhämta sig från fel

Efter detta finns det också touch-baserade-, gestbaserade- och multimodala användargränssnitt. Allt är samma skit. Kolla på PP föreläsning 10 för mer info om dem.

StyrdonTangentbord

QWERTY vs. Dvorak

- QWERTY: 150 ord/minut- Dvorak: 200 ord/minut- Mindre fel med Dvorak- Ändå är QWERTY standard.

Pekdon

Fördelar:

- Intuitiv: Man interagerar direkt med informationen- Robust

Nackdelar:

- Problem med belastningsergonomi- Handen kan skymma- Dålig precision- Dålig taktil feedback – många föredrar ett fysiskt tangentbord

Lift-off strategy är när du zoomar in genom att hålla fingret vid en specifik del av texten, om du förslagsvis vill lägga till en bokstav mitt i ett redan skrivet ord

Resistiv pekskärm

Fördelar:

- Billig- Går att peka med stylus,med handskar etc.- Kan ge taktil feedback

Nackdelar:

- Låg känslighet- Svårt implementera bra multitouch och svepande rörelser

Kapacitiv pekskärm

Fördelar:

- Högre känslighet- Multitouch

Nackdel:

- Går ej att peka med stylus, handskar etc.

Bra att veta kan även vara att en ”pekpinne” heter stylus

Fitts lagVad säger Fitts lag?

- Det tar längre tid att nå små objekt som är långt bort

- Små ändringar i storlek hos små objekt spelar större roll än små ändringar i storlek hos stora objekt

- Detsamma gäller för avståndet till objektet

Några konsekvenser av Fitts lag

- Ge större storlek till objekt som används ofta

- Placera objekt som används ofta nära markörens position (exempelvis pop-up-menyer)

- Man pratar ibland om ”The Magic Corners”

- ”The corner have infinite dimensions”, således lättast att nå/hitta

The Magic Corners: Win 95 vs. Win XP

Sammanfattning

- Vilken interaktionsmodeller passar den konceptuellamodellen hos systemet/produkten Instructing – conversing – manipulating – exploring

- Användargränssnitt kan utformas på många olika sätt – vilket passar den aktuella applikationen/aktiviteten

- Vilka styrdon är aktuella för applikationen?- Fitts lag är en matematisk modell som kan användas för att guida