Vad utmärker ett bra användargränssnitt?

HTML
DOWNLOAD

Storlek: px

Starta visningen från sidan:

Download "Vad utmärker ett bra användargränssnitt?"

Rebecka Åström
för 10 år sedan
Visningar:

1 Vad utmärker ett bra användargränssnitt? Att kommunicera med användarna Feedback och Pliancy Excise kontra Flow

2 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

den här kursen koncentrerar vi oss dock på allmänna principer

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

detta signifiers som visar oss vad vi kan göra (funktionalitet) och hur vi ska göra

7 Zookeeper: ett bra GUI!

8 Zookeeper (Zookeeper är väldigt likt Bejeweled, men har några extra designfeatures)

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

10 2) Feedback

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

12 ( att jämföra med Bejeweled)

13 Att ge ledtrådar

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

gör eller har gjort, att visa status etc Pliancy: Att indikera att

15 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. -plinget är ett typiskt exempel.

någonting händer nu, och kan användas för att dra uppmärksamheten till något som för

16 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

dialog Modeless feedback Avbryter inte användaren utan

17 Modeless visual feedback

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

som kan manipuleras har pliancy MEN den måste fortfarande indikeras så kallad hinting så att användarna

19 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

Ex att knappar är ritade i 3D Dynamic visual hinting Att ett objekt ändrar

20 Att hinta manipulerbarhet (pliancy) Cursor hinting Att markören ändrar utseende när den passerar olika typer av objekt

21 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

22 FLOW

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

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

25 Hands on Direkt manipulation stärker också flow eftersom det känns mer naturligt än

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

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

28 Undvik onödiga val och onödigt pill

29 Försök ange defaults istället

30 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

31 Fienden: EXCISE Image from creativeuncut.com

32 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

33 Nödvändig excise: Navigation Men att navigera mellan Sidor Program Vyer Etc kan förenklas genom Översikter Signposts / breadcrumbs att undvika djupa hierarkier

34 Nödvändig excise: olika modes/lägen Ibland vill man FAKTISKT göra den där mindre vanliga saken

35 Excise: Att inte kunna ändra direkt Här måste man stega tillbaka till rätt sida för att ändra

36 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

37 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. illustrerar detta alldeles utmärkt

38 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

39 Gör så här Men inte så

Relevanta dokument

Vad utmärker ett bra gränssnitt?

Vad utmärker ett bra gränssnitt? Kommunikation med användarna Feedback och Pliancy Excise kontra Flow GUI = Graphical User Interface GUIn, eller grafiska gränssnitt hittar vi på alla sorters skärmar I