1. CMPUT 301: Lecture 25 Graphic Design Lecturer: Martin Jagersand Department of Computing Science University of Alberta Notes based on previous courses by Ken Wong, Eleni Stroulia Martin Jagersand

2. 2 Graphic Design What: –the use of typography, symbols, color, and other static and dynamic graphics to convey facts, concepts, and emotions

3. 3 Graphic Design Why: –can be used in user interface design to convey information effectively about system functionality and state

4. 4 Graphic Design Visible language: –layout –formats, proportions, alignment –typography –typefaces, typesetting –color –colors, texture –imagery –signs, symbols, icons –sequencing –animation, order of operations

5. 5 Graphic Design Basic principles of design: –organize –provide a clear and consistent conceptual structure –economize –maximize the effectiveness of a minimal set of cues –communicate –match the presentation to the capabilities of the user

6. 6 Graphic Design Apply these principles to design menus, control panels, dialog boxes, icons, etc.

7. 7 Organize Internal consistency: –observe the same conventions and rules for all elements of the user interface

8. 8

9. 9

10. 10

11. 11

12. 12 Organize External consistency: –follow existing platform and cultural conventions across user interfaces

13. 13

14. 14 Organize World consistency: –make conventions consistent with real-world experience

15. 15

16. 16

17. 17

18. 18

19. 19

20. 20 Organize Lexical consistency: –coding consistent with common usage –e.g., left = less, right = more –consistent abbreviation rules –e.g., Jan, Feb, Mar, etc. (equal length) –devices used consistently –e.g., esc key to cancel –symbols used consistently –e.g., ellipsis (…) to bring up a dialog box from a menu item or button

21. 21 Organize Syntactic consistency: –status messages consistently placed –e.g., for Internet Explorer, at bottom of window –commands come first or last –e.g., verb then noun (command line) –e.g., noun then verb (direct manipulation) –menu items always at the same place –i.e., perceived stability; muscle memory

22. 22

23. 23 Organize Semantic consistency: –global commands always available –e.g., help, cancel, undo –e.g., cut/copy/paste

24. CMPUT 301: Lecture 25b Graphic Design Lecturer: Martin Jagersand Department of Computing Science University of Alberta Notes based on previous courses by Ken Wong, Eleni Stroulia Martin Jagersand

25. 25 Graphic Design Basic principles of design: –organize –provide a clear and consistent conceptual structure –economize –maximize the effectiveness of a minimal set of cues –communicate –match the presentation to the capabilities of the user

26. 26 Tools in graphic design Visible language: –layout –formats, proportions, alignment –typography –typefaces, typesetting –color –colors, texture –imagery –signs, symbols, icons –sequencing –animation, order of operations

27. 27 Organize Screen layout: –use grids and alignment –group related elements –use balance and symmetry –use task analysis for ordering –standardize placements –e.g., cancel button to left of OK button –address perceived stability

28. 28

29. 29 Organize Grouping methods: –proximity –alignment –separators –borders –background color –indentation

30. 30

31. 31

32. 32 Organize Navigability –provide an initial focus for attention –direct attention to important, secondary, or peripheral items –assist navigation among the elements

33. 33 Example: Navigability

34. 34 Economize Simplicity: –KISS principle –i.e., keep it simple, stupid –minimize the use of colors and styles –avoid the “circus” effect –minimize clutter –but do not hide essential information –e.g., reveal details, use tabs

35. 35 Example: KISS

36. 36 Economize Clarity: –design all elements so that their meaning is not ambiguous –use affordances –use plain language

37. 37 Economize Distinctiveness: –distinguish important properties of essential elements and make the most important elements obvious

38. 38

39. 39 Communicate Legibility: –design individual characters, symbols, and graphic elements to be easily noticeable and distinguishable Readability: –design detailed displays to be comprehensible, inviting, and attractive

40. 40 Communicate Typography: –limit the number of typefaces –e.g., max 3 legible/readable typefaces –limit the length of lines –i.e., max 40 to 60 characters –use appropriate justification –e.g., right justified for columns of numbers –avoid all caps for body text

41. 41 Example: Typography for edit boxes Proportional spacing: –Hard to see errors when typing in: Fixed spacing, bold: –Easy to see individual characters:

42. 42 Communicate Imagery: –signs, symbols, icons –icon design is difficult –use standards if possible –label unfamiliar icons –avoid gratuitous images –e.g., animated icons

43. 43

44. 44 Communicate Color and texture: –use appropriate highlighting and deemphasis techniques to convey meaningful semantic distinctions

45. 45

46. 46 Communicate Aspects of visual design: –scale –size of a specific element relative to other elements and the whole composition –contrast –noticeable differences along a common visual dimension –proportion –balance and harmony of the relation between elements

47. 47 Specific design examples Look at Joel's writings on UI: http://static.userland.com/gems/joel/uibookcomplete.htm