Vad utmärker ett bra gränssnitt? Kommunikation med användarna Feedback och Pliancy Excise kontra Flow Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] GUI = Graphical 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… … och hur man designar GUIn för dator-mus-tangentbord. Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] What is this? Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] What kind of software is this? Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] What is this? Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] 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. Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Zookeeper: ett bra GUI! Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Zookeeper: Zookeeper är väldigt lik Bejeweled men den har den några extra designfeatures… http://www.2flashgames.com/f/f-231.htm Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Väl genomtänkt grafik Djuren har distinkta former 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. Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Feedback! Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] 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? Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Jämfört med Bejeweled Jämför själv med Candy Crush Saga and others… Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Att ge ledtrådar Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Ledtrådar: Vad kan man göra? Namngivning av knappar, menyval etc Ikoner Hur man grupperar och placerar … Pliancy/affordance: Att indikera att någonting på skärmen är ”klickbart” eller manipulerbart på annat sätt. Feedback: Reaktioner på vad användaren gör eller har gjort, att visa status etc Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Att göra saker: manipulation Donald Norman använder term: affordance – “the perceived and actual properties of the thing, […] that determine just how the thing could possibly be used.” – Men, han talade om fysiska objekt Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Att göra saker: manipulation AlanCooper 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) Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Att indikera manipulerbarhet 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 Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Att indikera manipulerbarhet Cursor hinting - Att markören ändrar utseende när den passerar olika typer av objekt Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Olika typer av feedback Feedback kan vara visuell - Objekt ändrar utseende för att visa att de är valda eller för tillfället aktiva Feedback kan också ges via ljud - 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 - Undvik negativ ljudfeedback Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Olika typer av feedback Feedback kan också vara modal - Initierar ett nytt “mode”/läge, t.ex. att öppna ett nytt fönster eller en dialog … eller modeless - Avbryter inte användaren utan indikerar bara - Är att föredra framför modal feedback, om möjligt Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Feedback: Modeless visuell feedback Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] So far so good… Så nu har vi talat om: – …hur man indikerar vad man kan göra i ett GUI (pliancy, namngivning, ikoner, layout…) – …hur systemet reagerar på det som använderen gör (feedback) What’s left? Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Flow Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Flow Flow är när allt flyter på utan störningar, pauser eller irritation. Flow tillståndet är EXTREMT PRODUKTIVT Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Att designa för flow… Följ användarens mentala model Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Att designa for 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 ska stå i fokus, med navigation etc runt om Saker i “rätt ordning” (ex OK-knappen sist) Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Att designa for flow… Direkt manipulation stärker också flow… …eftersom det känns mer naturligt än… Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] … än exakta inställningar Det kan vara bra med exakta inställningar ibland, men man löper en viss risk att bryta flow Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Använd 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? Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Undvik onödiga val… Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] …ange defaults istället Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Flow… 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! Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Flow… Undvik onödiga dialogrutor: “Allt är är bra. OK? Skilj på att utföra en funktion och att konfigurera den – att skriva ut vs. installera och konfigurera skrivare Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] The enemy: Excise Image from creativeuncut.com Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Excise är… 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 garage-dö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… Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Visuell excise Excise kan också vara visuell, om det tar lång tid att förstå hur man kan använda ett GUI utan att det verkligen behövs (hög kognitiv last, om skärmen upplevs som väldigt rörig, med många animationer, färger etc..) – Gissa vad denna website var för… Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] staplesville.ca Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Excise: Onödigt arbete, ping pong Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Nödvändig excise: Navigation Navigation mellan… - Sidor Program Vyer Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic … kan förenklas genom – Översikter – Signposts/breadcrumbs – undvika djupa hierarkier [email protected] Nödvändig excise: växla modes (lägen) Ibland vill man göra det som ligger lite utanför det normala användningsfallet. Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Excise – att kräva inmatning när den inte behövs 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 Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Sammanfattning 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 Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Sammanfattning Gör så här: Undvik detta: Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected] Do this Don’t do this Design och Konstruktion av Grafiska Gränssnitt, vår 2015, Armin Nezirevic [email protected]