Transcript Föreläsning 1

Vad utmärker ett bra
användargränssnitt?
Att kommunicera med användarna
Feedback och Pliancy
Excise kontra Flow
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
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
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[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 vt 2014, Sus Lundgren
[email protected]
Zookeeper: ett bra GUI!
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
Zookeeper
http://www.2flashgames.com/f/f-231.htm
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
(Zookeeper är
väldigt likt
Bejeweled, men har
några extra
designfeatures)
[email protected]
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.
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
2) Feedback
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
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?
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
(…att jämföra med Bejeweled)
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
Att ge ledtrådar
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
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.
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
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.
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
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
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
Modeless visual feedback
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
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)
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
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
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
Att ”hinta” manipulerbarhet (pliancy)
Cursor hinting
– Att markören ändrar utseende
när den passerar olika typer av
objekt
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
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…
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
FLOW
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
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!
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
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)
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
”Hands on”
Direkt manipulation stärker också flow…
……eftersom det känns mer naturligt än…
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
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 vt 2014, Sus Lundgren
[email protected]
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 vt 2014, Sus Lundgren
[email protected]
Undvik onödiga val och onödigt ”pill”
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
Försök ange defaults istället
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
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
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
Fienden:
EXCISE
Image from creativeuncut.com
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
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…
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
Nödvändig excise: Navigation
Men att navigera
mellan…
–Sidor
–Program
–Vyer
–Etc…
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
…kan förenklas genom
– Översikter
– Signposts / breadcrumbs
– att undvika djupa
hierarkier
[email protected]
Nödvändig excise: olika modes/lägen
Ibland vill man
FAKTISKT göra
den där mindre
vanliga saken…
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
Excise: Att inte kunna ändra direkt
Här måste man
stega tillbaka till rätt
sida för att ändra
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
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
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
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…
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
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
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]
Gör så här
Men inte så
Design och Konstruktion av Grafiska Gränssnitt vt 2014, Sus Lundgren
[email protected]