Interaktion 1 Dagens föreläsning Interaktionsmodeller 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) 1
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, DVD, biljettautomat, Fördelen är att en instruerande modell stödjer snabb och effektiv interaktion 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 1. Instruerande 2
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 3
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 4
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) 5
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 Interaktionsmodeller Typer av användargränssnitt Ö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, ) 6
Typer av användargränssnitt Kommandobaserad interaktion WIMP GUI Fönster Dialogrutor Formulär Menyer Natural user interfaces (gester, touch, röst) och input/output teknik pratar vi om senare 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 7
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 WIMP 8
The Xerox Star Interface Utvecklades 1973 av Xerox PARC i Palo Alto, Kalifornien Mål: användargränssnitt som alla kan klara av WIMP Windows Icons Menues Pointing device WIMP + Lätt att lära, lätt att minnas Rikligt med feedback 9
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 10
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 11
Hur fick man ut disketten från en Mac förr? 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 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 12
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 13
Byta fönster Byta fönster Byta skrivbord Linux desktop cube 14
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 15
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 16
Designriktlinjer för formulär Designriktlinjer för formulär Högerjustera titlar Designriktlinjer för formulär Tillåt smidig navigering 17
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 18
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 menues Kan svälja fler alternativ Mer flexibla Kräver bra motorisk kontroll Kan vara omöjliga att använda för personer med funktionsnedsättning och äldre människor 19
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 20
Designriktlinjer för menyer Designriktlinjer för menyer Presentera relevanta val 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 21
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 22
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 Interaktionsmodeller Typer av användargränssnitt Översikt, orientering, navigering Felhantering 23
Ö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 24
Ö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 Det vanligaste läsmönstret: 1. Horisontell ögonrörelse #1 2. Horisontell ögonrörelse #2 3. Vertikal ögonrörelse Jakob Nielsen http://www.useit.com/alertbox/reading_patt ern.html 3. 1. 2. 25
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 designriktklinjer 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 26
Dagens föreläsning Interaktionsmodeller Typer av användargränssnitt Översikt, orientering, navigering Felhantering 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 27
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 28
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åattkortare meddelanden kompletteras med längre förklaringar. Sid 138 139 i kursboken 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 29
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_patte rn.html Massor av webbresurser för utforming av ex webb sidor, ex Användbarhetsboken www.användbart.se\ab 30