Användargränssnitt. Mentala modeller i design (Norman, 1988) Det ska fungera som (Marcus, 1995)

Transkript

1 Dagens föresläsning Användargränssnitt INTERAKTIVA SYSTEM Mattias Arvola Institutionen för datavetenskap Kriterier för bra gränssnittsdesign Command Line Interfaces CLI Menu Driven Interfaces MDI Graphical User Interfaces GUI Mobila användargränssnitt Distributed User Interfaces DUI Augmented Reality AR Tangible User Interfaces TUI 2 Men först saker jag inte hann med från fö1 Mentala modeller i design (Norman, 1988) Kort repetition av affordances mentala modeller metaforer användbarhet Uppmärksamhet och 7±2 Produktkvalitet Hållbarhet 3 4 Det ska fungera som (Marcus, 1995) Direktmanipulation Ett skrivbord: Drawers, files, folders, papers, paper clips, stick-on note sheets Ett dokument: Böcker, kapitel, bokmärken, bilder, tidningar, stycken, tidskrifter, artiklar, nyhetsbrev, formulär Ett foto: Albums, photos, photo brackets/holders TV: Program, kanaler, TVbolag, reklam, TV-guide En kortlek: Kort, högar En behållare: Hyllor, lådor, fack Ett träd: Rötter, stam, grenar, löv En stad: Folk, områden, landmärken, vägar, byggnader, rum, fönster, skrivbord Kontinuerligt representerade objekt och fysiska handlingar som ger direkt effekt. 5 6

2 7 Effektivt Ändamålsenligt FYSISKT SYSTEM GULF OF EXECUTION GULF OF EVALUATION MÅL Tillfredsställande Specifika användare, med en produkt och ett specifikt mål i givet sammanhang. Gulf: avgrund, stup, skrämmande gap, bråddjup Execution: genomförande Evaluation: bedömning 8 Användbarhetsmått Produktkvalitet Avgöra om man når sina designmål Uppföljning mellan versioner Bedöma konkurrenskraft ÅTRÅVÄRD Vad vill folk ha? KAPABEL Vad kan vi bygga? BÄRKRAFTIG Bär sig verksamheten? 9 10 Hållbarhet Hur bidrar designen till långsiktig hållbar utveckling? Ekologisk: påverkan på natur och hälsa Social: påverkan på samhället och grundläggande mänskliga behov Ekonomisk: hushållning med mänskliga och materiella resurser Uppmärksamhet och den magiska siffran 7±2 Om omgivningen stjäl fokus tappar man det som fanns i arbetsminnet 11 12

3 Därför: Fitts lag Tiden det tar att flytta till ett föremål är beroende av avståndet och föremålets storlek Hjälp folk att komma ihåg vad de gör och deras arbetsobjekts status Modes är både kraftfulla och riskabla Att komma ihåg instruktioner med många steg är svårt. Se till att användaren kan se dem samtidigt som de utför stegen Hicks lag För varje valmöjlighet ökar tiden det tar att välja. Ta bort det onödiga. Folk delar upp sina val i kategorier om det går vilket minskar tiden att välja. Om något sticker ut väljer de det: Primärt innehåll först snarare än navigation först Poka-Yoke-principen Att felsäkra, antingen genom att förebygga fel eller göra det lätt att upptäcka fel 80/20-regeln (The Pareto Principle) 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 17 18

4 The Rules of Usability The Art of Unix Usability Raymond & Landley 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. Rule of Seven: Users can hold at most 7±2 things at once in working storage. 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 vice-versa. Rule of Predictability: Predictability is more important than prettiness. Rule of Reality: The interface isn't finished till the end-user testing is done Men estetiken då? Attraktiv Elegant Vilsamt Dynamiskt Spännande Engagerande Kommunicera rätt känsla (vilken är det då?) The Software Design Manifesto Mitch Kapor 1990 The Roman architecture critic Vitruvius advanced the notion that welldesigned buildings were those which exhibited firmness, commodity, and delight. The same might be said of good software. Firmness: A program should not have any bugs that inhibit its function. Commodity: A program should be suitable for the purposes for which it was intended. Delight: The experience of using the program should be pleasurable one. Here we have the beginnings of a theory of design for software Men sociala media då? Batch Computing Dela med sig Diskutera Visa upp sig Visa uppskattning Gemenskap 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 Låter det bekant? 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! 23 24

5 25 Kommandogränssnitt Fördelar och nackdelar med kommandogränssnitt cp meriter.txt ~/personligt Kopiera filen meriter.txt till katalogen personligt i hemkatalogen + 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 + 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 26 Menygränssnitt Fördelar och nackdelar med menygränssnitt 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. Menyer kan vara endimensionella eller tvådimensionella Exempel: Mobiler, bankomater, informationskiosker, TV-grä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 - 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 Grafiska gränssnitt Fördelar med grafiska gränssnitt 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 Multi-finger Pie Menu Frank Chun Yat Li University of Toronto Direktmanipulation Spatiala representationer Visar handlingar med markören + Man behöver inte lära sig någon syntax eller kommandon + Multitasking: Gör det lätt att flytta data mellan olika program + Uppenbara kontrolldon + Snabb och synlig respons + Enkelt att ångra + Synligt handlingsutrymme + Lätt att skapa alternativ och jämföra + Experter jobbar snabbt + Mellanbra användare behåller sin kunskap + 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 + Tydligt vad som sker + Noviser lär sig snabbt 29 30

6 Nackdelar med grafiska gränssnitt Mobila gränssnitt - 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 Små skärmar betyder mindre screen real estate: hårdare prioritering Den mobila brukssituationen ser annorlunda ut än den stationära Vad behöver man vet och göra i just denna användningssituation, vid denna tidpunkt? Används den vid besök, på resande fot, eller i en lokal? Vad händer när man vrider skärmen? Tänk location-based Minimal användarhjälp Inmatning för mobila gränssnitt Pekskärm med en eller flera punkters interaktion Mjukt tangentbord Fysiskt tangentbord Mikrofon Fysiska knappar Sensorer Fysiska gränssnitt TUI och förstärkt verklighet Vi är fysiska varelser och interagerar med världen genom vår kropp. Vi består inte bara av ett par ögon och ett pekfinger. Varför inte dra nytta av det i människa-datorinteraktion? Reactable: Förstärkt verklighet Head mounted Mobil Projektorbaserad Minnesmark och Astrids spår Place-based navigation 35 36

7 Device-movement based zooming Two-dimensional device-direction based panning 1. The user sees the hole when directing the camera to the marker. 2. He zooms in by moving closer. 3. When moving close enough the user can view the inside of the tree and see the birds nest and the eggs. 4. As the user move backwards he can againsee the outside view of the hole and zoom out 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 Som Google säger: Do cool stuff that matter! 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