Användargränssnitt. Dagens föresläsning

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 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. 3 4 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

2 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! 7 8 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 9 10 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 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 - 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 11 12

3 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! 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 + Tydligt vad som sker + Noviser lär sig snabbt + 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 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 Distribuerade gränssnitt! Pekskärm med en eller flera punkters interaktion! Mjukt tangentbord! Fysiskt tangentbord! Mikrofon! Fysiska knappar! Sensorer! Gränssnitt distribuerade över flera användare på flera plattformar i flera miljöer.! Ett DUI gör det möjligt för användare att flytta ett gränssnittselement (både stora och små) mellan olika plattformar och olika miljöer.! Många skärmar! Många maskiner: från mobilen till teven till datorn, till en annan dator! Från min dator till Johans dator, till Johans mobil, till alla Johans vänner 17 18

4 19 Förstärkt verklighet! Head mounted: Mobil: Projektorbaserad: 20 Innehåll I detta skede togs allt innehåll till Astrid spår fram i samarbete mellan projektets innehållsproducent och deltagare från Astrid Lindgrens Näs. Det inkluderade berättarröster, talade instruktioner, filmer, 3D-modeller av hus (invändigt och utvändigt), 3Dmodell av kikhål in i det ihåliga Uggleträdet med dess fågelbo med ägg, panorama, illustrationer, samt tryckmaterial. Användargränssnitt När användaren kommer i en fördefinierad region spelas berättelser och filmer upp. Om kameran riktas mot markörer på den tryckta kartan eller markörer uppsatta i omgivningen utlöses andra händelser och skatter kan hittas eller så kan 3D-objekt överlagras på markören i kamerabilden. Figur 65 visar hur det ser ut på kartan. När Minnesmark och Astrids spår Place-based att vaja. navigation användaren hittar skatter bytts bilderna på kartan ut, och de börjar studsa istället för att se vad som döljer sig inne i trädet, vilket illustreras i Figur 66. Genom att gå närmare zoomar användaren in, detta är en interaktionsteknik som skulle kunna kallas Device-movement rörelsebaserad zoomning (eng. device-movement-based based zooming ). 1. The user sees the hole when directing the camera to the marker. 2. He zooms in by moving closer. Figur 65. Den datorförstärkta kartan. Genom GPS-koordinater och markörer kan information och innehåll kopplas till en specifik plats, därigenom förflyttar sig användare i en informationsrymd genom att röra sig i den fysiska rymden. Detta är en interaktionsteknik som kan kallas platsbaserad navigation (eng. location-based navigation ). När användaren närmar sig Uggleträdet så finns där en markör och när användaren riktar markören mot den visas ett hål in i trädet. Det gör det möjligt för användaren 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. Figur 66. Hålet i Uggleträdet (i denna bild är hålet i väggen på kontoret istället). När användaren kommer till Kristins hus (som sedan länge är rivet) så kan han eller hon gå in i huset och där inne se sig omkring hur det kan ha sett ut. För att se sig om i det virtuella huset (modellerat i 3D) så håller användaren sin telefon eller platta framför sig och snurrar på stället. Som visas i Figur 67 kan användaren vrida sig runt horisontellt, men också rikta telefonen eller plattan upp mot taket eller ned mot golvet och därmed panorera på den vertikala axeln Two-dimensional device-direction based panning Fysiska gränssnitt TUI! 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: Figur 67. Användaren ser sig om i det virtuella huset genom att vända sig och plattan eller telefonen i den riktning han eller hon vill titta Det här en interaktionsteknik som kallas tvådimensionell riktningsbaserad panorering (eng. two-dimensional device-direction-based panning ). Precis som rörelsebaserad zoomning faller inom ramen för dynamisk kikhålsnavigation (eng. dynamic peephole navigation ) (Hürst & Bilyalov, 2010). I panoramat från Astrid Lindgrens tak kan användaren bara panorera horisontellt (Figur 68).

5 Några gränssnittsstandarder att använda!! Apple Human Interface Guidelines! ios Human Interface Guidelines! Android User Interface Guidelines! Windows User Experience Interaction Guidelines! UI Design and Interaction Guide for Windows Phone 7! Eclipse User Interface Guidelines Bortom gränssnittsstandarder! Motto: Play games, 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! HCI! Interact! SIGGraph! SIGGraph Asia