1. Visual design The “look” of your interface

2. Who Needs Substance?

3. Graphic Design The “look” of an interface or web site, as in “look and feel” The overall set of images, colors, layouts, fonts Conveys an impression, mood

4. Role of Graphic Design Create a “look,” an “impression” What someone initially encounters Sets a framework for understanding content

5. Role of Graphic Design The “look” of an interface What someone initially encounters Sets a framework for understanding content

6. Role of Graphic Design The “look” of an interface What someone initially encounters Sets a framework for understanding content

7. Role of Graphic Design The “look” of an interface What someone initially encounters Sets a framework for understanding content

8. Role of Graphic Design The “look” of an interface What someone initially encounters Sets a framework for understanding content

9. Role of Graphic Design The “look” of an interface What someone initially encounters

10. Graphic Design It shares aspects of design practices in engineering and CS, but focuses on the cultural, symbolic & affective aspects. “useful, usable, desirable”

11. Graphic Design As a practice, it has been around for thousands of years.

12. Graphic Design With the industrial revolution, art and design began to diverge Design for mass- production - of printing, of artifacts

13. Graphic Design In the US, graphic design developed into a profession after WWII.

14. Graphic Design Relies on a BALANCE and integration of: Objective: relies on quantitative studies, like usability testing Does the “look” work?

15. Graphic Design Subjective: “look” relies on subjective judgment by experts, and depends on contextual factors

16. Graphic Design Subjective: “look” is contextual, based on culture Culture is learned Cultural meanings change There can be multiple meanings Uniqueness is valued (not programmable) You cannot empirically measure the subjective aspects, but there is a discipline to its study

17. Graphic Design Is rigorous in its own realm Knowing graphic design principles will: Enhance your ability to communicate w/designers Enable you to create more user- friendly interfaces

18. Design Philosophies One point of view: Economy of visual elements Less is more Clean, well organized Form follows function – Bauhaus

19. Graphic Design Involves knowledge of: Sequencing Organization Layout Imagery Color Typography

20. Graphic Design Principles Metaphor Clarity Consistency Alignment Proximity Contrast

21. Metaphor Tying presentation and visual elements to some familiar relevant items e.g., Desktop metaphor If you’re building an interface for a grocery application, maybe mimic a person walking through a store with a cart

22. Example www.worldwidestore.com/Mainlvl.htm Overdone?

23. Clarity Every element in an interface should have a reason for being there Make that reason clear too! Less is more

24. Clarity White space Leads the eye Provides symmetry and balance through its use Strengthens impact of message Allows eye to rest between elements of activity Used to promote simplicity, elegance, class, refinement

25. Example www.schwab.com Clear, clean appearance Opinion?

26. Example Clear, clean appearance Opinion?

27. Example Does this convey different impressions?

28. Clarity via White Space White space

29. Clarity via “White” Space White = Open

30. Consistency In layout, color, images, icons, typography, text, … Within screen, across screens Stay within metaphor everywhere Platform may have a style guide Follow it!

31. Example Home page Content page 1Content page 2 www.santafean.com

32. Alignment Western world Start from top left Allows eye to parse display more easily

33. Alignment Grids (Hidden) horizontal and vertical lines to help locate window components Align related things Group items logically Minimize number of controls, reduce clutter

34. Alignment Grids - use them

35. Grid Example

36. Alignment Left, center, or right Choose one, use it everywhere Novices often center things No definition, calm, very formal Here is some new text

37. Web pages use lots of grids…

38. Proximity Items close together appear to have a relationship Distance implies no relationship Time: Time

39. Example Name Addr1 Addr2 City State Phone Fax Name Addr1 Addr2 City State Phone Fax Name Addr1 Addr2 City State Phone Fax

40. Alignment: Dialogue Box Example

41. Dialogue Box Example

44. Contrast Pulls you in Guides your eyes around the interface Supports skimming Take advantage of contrast to add focus or to energize an interface Can be used to distinguish active control

45. Contrast Can be used to set off most important item Allow it to dominate Ask yourself what is the most important item in the interface, highlight it Use geometry to help sequencing

46. Example www.delta.com Important element

47. UI Exercise Look at interface and see where your eye is initially drawn (what dominates?) Is that the most important thing in the interface? Sometimes this can (mistakenly) even be white space!

48. Example Disorganized

49. Example Visual noise

50. Example Overuse of 3D effects

51. Economy of Visual Elements Less is more Minimize borders and heavy outlining, section boundaries (use whitespace) Reduce clutter Minimize the number of controls

52. Coding Techniques Blinking Good for grabbing attention, but use very sparingly Reverse video, bold Good for making something stand out Again, use sparingly

53. Hue basic color, pigment Saturation relative purity, brightness, or intensity of a color Value lightness or darkness of a color Most commonly-used model Characterizing Color - HSV Model Image from: Adventures in HSV Space, Darrin Cardani, dcardani@buena.com

54. Hue Wavelength (red, green, yellow, blue) Spectrum (VIBGYOR) Saturation Pastel versus strong (baby blue, sky blue, royal blue) Value amount of energy (white, light gray, dark gray, black) Usually V = 0.299*R + 0.587*G + 0.114*B HSV Color Model

55. HSV Color Space Typical color selection tools

56. Color – Reflected and Emitted We see the world via reflected color: light strikes a surface and is reflected to our eyes – properties of surface dictate color (printers, objects) Subtractive color model - Cyan Magenta Yellow primaries Colors on CRT are emitted: light is generated by phosphors and emitted Additive color model - Red Green Blue primaries

57. Color Use it for a purpose, not to just add some color in

58. Color Guidelines Use color sparingly--Design in b/w then add color where appropriate Use color to draw attention, communicate organization, to indicate status, to establish relationships Avoid using color in non-task related ways

59. Color Guidelines Color is good for supporting search Do not use color without some other redundant cue Color-blindness Monochrome displays Redundant coding enhances performance Be consistent with color associations from jobs and cultures

60. Color Guidelines Display color images on a black, white, or gray background Be sure foreground colors contrast (in both brightness and hue) with background colors Avoid using color in non-task related ways

61. How many small ovals?

62. Now how many small ovals?

63. Visual Exercise How many small objects? How many rectangles? How many orange objects?

64. How Many Small objects?

65. How Many Rectangles?

66. How Many Orange objects?

67. Visual Exercise Find the red letter Find the ‘A’

68. Find the Red Letter; Find the ‘A’ V R Z M F G Q J C T D W W P K V L H I N E B S U O X Y V R Z M F G Q J C T D W A P K V L H I N E B S U O X Y R Z D K S W V S X

69. Find the Q and Z V R Z M F G Q J C T D W A P

70. Searching and Color Search for a particular item on a display Color generally faster Shapes (60%) Size (40%) Brightness (40%) Alpha characters (40%) Letters (10%) Score = Achromatic search time – color search time Achromatic search time An initial decrease in search time occurs as the first few colors are used, but then search times go up as more colors are added.

71. Accuracy and Color Coding Redundant coding increases discrimination Red triangle Green square Viewer cues on either code, results are: Brightness & color (104%) Size & brightness & color (61%) Size & color (60%) Score = Redundant – Color Only Color Only

72. Color Guidelines To express difference, use high contrast colors (and vice versa) Make sure colors do not “vibrate” These colors vibrate: they will give you a headache

73. Yellow happy, caution, joy Brown warm, fall, dirt, earth Green go, on, safe, envy, lush, pastoral Purple royal, sophisticated, Barney Color Meanings: Contextually Specific Red aggression, love hot, warning, stop, radiation Pink female, cute, cotton candy Orange warm, autumn, Halloween Blue cold, off

74. Color Meanings: Culturally Specific http://www.ricklineback.com/culture2.htm

75. Color Palettes Color palette – set of colors used on one screen Choose color palette from HSV space by varying and two of H, S, and V. Don’t vary hue, saturation and brightness at the same time. Unless want continuous tone or ‘artsy’ effect, best to use only 4-6 colors per screen

76. Color Palettes/Suites Designers often pick a palette of 4 or 5 colors Variations of 2 colors Monochromatic (variations of 1 color) Southwestern (culturally evocative)

77. Color Palettes Use of pastels and primaries Varyies all of hue, saturation and value

78. Color Palettes Redesign increased saturation of blue All colors are primary

79. Effect of Colored Text on Colored Background Black text on red Gray text on red Yellow text on red Light yellow text on red Green text on red Light green text on red Blue text on red Pale blue text on red Dark red text on red Red text on red Rose text on red

80. Effect of Colored Text on Colored Background Black text on dark blue Gray text on dark blue Yellow text on dark blue Light yellow text on dark blue Green text on dark blue Light green text on dark blue Blue text on dark blue Pale blue text on dark blue Dark red text on dark blue Red text on dark blue Rose text on dark blue

81. Effect of Colored Text on Colored Background Not enough contrast between blue text and grey, textured background Inconsistency may cause user to puzzle over icons being different sizes

82. Effect of Colored Text on Colored Background Substituted black text for blue Increased contrast Match your interest, find out what’s new online, discover our most loved services, and make your time online fun and informative. Start by clicking on “A Letter from Steve”, and come back to explore the other areas featured here.

83. Typography Characters and symbols should be easily noticeable and distinguishable Avoid heavy use of all upper case Studies have found that mixed case promotes faster reading HOW MUCH FUN IS IT TO READ ALL THIS TEXT WHEN IT’S ALL IN CAPITALS AND YOU NEVER GET A REST How much fun is it to read all this text when it’s all in capitals and you never get a rest

84. Typographical Hierarchy

85. Example

86. Icon Design Represent object or action in a familiar and recognizable manner Limit number of different icons Avoid excessive detail Make icon stand out from background

87. Icon Design Relies on drawing ability – hire someone to do it (there are standards and ways to critique icon design) Avoid meaningless, gratuitous use of icons Too many icons quickly become illegible

88. Icon Design What do each of these signify? Almost always want to accompany your icons by a text label

89. Use a Graphics Alphabet Use a basic graphics alphabet from which to form icons

90. Use a Graphics Alphabet Icons created from the graphics alphabet

91. What do these icons mean? Icons should be recognizable, memorable, and discriminable

92. What do these icons mean? Answers cut copy paste spell check print save new open From Window’s Start menu:Common document icons: Icons should be recognizable, memorable, and discriminable

93. Your Screen?

94. Remember Form follows function Visual elements should help convey purpose and meaning Be consistent Just like all design – iterate and get feedback!!

95. Let’s critique…

96. Coming up… Poster session No class next Tuesday – fall break Project part 2 due one week at NOON! Midterm in less than two weeks.