CMPUT 301: Lecture 25 Graphic Design

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

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

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

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. 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. Graphic Design • Apply these principles to design menus, control panels, dialog boxes, icons, etc.

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

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

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

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

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

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

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

33. Example: Navigability

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. Example: KISS

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

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

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. 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. Example: Typography for edit boxes • Proportional spacing: • Hard to see errors when typing in: • Fixed spacing, bold: • Easy to see individual characters:

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

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

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. Specific design examples • Look at Joel's writings on UI: http://static.userland.com/gems/joel/uibookcomplete.htm