Vad utmärker ett bra gränssnitt?

Transkript

1 Vad utmärker ett bra gränssnitt? Kommunikation med användarna Feedback och Pliancy Excise kontra Flow

2 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.

3 What is this?

4 What kind of software is this?

5 What is this?

6 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 fungerar.

7 Zookeeper: ett bra GUI!

8 Zookeeper: Zookeeper är väldigt lik Bejeweled men den har den några extra designfeatures

9 Väl genomtänkt grafik Djuren har distinkta former och färger Bakgrunden är rutig för att visa gridet Själva spelytan är ljusare än det runtomkring, vilket gör att den lyfts fram rent visuellt.

10 Feedback!

11 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?

12 Jämfört med Bejeweled Hemläxa: Jämför med Candy Crush Saga och liknande

13 Ledtrådar: Vad kan man göra? Namngivning av knappar, menyval etc Ikoner Hur man grupperar och placerar Pliancy: 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

14 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

15 Att göra saker: manipulation Alan 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 desktop GUIn)

16 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

17 Att indikera manipulerbarhet Cursor hinting - Att markören ändrar utseende när den passerar olika typer av objekt

18 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. - -plinget är ett typiskt exempel - Undvik negativ ljudfeedback

19 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

20 Feedback: Modeless visuell feedback

21 Feedback: Modeless visuell feedback

22 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?

23 Flow

24 Flow Flow är när allt flyter på utan störningar, pauser eller irritation. Flow tillståndet är EXTREMT PRODUKTIVT

25 Att designa för flow Följ användarens mentala model (extremt viktigt)

26 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)

27 Att designa for flow Direkt manipulation stärker också flow eftersom det känns mer naturligt än

28 än exakta inställningar Det kan vara bra med exakta inställningar ibland, men man löper en viss risk att bryta flow

29 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?

30 Undvik onödiga val

31 ange defaults istället

32 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

33 Flow Skilj på att utföra en funktion och att konfigurera den att skriva ut vs. installera och konfigurera skrivare

34 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!

35 The enemy: Excise Image from creativeuncut.com

36 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

37 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

38 staplesville.ca

39 Excise: Onödigt arbete, ping pong

40 Nödvändig excise: Navigation Navigation mellan - Sidor - Program - Vyer kan förenklas genom Översikter Signposts/breadcrumbs undvika djupa hierarkier

41 Nödvändig excise: växla modes (lägen) Ibland vill man göra det som ligger lite utanför det normala användningsfallet.

42 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

43 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

44 Sammanfattning Gör så här: Undvik detta:

45 Do this Don t do this