Grundläggande teori för användargränssnitt,del 2. Innehåll. Innehåll. Interaktionsmodeller (Interaction types, kap 2.5)

Transkript

1 Vi håller på att fylla på den gröna delen! Grundläggande teori för användargränssnitt,del 2 Ergonomi kroppen Hörselsinnet Synsinnet Kognition perception Sociala och affektiva aspekter Human factors Användargränssnitt (MDI) Grundläggande teori för design av användargränssnitt Designprocess Iterativ process Användarcentrerad design Konceptuell design Prototyping Utvärdering Interaktiv produkt/system Grundläggande teori för design av användargränssnitt Innehåll Innehåll Mentala och konceptuella modeller Metaforer inom användargränssnitt Designprinciper Normans designprinciper Översikt, navigering och orientering Felhantering Interaktion Typer av användargränssnitt Menyer, formulär, dialoger Styrdon Fitts lag Förra föreläsning Dagens föreläsning (kap 2.5) OBS! Interaction types Typer av användargränssnitt (kap 6) OBS! Interface types Styrdon (ej i boken) Fitts lag (kort på sid ) Innehåll (kap 2.5) OBS! Interaction types Typer av användargränssnitt (kap 6) OBS! Interface types Styrdon (ej i boken) Fitts lag (kort på sid ) (Interaction types, kap 2.5) 1

2 De sätt en användare interagerar med ett användargränssnitt (på en konceptuell nivå) Ett steg på vägen för att göra de mer praktiska designvalen Fyra modeller gås igenom i boken: 1. Instruerande (instructing) 2. Konverserande (conversing) 3. Manipulerande (manipulating) 4. Utforskande (exploring) Andra 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, 1. Instruerande Användaren instruerar systemet och talar om för det vad det ska göra Väldigt vanligt förekommande Ex. ordbehandlare, DVD, biljettautomat, Fördelen ät att en instruerande modell stödjer snabb och effektiv interaktion 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 1. Instruerande 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 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 2

3 2. Konverserande 2. Konverserande Jämför hur du skriver en fråga i Google och hur du formulerar den om du ställer den till någon i en chat! 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 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 3. Manipulerande 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 de designprinciper vi pratade om i förra förläsningen, ex. synlighet 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öras enklare med kommandon (ex rättstavning) * myntat av Shneiderman

4 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) 4. Utforskande Ex på utforskande interaktion Second life 3D modeller av byggnader eller stadsmiljöer Förstärkt verklighet (augmented reality) Sammanfattning 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å 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, ) Innehåll (kap 2.5) OBS! Interaction types Typer av användargränssnitt (kap 6) OBS! Interface types Styrdon (ej i boken) Fitts lag (kort på sid ) Typer av användargränssnitt Typer av användargränssnitt Interface types (kap 6) Kan kategoriseras på olika sätt (ej viktigt): Interaktionsstil Kommando/GUI/ Input/output teknik Pen/gest/ Plattform Smartphone/PC/ 4

5 Kommandobaserad interaktion 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 Fördelar Snabbt för vana användare Billigt och enkelt Flexibelt och rikt på valmöjligheter Kommandobaserad interaktion Nackdelar Kräver träning och memorerande Hög felfrekvens Svårt att komma igång med The Xerox Star Interface WIMP Utvecklades 1973 av Xerox PARC i Palo Alto, Kalifornien Mål: användargränssnitt som alla kan klara av 5

6 WIMP WIMP Windows Icons Menues Pointing device + Lätt att lära, lätt att minnas Rikligt med feedback WIMP + Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande WIMP + Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande Kan ibland ta onödigt mycket skärmyta 6

7 WIMP + Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande Kan ta mycket skärmyta Användaren måste lära sig symboler och ikoner WIMP + Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande Kan ta mycket skärmyta Användaren måste lära sig symboler och ikoner Missledande visuell representation WIMP + Lätt att lära, lätt att minnas Rikligt med feedback Visuellt tilldragande Kan ta mycket skärmyta Användaren måste lära sig symboler och ikoner Missledande visuell representation Tidsödande byta styrdon 7

8 Graphical User Interface (GUI) Fönster WIMP + lite mer Vanliga GUI komponenter Fönster Dialogrutor Menyer Formulär Ytterligare komponenter Ljud 3D Animationer Docks områden där man kan fästa program etc Rollovers hålla muspekaren över ett område och få mer info/ändra bild/ Se exempel här. Fönster Byta 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 Byta fönster 8

9 Speciell version av fönster som används för exempelvis: Bekräftelser Felmeddelanden Formulär Sekvenser Dialogrutor 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. 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) Formulär Metafor: pappersformulär 9

10 Designriktlinjer för formulär Designriktlinjer för formulär Högerjustera titlar 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 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 dra oss till minnes (recognition over recall) 10

11 Typer av menyer Expanderande menyer Cascading, drop down menues Kan svälja fler alternativ Mer flexibla Kräver bra motorisk kontroll Kan vara omöjliga att använda för personer med funktions nedsättning och äldre människor 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 starkt ogillande hos vissa användare Bör ej användas som defaultinställning Designriktlinjer för menyer Designriktlinjer för menyer Presentera relevanta val 11

12 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 Designriktlinjer för menyer Card sorting för att gruppera Gruppera följande: Pasta, ris, kyckling, morot, äpple, potatis, lamm, sallad, apelsin, bröd Designriktlinjer för menyer Undvik väldigt långa listor Menyer som kan skrollas Kombinera med möjlighet att fylla i bokstäver Se alternativ utformning i boken (sid ) Fish eye Designriktlinjer för menyer Använd genvägar 12

13 Ikoner Sid ikursboken Tas upp på föreläsningen Grafisk design nästa vecka Andra typer av användargränssnitt Mobil* Speech* Touch* Airbased gestures* Haptic Mixed & augmented reality Virtual reality Multimodal Sharable * Dessa nämns ytterst kortfattat här för att ge er inspiration till era projekt! Dessa och övriga i listan kommer ni att studera i kurserna Avancerad interaktionsdesign och Virtual Reality i teori och praktik 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 varor i affären Resesällskap hålla koll på var tåget är, mobilbiljett, studentkort, underhållning Multiplayer gaming Som ett verktyg i undervisning Användargränssnitt för mobil Designutmaningar Små skärmar, begränsat antal funktioner 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 användargränssnitt Tala med systemet fö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 Röststyrda användargränssnitt Designutmaningar Guida användaren genom systemet Göra val i menyer Återhämta sig från fel Hjälpa de som uttrycker sig vagt eller osäkert Vilken typ av röst ska man använda? 13

14 Touch baserade användargränssnitt Förekommer i alltfler sammanhang Smartphones, läsplattor, surfplattor, Biljettbokning Låna böcker Checka in hos tandläkaren Nya interaktionssätt Swiping, flicking, pinching, pushing, tapping, Flicking = kan vara en snabb version av swiping men det beror lite på vilken modell man använder (det jag beskrev på föreläsningen kallas oftare bara drag and hold ) Touch baserade användargränssnitt Designutmaningar Kommer de nya interaktionssätten att förändra sättet vi konsumerar och interagerar med digital information? Hur kan de gamla interaktionssätten och de nya kombineras? Snabbare att skriva på ett fysiskt tangentbord än ett virtuellt Snabbare att mha flicking att välja i en meny jämfört med mus. Gestbaserade användargränssnitt Använder sensorer, bildanalys, datorseende för att identifiera gester Ofta representeras användaren av en virtuell avatar Likheten med verkliga rörelser gör att många användargrupper kan använda det lätt Gestbaserade användargränssnitt Designutmaningar Vilka rörelser kan kännas igen? Vilka rörelser är relevanta och naturliga att göra? Är det mer intuitivt att hålla i någon fysisk enhet (Wii) eller att inte hålla i något alls (Kinect)? Multimodala användargränssnitt Kombinera olika modaliteter för att berika och förstärka interaktionen Touch, ljud, röst, fysiska knappar, Innehåll (kap 2.5) OBS! Interaction types Typer av användargränssnitt (kap 6) OBS! Interface types Styrdon (ej i boken) Fitts lag (kort på sid ) 14

15 Styrdon Styrdon (ej i kursboken) Tangentbord Pekdon Tangentbord QWERTY layout QWERTY layout Dvorak layout 15

16 QWERTY vs. Dvorak QWERTY: 150 ord/minut Dvorak: 200 ord/minut Mindre fel med Dvorak Ändå är QWERTY standard. Varför? Tangentbordsknappar Konkav, sträv yta 12 mm Tangentbordsknappar gram Följer man dessa riktlinjer så får man... Snabb input Låg felfrekvens Bra feedback 3 5 mm Pekdon Pekskärm 16

17 Pekskärm Intuitiv Man interagerar direkt med informationen Pekskärm Intuitiv Man interagerar direkt med informationen Robust Problem med belastningsergonomi Pekskärm Intuitiv Man interagerar direkt med informationen Robust Problem med belastningsergonomi Handen kan skymma Pekskärm Intuitiv Man interagerar direkt med informationen Robust Problem med belastningsergonomi Handen kan skymma Dålig precision Lift off strategy Teknik för bättre precision i pekskärmar 1. Peka på skärmen, markör dyker upp 2. Flytta markören 3. Lyft fingret Pekskärm Intuitiv Man interagerar direkt med informationen Robust Problem med belastningsergonomi Handen kan skymma Dålig precision Dålig taktil feedback många föredrar ett fysiskt tangentbord 17

18 Pekskärm Resistiv pekskärm Olika typer av teknik Resistiva Kapacitiva Resistiv pekskärm Kapacitiv pekskärm Billig Går att peka med stylus, med handskar etc. Kan ge taktil feedback Låg känslighet Svårt implementera bra multi touch och svepande rörelser Kapacitiv pekskärm Stylus Högre känslighet Multi touch Går ej att peka med stylus, handskar etc. 18

19 Stylus Mus Intuitiv Hög precision Omständig Mobila enheter kräver två händer Mus Billig Bra belastningsergonomi Hög precision Kräver en smula träning i början Omständigt flytta handen Innehåll (kap 2.5) OBS! Interaction types Typer av användargränssnitt (kap 6) OBS! Interface types Styrdon (ej i boken) Fitts lag (kort på sid ) Vi börjar med ett experiment Fitts lag actor.net/fitts/index.html En matematisk modell av finmotorisk kontroll 19

20 Fitts lag Fitts lag Distance (D) OK OK Width (W) Fitts lag Distance (D) T = tid att nå målet D = avstånd till målet W = målets bredd a, b = konstanter som beror på styrdonet OK Width (W) Vad 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 Det samma gäller för avståndet till objektet Ge större storlek till objekt som används ofta Några konsekvenser av Fitts lag 20

21 Placera objekt som används ofta nära markörens position Objekt vid skärmkanten har oändlig målbredd! Pop up menyer The Mini Toolbar Notera skillnaden! Man pratar ibland om The Magic Corners The Magic Corners: Win 95 vs. Win XP Hur drar pajmenyer nytta av Fitts lag? 21

22 OBS! Kursbokens beskrivningar av Fitts lag är inte helt korrekta. Utgå från denna föreläsning istället! Sammanfattning Vilken interaktionsmodeller passar den konceptuella modellen 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 utformningen av ett användargränssnitt Inbjudan Avancerad interaktionsdesign Mässa med presentation av projekt 13 december 8 10 Stora hörsalen Drop in n/avancerad_interaktionsdesign_mamn01/ 22