32 1 What Makes a GUI Good? Sus Lundgren

32 2 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

32 3 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”

32 4 Pick Any Two

32 5 Pick Any Two

32 6 Pick Any Two

32 7 Pick Any Two

32 8 ”It takes like seven years to master but then… hey, you can get that baby ROLLING!”

32 9 Pick Any Two

32 10 Pick Any Two

32 11 Pick Any Two

32 12 Pick Any Two

32 13 Pick Any Two

32 14 Pick Any Two

32 15 Pick Any Two

32 16 Pick Any Two

32 17 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

32 18 I Just can’t Stop… Photoshop Do you think Photoshop is a good GUI? –Why? Why not? Photoshop takes metafores to a new level…

32 19 What’s My Point? And again: –You can never be right –You can (hardly) never be totally wrong

32 20 Learning by not Doing

32 21 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.

32 22 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.

32 23 Learning by not Doing

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

32 25 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

32 26 Enter: The Zookeper

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

32 28 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

32 29 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

32 30 Good GUI Elements in Zookeeper Dissatisfied animal: Double feedback System state Immediate action feedback Alternative actions quite subtle

32 31 Good GUI Elements in Zookeeper How many versions of each animal is there?

32 Good GUI Elements in Zookeeper The pause version, the intro version and these:

32 33 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

32 34 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… – games/puzzle/actionpuzzle/ zookeeper/play.html –Or just Google for ”Zookeeper” ;)