Tre kursblock Grundläggande teori för design av användargränssnitt Människa dator interaktion Del 1 1. Design 2.Human factors & Ergonomics 3. Human computer interaction Inledningsvis Interaktiv produkt/system Hittills Dags att fylla på med det som saknas! Ergonomi kroppen Hörselsinnet Synsinnet Kognition perception Sociala och affektiva aspekter Human factors 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 Designprocess Iterativ process Användarcentrerad design Konceptuell design Prototyping Utvärdering Interaktiv produkt/system Interaktiv produkt/system 1
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 Interaktionsmodeller Styrdon Menyer, formulär, dialoger Dagens föreläsning Nästa föreläsning Mentala och konceptuella modeller (kap 2.3) Metaforer (kap 2.4) Donald Normans designprinciper (kap 1.6.3) Översikt, navigering och orientering (ej i boken) Felhantering (kort sid 138) Innehåll Mentala och konceptuella modeller (kap 2.3) Metaforer (kap 2.4) Donald Normans designprinciper (kap 1.6.3) Översikt, navigering och orientering (ej i boken) Felhantering (kort sid 138) Mentala och konceptuella modeller Mentala och konceptuella modeller SJ:s tågdörrar Designerns modell Systemets konceptuella modell Användarens modell Vi utformar en dörr som öppnas med en fotocell! Användargränssnitt System Den konceptuella modell som designern har av systemet och som denne försöker förmedla genom systemets konceptuella modell Användarens mentala modell som formas av systemets konceptuella modell och användarens kunskaper, erfarenheter, förväntningar, etc. 2
Ibland reagerar inte fotocellen...men folk begriper sig inte på fotoceller så vi gör en låtsasknapp istället! Huh? Jag trycker men inget händer? Gör jag fel? Är dörren trasig? Låtsasknapp Dörr Låtsasknapp Dörr Varför inte erbjuda en mer korrekt konceptuell modell från början? Donald Normans kylskåp Detta är en dörr som öppnas med en gest. Donald Norman, The Design of Everyday Things, sid. 13 17 Två fack Kylvaror Frysvaror Två reglage Donald Normans kylskåp Donald Normans kylskåp Uppgift: Gör frysen varmare behåll temperaturen i kylen. 3
Vilken konceptuell modell erbjuder detta användargränsnitt? Tvåfack tvåreglage Kylens temperatur kontrolleras med ett reglage och frysens temperatur med ett annat reglage. Den mest kända konceptuella modellen Att använda en datorärsomattarbetapåkontor. Konceptuell modell (s. 40) En ö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 modell Metaforer Interaktionsmodell Interaktionsteknik Webbutiker Diskussion: På vilken konceptuell modell bygger de flesta webbutiker? 4
Innehåll I projektet: Vilken eller vilka konceptuella modeller bör ni erbjuda era användare? Mentala och konceptuella modeller (kap 2.3) Metaforer (kap 2.4) Donald Normans designprinciper (kap 1.6.3) Översikt, navigering och orientering (ej i boken) Felhantering (kort sid 138) Vad är en metafor? Metaforer Inom litteraturen: Min ros, jag älskar dig! Inom interaktionsdesing: konceptuella metaforer Konceptuell metafor definition Outlook Calendar Mappning mellan två kognitiva domäner, en källdomän och en måldomän Källdomän Metafor Måldomän 5
World Wide Web Varför metaforer? 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. Gammal källdomän Problem med metaforer i användargränssnitt En metafor som bygger på en gammal källdomän aktiverar lite eller ingen förkunskap hos yngre användare Aktiverar olämplig bakgrundskunskap i användarens mentala modell Hjälper inte användaren att hitta tjänster som är datorspecifika Hur gör man en sökning i en bokhylla? 6
Riskerar att bryta konventioner och kulturella regler 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 bok med en lista. Begränsar fantasin hos designers att komma på nya konceptuella modeller Skrivbordsmetaforen är nästan 40 år gammal!... men ändå så kommer användargränssnitt förmodligen byggapåmetaforerfören lång tid framöver. Innehåll I projektet: Finns det metaforer som erbjuder användaren en god konceptuell modell som ni kan använda er av? Mentala och konceptuella modeller (kap 2.3) Metaforer (kap 2.4) Donald Normans designprinciper (kap 1.6.3) Översikt, navigering och orientering (ej i boken) Felhantering (kort sid 138) 7
Donald Norman Lägg kunskapen i världen! 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 Donald Normans designprinciper Synlighet (visibility) Feedback Begränsningar (constraints) Konsekvens (consistency) Affordance Mappning (mapping) (ej med i kursboken) 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. Kap 1.6.3 i kursboken Synlighet Synlighet Designriktlinjer Göm eller ta bort mindre nödvändiga funktioner. Knappar bakom luckan. 8
Synlighet Designriktlinjer En funktion en kontroll. Synlighet Designriktlinjer Utnyttja riktlinjer för layout, färg, ikoner, text, gruppering, etc. Feedback Feedback Att återkoppla information till användaren om vilka handlingar som gjorts och vad resultatet blivit. Feedback Designriktlinjer Varje handling ska ge effekt(er) Vanlig handling liten feedback Ovanlig handling mer feedback Utnyttja människans sinnen Relevanta och begripliga felmeddelanden Delmålsfeedback Feedback Designriktlinjer Utnyttja människans sinnen Critical stop Notify 9
Feedback Designriktlinjer Relevanta och begripliga felmeddelanden Feedback Designriktlinjer Delmålsfeedback Begränsningar Att begränsa den möjliga interaktion för användaren vid ett visst tillfälle. Begränsningar Designriktlinjer Avvaktivera val som inte är genomförbara för tillfället Begränsningar Designriktlinjer Fysisk utformning Konsekvens Liknande uppgifter bör utföras med liknande handlingar och objekt. Lättare att lära och komma ihåg 10
Konsekvens Designriktlinjer Undvik godtycklighet användaren ska känna igen sig Öppna dialogruta Spara som dialogruta Konsekvens Designriktlinjer Internt konsekvens inom användargränssnittet Externt konsekvens mellan användargränssnitt (se exempel) Knappsats telefon Knappsats miniräknare Affordance Affordance De upplevda egenskaperna hos ett objekt. De handlingar ett objekt tycks inbjuda till. Affordance förmedlar ledtrådar till användaren. Affordance Vad bjuder dessa in till? Affordance Vad kan jag egentligen klicka på? 11
Donald Norman: Upplevd och verklig affordance Verklig vs. virtuell almanacka 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! Affordance Designriktlinjer Synlighet viktig faktor för att förmedla rätt affordance. Begränsningar (constraints) kan utnyttjas för att begränsa ett föremåls affordance. Forcing functions tvingar användaren att uppfatta en viss sorts affordance. Avbryter ( stör ) ett automatiskt beteende Begränsa möjligheten att agera fel Begränsningar och forcing functions Vilka mer forcing functions skulle man kunna tänka sig i en bil eller i andra sammanhang? Begränsningar och forcing functions I interaktionsdesign och datorbaserade användargränssnitt Mappning Relationen mellan någon egenskap hos ett objekt och dess funktion. 12
Mappning Designriktlinjer 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 liknelser, 2) kulturella standarder, och 3) generella biologiska förhållanden för att stödja en enkel, omedelbar och entydig förståelse. Naturlig mappning Fysiska liknelser Naturlig mappning Kulturella standarder Naturlig mappning Biologiska förhållanden Donald Normans designprinciper Synlighet (visibility) Feedback Begränsningar (constraints) Konsekvens (consistency) Affordance Mappning (mapping) Lägg kunskapen i världen! 13
Innehåll Mentala och konceptuella modeller (kap 2.3) Metaforer (kap 2.4) Donald Normans designprinciper (kap 1.6.3) Översikt, navigering och orientering (ej i boken) Felhantering (kort sid 138) Översikt, orientering och navigering Översikt, orientering och navigering Översikt: Vad finns? Orientering: Var är jag? Navigering: Hur kommer jag dit jag vill? Översikt: vad finns? Ge användaren en översikt över vad produkten erbjuder Tätt kopplat till synlighet (Norman) Översikt Automod 14
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. Orientering: var är jag? Användaren skall lätta förstå var man befinner sig i systemet, eller i en sidhierarki Orientering: var är jag? Några designriktklinjer 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 Navigering: hur kommer jag dit jag vill? Se designriktklinjer för orientering Gruppering är en viktig aspekt Exempel: Två olika designer av en ipadtidning 15
Innehåll Mentala och konceptuella modeller (kap 2.3) Metaforer (kap 2.4) Donald Normans designprinciper (kap 1.6.3) Översikt, navigering och orientering (ej i boken) Felhantering (kort sid 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 överväg om dessa kan vara till nytta 16
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. 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 Sid 138 139 i kursboken Och här är en riktig värsting Sammanfattning Användarens mentala modell av hur ett system/produkt fungerar 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 fel som uppstår. Inbjudan Avancerad interaktionsdesign Mässa med presentation av projekt 13 december 8 10 Stora hörsalen Drop in http://www.eat.lth.se/kurser/interaktionsdesig n/avancerad_interaktionsdesign_mamn01/ 17