What Makes a GUI Good?
Sus Lundgren
1 32
Just To Clarify
• GUI = Graphic User Interface
• So what makes a GUI good?
– That you can intuitively understand how it
works
– Good clues about functionality: what can
you do and how
– Gives good feedback on actions
– Shows system state
– Hard or impossible to do something wrong;
in case of mistakes they should be
reversible
• ”Undo” best feature of the century :)
– Consistency in behavior and look
– No cognitive overload
2 32
Three Is a Crowd
• Programmers often say ”You can have it
fast, cheap or working. Pick any two”
about an upcoming project.
• In GUI-developer terms this can be
translated to ”You can have many
functions, usability or good looks, pick any
two”
3 32
Pick Any Two
4 32
Pick Any Two
5 32
Pick Any Two
6 32
Pick Any Two
7 32
”It takes like seven years
to master but then… hey,
you can get that baby
ROLLING!”
http://www.asktog.com
8 32
Pick Any Two
9 32
Pick Any Two
10 32
Pick Any Two
11 32
Pick Any Two
12 32
Pick Any Two
13 32
Pick Any Two
14 32
Pick Any Two
15 32
Pick Any Two
16 32
What’s My Point?
• Is Microsoft Word the perfect GUI? No.
• Design is always about compromise
– Engineering matters
– Marketing matters
– Aesthetics matter
• There is no perfect GUI! (But we can
always strive…)
• Hence:
– You can never be right
– You can (hardly) never be totally wrong
17 32
I Just can’t Stop…
Photoshop
• Do you think Photoshop is a good GUI?
– Why? Why not?
• Photoshop takes metafores to a new
level…
18 32
What’s My Point?
And again:
– You can never be right
– You can (hardly) never be totally wrong
http://www.fullstop.se/nemi/index2.html
19 32
Learning by not Doing
20 32
Functionality
• The tabs are pure navigation
• Positioning Mode is telling whether the
mouse or the pen is used
• Orientation is telling whether the drawing
board is placed landscape or portrait
• Tablet Area and Display Area together is
setting how much of the tablet area is
mapped to how much of the screen area.
• The Aspect is setting the aspect ratio if the
tablet and the screen have different
proportions.
21 32
Functionality
• The Reset Tab To Default button resets all
settings in this tab to the predefined default
settings.
• The Revert Tab button resets the settings
in this tab to what they were when the tab
was opened.
• There is no explicit saving of settings; they
are saved when you leave the tab.
22 32
Learning by not Doing
23 32
Bloopers
• Layout & consistency
– Not exact alignments
– Weird extra space at the bottom
– Inconsistency in using capitals at beginning
of words (e.g. Mouse mode vs Pen Mode)
– Why the reuse of the ”maps to...”image?
– Why ”Positions” next to each other and
”Aspect below each other”
– Misspellings
24 32
Bloopers
• Two rows of tab navigation
• Maps to: very unclear connection
• Radio buttons better
– Dropdown with two choices
– Aspect: should be radio buttons
• Buttons
– No OK-button or save-button
– Weird placement of ”Advanced Mapping”
– ”Maps to…” connection unclear
25 32
Enter: The Zookeper
http://jp.shockwave.com/games/puzzle/actionpuzzle/zookeeper/play.html
26 32
Good GUI Elements
in Zookeeper
• NOTE: Zookeeper has very few functions.
It’s easier not to screw up if the functions
are few.
• Clear background story
– Real world metaphors: Easy to create a
sort of conceptual model
– Word of the day: Anthropomorphization =
to attribute human characteristics to
something non-human, in this case the
programmed functionalities of the animals
and the pixels that depict the animals
27 32
Good GUI Elements
in Zookeeper
• Few choices: little confusion
– In game mode there are only four things
you can do, and three of those require
clicking outside the game area; easy to play
• Hard to make anything wrong, and any
action is reversible except Quit
– If you actually click on two animals thet
can’t be interchanged they will just
circulate back
28 32
Good GUI Elements
in Zookeeper
• Consistently indicating state; continuous
feedback
–
–
–
–
–
–
Animals chosen get a frame & move
Time bar
Points showing
Animals getting angry
Status bar with no. of animals of each kind
Level Up-message telling no. of animals to
be taken care of
– Distinct difference between the animals;
both color and shape
29 32
Good GUI Elements
in Zookeeper
Dissatisfied animal:
Double feedback
System state
Immediate action
feedback
Alternative actions
quite subtle
30 32
Good GUI Elements
in Zookeeper
• How many versions of each animal is
there?
31 32
Good GUI Elements
in Zookeeper
• The pause version, the intro version and these:
32 32
Is There Anything
wrong With Zookeeper?
• To gain point you want to play as long as
possible on each level  you want to
ignore the angry animals which is
conflicting with the concept of the game
33 32
Zookeeper: Homework
• How many sounds are there in Zookeeper’s
game mode?
– Do you think the sound feedback matters?
Why? Why not?
– Which one sound do you think is the most
important one?
• Off you go…
– http://jp.shockwave.com/
games/puzzle/actionpuzzle/
zookeeper/play.html
– Or just Google for
”Zookeeper” ;)
34 32