1. 32 1 What Makes a GUI Good? Sus Lundgren

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

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

4. 32 4 Pick Any Two

5. 32 5 Pick Any Two

6. 32 6 Pick Any Two

7. 32 7 Pick Any Two

8. 32 8 ”It takes like seven years to master but then… hey, you can get that baby ROLLING!” http://www.asktog.com

9. 32 9 Pick Any Two

10. 32 10 Pick Any Two

11. 32 11 Pick Any Two

12. 32 12 Pick Any Two

13. 32 13 Pick Any Two

14. 32 14 Pick Any Two

15. 32 15 Pick Any Two

16. 32 16 Pick Any Two

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

18. 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…

19. 32 19 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 20 Learning by not Doing

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

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

23. 32 23 Learning by not Doing

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

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

26. 32 26 Enter: The Zookeper http://jp.shockwave.com/games/puzzle/actionpuzzle/zookeeper/play.html

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

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

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

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

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

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

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

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