32 1 What Makes a GUI Good? Sus Lundgren. 32 2 Just To Clarify GUI = Graphic User Interface So what...
-
date post
21-Dec-2015 -
Category
Documents
-
view
214 -
download
0
Transcript of 32 1 What Makes a GUI Good? Sus Lundgren. 32 2 Just To Clarify GUI = Graphic User Interface So what...
1 32
What Makes a GUI Good?
Sus Lundgren
2 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
3 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”
4 32
Pick Any Two
5 32
Pick Any Two
6 32
Pick Any Two
7 32
Pick Any Two
8 32
”It takes like seven years
to master but then… hey,
you can get that baby
ROLLING!”
http://www.asktog.com
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
Pick Any Two
17 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
18 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…
19 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
20 32
Learning by not Doing
21 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.
22 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.
23 32
Learning by not Doing
24 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
25 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
26 32
Enter: The Zookeper
http://jp.shockwave.com/games/puzzle/actionpuzzle/zookeeper/play.html
27 32
Good GUI Elementsin 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
28 32
Good GUI Elementsin 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
29 32
Good GUI Elementsin 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
30 32
Good GUI Elementsin Zookeeper
Dissatisfied animal: Double feedback
System state
Immediate action feedback
Alternative actions quite subtle
31 32
Good GUI Elementsin Zookeeper
• How many versions of each animal is there?
32 32
Good GUI Elementsin Zookeeper
• The pause version, the intro version and these:
33 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
34 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” ;)