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” ;)