Vad utmärker ett bra användargränssnitt? Att kommunicera med användarna Feedback och Pliancy Excise kontra Flow
GUI = Graphic User Interface GUI = Graphic User Interface GUIn, eller grafiska gränssnitt hittar vi på alla sorters skärmar I den här kursen koncentrerar vi oss dock på allmänna principer rörande GUI-design samt hur man designar GUIn för dator-mustangentbord
Ledtrådar! Så snart vi står inför något okänt letar vi efter ledtrådar Donald Norman kallar detta signifiers som visar oss vad vi kan göra (funktionalitet) och hur vi ska göra det (interaktion) En stor del av GUI-design handlar därför om att skapa dessa ledtrådar, dvs kommunicera till användaren vad GUIt är till för, och hur det funkar.
Zookeeper: ett bra GUI!
Zookeeper http://www.2flashgames.com/f/f-231.htm (Zookeeper är väldigt likt Bejeweled, men har några extra designfeatures)
1) Väl genomtänkt grafik Djuren har distinkta fomer och färger Bakgrunden är ruting för att visa gridet (som vi säger på svenska!) Själva spelytan är ljusare än det runtomkring, vilket gör att den lyfts fram rent visuellt.
2) Feedback
3) Det lilla extra Zookeeper använder anthropomorphism (att man tillskriver något mänskliga egenskaper) Djurens ansiktsuttryck ger ledtrådar Hur många olika uttryck finns det?
( att jämföra med Bejeweled)
Att ge ledtrådar
Att ge ledtrådar Namngivning av knappar, menyval etc Ikoner Hur man grupperar och placerar Feedback: Reaktioner på vad användaren gör eller har gjort, att visa status etc Pliancy: Att indikera att någonting på skärmen är klickbart eller manipulerbart på annat sätt.
Olika typer av feedback Visuell feedback Objekt ändrar utseende för att visa att de är valda eller för tillfället aktiva Ljudfeedback Ljud brukar typiskt indikera att någonting händer nu, och kan användas för att dra uppmärksamheten till något som för tillfället inte syns, som ett program i bakgrunden. Email-plinget är ett typiskt exempel.
Olika typer av feedback Modal feedback Initierar ett nytt mode /läge, ex att öppna ett nytt fönster eller en dialog Modeless feedback Avbryter inte användaren utan indikerar bara Är att föredra framför modal feedback, om möjligt
Modeless visual feedback
Att göra saker: manipulation Mycket av interaktionen med ett GUI handlar om att manipulera objekt på skärmen, dra och släppa, klicka, rotera osv Cooper använder termen pliancy, manipulerbarhet Alla objekt som kan manipuleras har pliancy MEN den måste fortfarande indikeras så kallad hinting så att användarna förstår att de kan interagera med objektet (Detta är ett större problem med touch-interface än med vanliga GUIn)
Att hinta manipulerbarhet (pliancy) Static object hinting Att ett objekt kommunicerar alltid sin manipulerbarhet. Ex att knappar är ritade i 3D Dynamic visual hinting Att ett objekt ändrar utseende när markören passerar över det Pliant response hinting Att ett objekt ändrar utseende när man interagerar med det
Att hinta manipulerbarhet (pliancy) Cursor hinting Att markören ändrar utseende när den passerar olika typer av objekt
So far so good Okej, nu har vi berört hur man kan kommunicera vad som kan göras i ett GUI (pliancy, namngiving, ikoner, layout ) hur man kan kommunicera att systemet reagerar på det man gör (feedback,dynamic hinting, pliant response hinting, curosr hinting) Är det nåt kvar? Nåväl
FLOW
Flow är när man har flyt, allt flyter på mot ett mål utan störningar, pauser eller irritation Flow-tillståndet är extremt produktivt!
Att designa för flow Alla viktiga vertyg/funktioner ska vara inom räckhåll Layout: Komponenterna ska paceras på ett sätt som naturligt stödjer arbetet Det man arbetar med i fokus, med navigation etc runt om Saker i rätt ordning (ex OK-knappen sist)
Hands on Direkt manipulation stärker också flow eftersom det känns mer naturligt än
Exakta inställningar Det kan vara bra med exakta inställningar ibland, men man löper en viss risk att bryta flow
Så få steg som möjligt Hur många interaktionssteg måste man göra när man ska Spara som (om man har otur)? Spara som Tala om var Ange namn Ange filtyp Kan man undvika några av dessa steg?
Undvik onödiga val och onödigt pill
Försök ange defaults istället
Mer Det är stor skillnad på vad användare kan göra, och vad de oftast gör. En programmerare måste hantera både vanliga och ovanliga val Men GUI-designern ska designa för det vanligaste valet! Undvik onödiga dialogrutor, typ Allt är är bra. OK? Skilj på att utföra en funktion och att konfigurera den att skriva ut vs. installera och konfigurera skrivare
Fienden: EXCISE Image from creativeuncut.com
Excise Excise är anti-flow. Alla de där extra interaktionerna som inte har nånting med målet att göra, men ändå måste utföras. Om målet är att ta bilen till jobbet så är det excise att öppna garagedörren, köra ut, stänga garagedörren, tanka på vägen, hitta parkeringsplats, betala för parkeringen Excise är förstås också alla onödiga saker man måste göra
Nödvändig excise: Navigation Men att navigera mellan Sidor Program Vyer Etc kan förenklas genom Översikter Signposts / breadcrumbs att undvika djupa hierarkier
Nödvändig excise: olika modes/lägen Ibland vill man FAKTISKT göra den där mindre vanliga saken
Excise: Att inte kunna ändra direkt Här måste man stega tillbaka till rätt sida för att ändra
Excise att mata systemet Att kräva att användarna ska mata in information som systemet redan har Att kräva att användarna ska ange allting, istället för att ge default-värden
Visuell excise Excise kan också vara visuell; om en bild eller skärm är väldigt rörig, med många animationer, färger etc. http://thebiguglywebsite.com illustrerar detta alldeles utmärkt
Sammanfattningsvis Ge användaren ledtrådar som visar vad man kan göra (funktionalitet) och hur (interaktion) Ge feedback Försök skapa flow Undvik excise Dvs
Gör så här Men inte så