Interaktionsdesign, grundkurs INTERAKTION 1
Dagens föreläsning Vad är interaktion? Interaktionsmodeller Typer av användargränssnitt Översikt, orientering, navigering Felhantering
Vad är interaktion? 1. Allmänt? Synonymer? I denna kontexten? 2. Vad erbjuder knappen på bilden till höger för interaktion? Vad kan ni säga om affordance, synlighet, feedback och mappning?
Dagens föreläsning Vad är interaktion? Interaktionsmodeller (kap 2.5) Typer av användargränssnitt Översikt, orientering, navigering Felhantering
Interaktionsmodeller De sätt en användare interagerar med ett användargränssnitt (på en konceptuell nivå) En hjälp på vägen mot de mer praktiska designvalen Man talar om fyra olika modeller: 1. Instruerande (instructing) 2. Konverserande (conversing) 3. Manipulerande (manipulating) 4. Utforskande (exploring)
Interaktionsmodeller : 1. Instruerande Användaren instruerar systemet och talar om för det vad det ska göra Väldigt vanligt förekommande Ex. ordbehandlare, biljettautomat, Fördelar En instruerande modell stödjer snabb och effektiv interaktion Lätt att implementera Nackdelar Måste ofta dela ner uppgiften i deluppgifter
Interaktionsmodeller : 1. Instruerande Ex på instruerande interaktion Skriva textbaserade kommandon Välja menyer från ett grafiskt gränssnitt med mus eller touch Ge kommandon med röststyrning Trycka på fysiska knappar
Interaktionsmodeller : 2. Konverserande Underliggande konceptuell modell om att man har en konversation med en annan människa Istället för att ge order (instruerande) så bygger detta på en tvåvägskommunikation där systemet är en partner i interaktionen. Allt från enkel rö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
Interaktionsmodeller 2. Konverserande Ex på konverserande interaktion Automatiskt, röstbaserad dialog via telefon Textbaserad konversation med virtuell agent Röst- eller gestbaserad konversation med assisterande robot
Interaktionsmodeller 2. Konverserande Jämför hur du ställer en fråga till en annan människa hur du formulerar den till en automatisk röstbaserad tjänst hur du skriver den i ett sökfält på webben hur du formulerar den om du ställer den till en person i en chat
Interaktionsmodeller 3. Manipulerande Innebär att man interagerar genom att dra, välja, öppna, stänga, etc. virtuella objekt Bygger på hur vi gör motsvarande aktiviteter i den fysiska världen
Interaktionsmodeller 3. Manipulerande Ex på manipulerande interaktion Direktmanipulation flytta ett dokument till en mapp, Fysiska kontroller (Wii) och gester (Kinect) för att utföra manipulationen Fysiska objekt kan taggas och flyttas i en fysisk värld vilket överförs till en virtuell värld
Interaktionsmodeller 3. Manipulerande
Interaktionsmodeller 3. Manipulerande Direktmanipulation* känner vi igen från grafiska användargränssnitt. Det bygger på att virtuella ting ses som objekt som kan manipuleras. Uppfyller många av designprinciperna synlighet, affordance, mappning och feedback Och även flera av de användbarhetsmål vi pratade om i första föreläsningen, ex. lätta att lära, lätta att komma ihåg, ändamålsenliga, effektiva Vissa saker kan inte beskrivas i objektform och utförs enklare med kommandon (ex rättstavning) * myntat av Shneiderman 1983
Interaktionsmodeller 4. 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)
Interaktionsmodeller 4. Utforskande Ex på utforskande interaktion Second life 3D-modeller av byggnader eller stadsmiljöer Förstärkt verklighet (augmented reality)
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 Fundera på Vilken interaktionsmodell (instruerande, kommunicerande, manipulerande, utforskande) som skulle kunna passa för ett datorbaserat system som ska kunna användas av mindre barn för att kommunicera med barn i andra delar av världen.
Dagens föreläsning Vad är interaktion? Interaktionsmodeller Typer av användargränssnitt (Kap 6.1-6.2) Översikt, orientering, navigering Felhantering
Typer av användargränssnitt Den delen av systemet som användaren interagerar med länken mellan användare och system Ett användargränssnitt kan se ut på många olika sätt Från kommandobaserad till brain-computer interfaces (1) Från tangentbord till gester (2) Från stationär PC till smartwatch (3) Kan betyda 1. interaktionsstil (kommandon, fönster, ) 2. input/output-teknik (touch, mus, ) 3. plattform (PC, smartphone, )
Typer av användargränssnitt Kommandobaserad interaktion WIMP GUI Fönster Dialogrutor Formulär Menyer Natural user interfaces (gester, touch, röst) Nästa föreläsning!
Kommandobaserad interaktion Användaren ger kommandon som tolkas av systemet Förkortningar som skrivs i kommandotolk (ver, ls) Tangentbordskommandon (ctrl + alt + del) Fasta tangentkommandon (delete, enter) Konsistens (consistency) är den viktigaste deisgnprincipen
Kommandobaserad interaktion
Kommandobaserad interaktion 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
The Xerox Star Interface Utvecklades 1973 av Xerox PARC i Palo Alto, Kalifornien Mål: användar-gränssnitt som alla kan klara av
WIMP Windows Icons Menues Pointing device
WIMP Fördelar Lätt att lära, lätt att minnas Rikligt med feedback
WIMP Fördelar Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande
WIMP Fördelar Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande Nackdelar Kan ta mycket skärmyta
WIMP Fördelar Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande Nackdelar Kan ta mycket skärmyta Användaren måste lära sig symboler och ikoner
WIMP Fördelar Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande Nackdelar Kan ta mycket skärmyta Användaren måste lära sig symboler och ikoner Missledande visuell representation
Hur fick man ut disketten från en Mac förr?
WIMP Fördelar Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande Nackdelar Kan ta mycket skärmyta Användaren måste lära sig symboler och ikoner Missledande visuell representation Tidsödande byta styrdon
Graphical User Interface (GUI) WIMP utvecklades och numera pratar man mer allmänt om grafiska användargränssnitt (graphical user interfaces) Vanliga GUI-komponenter är: Fönster Dialogrutor Menyer Formulär
PAUS
Fönster
Fönster För att överkomma skärmens begränsade yta Översikt, navigering och orientering försvåras Att växla mellan olika fönster är en av de vanligaste operationerna när vi interagerar med ett datorsystem Genomsnittstiden för hur länge ett fönster är öppet och interageras med = 20 sekunder Att designa bra fönsterhantering är svårt!
Byta fönster Vilka olika sätt att byta fönster (byta aktivt program) kan ni komma på?
Byta skrivbord Linux desktop cube
Dialogrutor Speciell version av fönster som används för exempelvis: Bekräftelser Felmeddelanden Formulär Sekvenser
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 hen gör saker och ting i rätt ordning.
Spara som i tidig Office-version
Spara som i Office XP
Dialogrutor med tabbar Utrymmeseffektiv metod Översikt, navigering och orientering försvåras (speciellt om flera rader av tabbar används)
Designriktlinjer för formulär Vilken är metaforen? Vilka designriktlinjer kan ni se här till vänster?
Designriktlinjer för formulär Tillåt smidig navigering
Designriktlinjer för formulär Ge tydlig feedback när fält har fyllts i fel
Designriktlinjer för formulär Använd begränsningar för att styra vilken information som ska fyllas i
Menyer
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 minnas (recognition over recall)
Menyer Många olika typer av menyer Expanderande menyer Kontextuella menyer Pajmenyer Adaptiva menyer
Typer av menyer Expanderande menyer Cascading, drop-down menus Kan svälja fler alternativ Mer flexibla Kräver bra motorisk kontroll
Typer av menyer Kontextuella menyer Popup-menyer Begränsat antal alternativ som är relevanta 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?
Typer av menyer Pajmenyer Typ av popup-meny Erbjuder ett snabbt sätt att välja mellan alternativen Begränsad mängd alternativ Man kan välja utan att titta (muskelminnet)
Typer av menyer Adaptiva menyer De minst använda valen visas ej Fungerar bra för en del användare men väcker ogillande hos vissa användare Bör ej användas som defaultinställning
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
Designriktlinjer för menyer Lägg mest använda valen överst, minst använda nederst
Designriktlinjer för menyer Dela in valen i naturliga grupper Erbjud eventuellt flera olika grupperingar av samma information Card sorting!
Designriktlinjer för menyer Undvik väldigt långa listor Erbjud någon form av struktur som underlättar att hitta i Erbjud möjlighet att fylla i bokstäver Fish-eye
Designriktlinjer för menyer Använd genvägar
Interaktionsmodeller och typer av användargränssnitt Använd dem som utgångspunkt för att fundera på konceptuell modell 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änssnitt med menyer, )
Dagens föreläsning Vad är interaktion? Interaktionsmodeller Typer av användargränssnitt Översikt, orientering, navigering (ej explicit i boken) Felhantering
Översikt, orientering och navigering Översikt: Vad finns? Orientering: Var är jag? Navigering: Hur kommer jag dit jag vill? Hjälp användaren att rita upp en karta i huvudet.
Översikt: vad finns? Ge användaren en översikt över vad produkten erbjuder Tätt kopplat till synlighet
Översikt Surfa in på www.lu.se på telefon (och dator) Hur skiljer sig översikten?
Översikt Automod Svårt att få överblick över helheten när olika delar ligger löst som individuella enheter.
The F-shaped pattern
The F-shaped pattern Hur vi läser webbinnehåll Nästan 70% av läsarens fokus ligger till vänster i vyn 1. Det vanligaste läsmönstret: 1. Horisontell ögonrörelse #1 2. Horisontell ögonrörelse #2 3. Vertikal ögonrörelse 3. 2. Jakob Nielsen http://www.useit.com/alertbox/ reading_pattern.html
Orientering: var är jag? Användaren skall lätta förstå var man befinner sig i systemet, eller i en sidhierarki
Navigering: hur kommer jag dit jag vill? Se designriktlinjer för orientering Gruppering är en viktig aspekt
Några designriktlinjer för orientering och navigering Länkar ska 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 hierarkin Lätta att förstå och använda
Dagens föreläsning Vad är interaktion? Interaktionsmodeller Typer av användargränssnitt Översikt, orientering, navigering Felhantering (s 138)
Felhantering Det kommer att bli fel hur bra design systemet än har och hur välinformerad användaren än är!
Felhantering Handhavandefel Missförstår (man tänker fel) Slip (man tänker rätt, men gör fel) Systemfel
Felhantering Två sätt att hjälpa användaren Förebygga fel Utforma produkten/systemet så att användaren inte kan göra fel, ex med 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!)
Upptäckt-diagnos-åtgärd Hur lätt eller svårt är det att upptäcka felet/problemet och hur lång tid tar det? Hur lätt eller svårt är det att diagnostisera och förstå felet/ problemet? Hur tydligt framgår det vilken åtgärd som är rätt (t ex klicka på undo-knappen eller ringa tekniker för service)?
Principer för god felhantering Synlighet gör rätt saker synliga Feedback bra & begriplig Mappning vettig layout rätt saker på rätt plats Reversibilitet markera om något ej är reversibelt man ska bara behöva ändra/reversera det som är fel Forcing functions en funktionalitet som tvingar in användaren i ett visst beteende, ex att micron inte kan startas om dörren är öppen, och att bilen måste låsas med nyckeln överväg om dessa kan vara till nytta
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. 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.
Ett bra felmeddelande Varför är detta ett bra felmeddelande? Talar om vad som är fel Talar om orsaken till felet Ger alternativ på sätt att lösa problemet eller komma runt det
Och ett mindre bra
Och här är en riktig värsting
Referenser och resurser Historia om WIMP och GUI https://www.sensomatic.com/chz/gui/history.html F-shaped pattern http://www.useit.com/alertbox/reading_pattern.html Massor av webbresurser för utforming av ex webb-sidor, ex Användbarhetsboken www.användbart.se\ab www.interaction-design.org - online-resurs för teori om interaktionsdesign