Att hinna med: TDP022 Användargränssnitt Olika typer av gränssnitt och interaktionstekniker Människans egenheter Eva Ragnemalm IDA 1 Kommandogränssnitt Sätt ihop en hög med hålkort Lägg dem i kön och vänta Operatören kör dem när det är din tur Sedan får du vänta lite till cp meriter.txt ~/personligt Kopiera filen meriter.txt till katalogen personligt i hemkatalogen Låter det bekant? 2 Köra program Regler och guidelines Batch Computing Hur fungerar våra sinnen? Hur tänker och minns vi? Fyll i ett formulär på nätet Skicka in dina kommandon till servern Sedan skickar den tillbaka ditt resultat Vi gör fortfarande batch computing då vi inte kan få realtidsinteraktion 3 4
Fördelar och nackdelar med kommandogränssnitt Om användaren bara vet och kommer ihåg rätt kommandon så är detta det snabbaste gränssnittet för många uppgifter Gränssnittet kräver mindre minne än andra gränssnitt Det kräver mindre CPU än andra gränssnitt En lågupplöst billig skärm kan användas Remote access Går att skripta Menygränssnitt Upplevd kontroll när man väl behärskar det. För någon som aldrig använt ett CLI så är det förvirrande Kommandon måste vara exakt rätt inmatade Om man skriver fel så måste man ofta börja om från början Man måste lära sig massvis av kommandon vilket leder till hög investeringskostnad för att komma igång 5 Fördelar och nackdelar med menygränssnitt Man behöver inte lära sig några kommandon Man får val presenterade steg för steg och behöver inte komma ihåg något Även om man inte vet vad man ska göra så kan man gissa Menyer behöver inte vara visuella utan kan läsas upp Kräver inte så mycket CPU eller minne Interaktionen sker genom att man stegar sig igenom en hierarki av menyer eller skärmar Man får en meny, gör ett val och får nästa meny ur vilken man gör ett val osv. Exempel: Mobiler, bankomater, informationskiosker, TVgränssnitt 6 Grafiska gränssnitt # Ett dåligt designat menygränssnitt blir lätt ineffektivt Många menyer eller skärmar att gå igenom kan vara irriterande Oftast kan man inte gå direkt dit man vill i menyhierarkin # # # # 7 Vårt vanligaste gränssnitt idag Använder sig ofta av WIMP Windows, Icons, Menus, Pointers Baseras på principen WYSIWIG What you see is what you get Direktmanipulation Spatiala representationer # Visar handlingar med markören 8
Fördelar med grafiska gränssnitt Man behöver inte lära sig någon syntax eller kommandon Synligt handlingsutrymme Noviser lär sig snabbt Experter jobbar snabbt Mellanbra användare behåller sin kunskap Multitasking: Gör det lätt att flytta data mellan olika program Snabb och synlig respons Nackdelar med grafiska gränssnitt Uppenbara kontrolldon Enkelt att ångra Lätt att skapa alternativ och jämföra Felmeddelande behövs sällan Användare upplever mindre oro Användare kan se om handlingarna för dem närmare målet Användare utvecklar självförtroende och expertis 9 Fysiska gränssnitt (TUI) www.youtube.com/watch?v=keap6iliyww Kräver mer hårddisk, minne och CPU än många andra gränssnitt Spatiala eller visuella representationer kan bli för utspridda så att man tappar överblicken Flödesscheman på hög abstraktionsnivå och databasscheman blir förvirrande komplexa Vissa designlösningar kan tvinga bort viktig information från skärmen Användarna måste lära sig de grafiska representationerna Den visuella representationen kan vara missvisande Att skriva kommandon kan vara snabbare 10 Naturliga gränssnitt (NUI) Vi är fysiska varelser och interagerar med världen med hela kroppen, inte bara ögon och fingertoppar. Digitala objekt Multitouch Verkligen använda hela kroppen Wearables http://www.youtube.com/watch?v=vm_fzlya8y4 11 12
Interaktionsteknik Gränssnitt Tangentbord Kommandorad (CLI) Tal Menysystem (MDI) Virtuell verklighet Pekdon (mus, penna...) Grafiska gränssnitt (GUI) Pekskärm, digitala bord Fysiska gränssnitt (TUI) Sensorer (kroppsrörelse, ögonrörelse, kamera) Naturliga gränssnitt (NUI) Virtuell verklighet? Glasögon ger djup, stereohörlurar ger surroundljud. lukt Rörelsedetektering (rotation, förflyttning...) http://www.youtube.com/watch?v=nmpoqzghumo 13 http://www.youtube.com/watch?v=eksn2o54xp0 14 Förstärkt verklighet När den digitala världen och den analoga integreras 16
Människans egenheter Hur fungerar vår perception? Hur fungerar våra sinnen (perception)? Syn Hörsel Känsel Lukt, smak? Syn avståndsbedömning (tänk på att skärmen är en platt yta) färgseende 17 18 Avståndsbedömning/djup Primära signaler Stereoseende Ackomodation Konvergens Sekundära Perspektiv Ljus och skugga dolda delar Höjd Relativ storlek Förändring i ytor Relativ rörelse (i rörlig bild) 19 20
Färgseende Hörsel Normal Obehagliga ljud (frekvensområde, ljudnivå) Tolkning (Hypotesprövning) Kan inte stänga öronen The coctail party phenomenon Rödgrön färgblind 21 22 Känsel Kognition hur vi tänker haptiska gränssnitt Uppmärksamhet Minne Affordance (handlingsinvit) 23 24
HUMANCENTERED SYSTEMS Uppmärksamhet Kan fokuseras Är en begränsad resurs Vissa saker går att göra utan att det kräver uppmärksamhet (inlärning) Eva Ragnemalm, Stefan Holmlid, Pär Svensson, HCS 26 Minne Korttidsminne Korttidsminne Långtidsminne Även arbetsminne (Working memory) Visuellt (spatiellt) Auditivt Kort (30 sek) Repetition Begränsad mängd 27 28
Korttidsminne Gruppera (Chunk it) Kom ihåg: 196304289041 Dela in i grupper Det blir också lättare om man känner till tolkningen av data. 29 30 Korttidsminne gruppera Långtidsminne 196304289041 34 Chunking det magiska antalet 7 (Miller s lag) Permanent (i princip) Obegränsad mängd Multimodal (lukt, smak, doft, rörelse...) 31 32
Recall vs Recognition Affordance (handlingsinvit) Lättare känna igen än komma ihåg Ligger bakom grafiska gränssnitts genomslagskraft (menyer, toolbars osv) Uppfattade, och faktiska, egenskaper hos ett ting (digitalt eller analogt) som bestämmer vad man kan göra med den. 33 34 Ikoner/bilder på skärmen/markörsymboler knappar tycks ge en invit att trycka på dem inte dra i eller ändra Markören ändrar form Reply Forward Print Delete 35 36
Akta sig för falska inviter Regler och guidelines Perceptuell) informa0on JA NEJ Falsk&invit Korrekt&förkastad& invit Upptäckbar&invit Gömd&invit Fitts lag (tiden det tar att peka ut något) Hicks lag (tiden det tar att välja ut något) Pokayokeprincipen (att felsäkra) Paretoprincipen (80/20regeln) Generella regler för bra användbarhet Samlingar av guidelines NEJ Handling JA 37 38 Fitt s lag Hicks lag Tiden det tar att med mus/indirekt pekdon peka ut ett föremål beror av avståndet mellan startposition och mål samt målets storlek: ju längre avstånd desto längre tid ju mindre mål desto längre tid Därför: Placera handlingar som hör ihop bredvid varandra Ha inte för små knappar/interaktionsobjekt Kanterna är mäktiga pga oändlig yta Kaskadmenyer är svåra För varje valmöjlighet ökar tiden det tar att välja Därför: Ta bort det onödiga Folk delar upp sina val i kategorier om det går, det minskar tiden att välja Om något sticker ut väljer man det. Men: browsingbehaviour: man väljer första alternativet som verkar bra nog, letar inte efter det optimala. 39 40
PokaYokeprincipen http://pbmo.wordpress.com/2012/09/08/pokayoke/ 80/20regeln (The Pareto Principle) Att felsäkra, antingen genom att förebygga fel eller göra det lätt att upptäcka fel En hög andel användare kommer använda en liten del av funktionaliteten Använd användarstudier för att ta reda på vilka funktioner det är som kommer användas mest Placera dem nära till hands 41 42 The Rules of Usability The Art of Unix Usability Raymond & Landley http://www.catb.org/~esr/writings/taouu/taouu.html Rule of Bliss: Allow your users the luxury of ignorance. Rule of Distractions: Allow your users the luxury of inattention. Rule of Flow: Allow your users the luxury of attention. Rule of Documentation: Documentation is an admission of failure. Rule of Least Surprise: In interface design, always do the least surprising thing. Rule of Transparency: Every bit of program state that the user has to reason about should be manifest in the interface. Rule of Modelessness: The interface's response to user actions should be consistent and never depend on hidden state. 34 Rule of Seven: Users can hold at most 7±2 things at once in working storage. 43 Rule of Reversibility: Every operation without an undo is a horror story waiting to happen. Rule of Confirmation: Every confirmation prompt should be a surprise. Rule of Failure: All failures should be lessons in how not to fail. Rule of Silence: When a program has nothing surprising to say, it should say nothing. Rule of Automation: Never ask the user for any information that you can autodetect, copy, or deduce. Rule of Defaults: Choose safe defaults, apply them unobtrusively, and let them be overridden if necessary. Rule of Respect: Never mistake keeping things simple for dumbing them down, or viceversa. Rule of Predictability: Predictability is more important than prettiness. Rule of Reality: The interface isn't finished till the enduser testing is done. 44
Några gränssnittsstandarder att använda Bortom gränssnittsstandarder # OS X Human Interface Guidelines ios Human Interface Guidelines Android User Interface Guidelines Windows User Experience Interaction Guidelines Windows Phone Design Library Eclipse User Interface Guidelines GNOME Human Interface Guidelines KDE4 Human Interface Guidelines Motto: Do cool stuff Samla på er slående och eleganta förebilder, analysera vad det är som gör att det tilltalar er. Låna de bakomliggande principerna och skapa nya synteser och ännu elegantare variationer. Kolla vad som händer på forskningskonferenserna: CHI NordiCHI DIS SIGGraph SIGGraph Asia 45 46