CS325: Usability Typography and Color

1. CS325: UsabilityTypography and Color Mark Corner UMass Amherst Department of Computer Science As for all of the lectures in this course, the slides a a mishmash of material from various places. People that I have borrowed the most from are Scott Klemmer and Terry Winnograd from Stanford, Jim Foley and Gregory Abowd from GaTech, James Landay from UW, and Jason Hong from CMU

2. Typography and Color • Typography and color are essential • Clear presentation of information • Grouping and differentiation • Aesthetics and elegance • Identity and brand • Understanding of color and type is transformative

3. UMass Identity

4. Typography • Art and techniques of type • the physical form of glyphs (characters) • Legibility and readability • Typefaces (fonts)

5. Helvetica • Helvetica

6. Moveable Type

7. Major Font Types • Serif and Sans Serif • Monospace font

8. Emphasis • regular, bold, italic, and bold italic • Italic may actually be “oblique” • Gill Sans: Q Q • Arial: Q Q • Times New Roman:Q Q • I AM HARD TO READ • Ee Which one is Helvetica?

9. Font Choices • One should rarely use many typefaces • Decorative: Comic Sans, Papyrus • Script: Edwardian Script ITC • Popular typefaces in use • Arial, Garamond, Verdana, Helvetica, Myriad Pro • Don’t Helvetica and Arial look a lot alike? • http://www.ms-studio.com/articles.html

10. Size • Size is measured in points • Approximately 72 points to the inch • 12 Point32 Point • Space between baselines

11. X-height • X-height median size of the font • 28 Point Garamond • 28 Point Arial

12. 72 ppi or 96 ppi?

13. Size for Legibility • Characters must subtend 10-20 minutes • 10 minutes: • 0.1” character at 36” • 0.05” character at 18” • 70-90% recognition accuracy • 20 minutes: • 0.1” character at 18” • 0.05” character at 9” • 96-98% recognition accuracy

14. Resolution and Legibility • Scan lines per character and recognition • 6 lines 79-88% • 8 lines 92-94% • 10 lines 97-99% • READ

15. Kerning and Tracking

16. Leading • Amount of added space between lines

17. Alignment • Flush left, flush right, justified, centered • Flush left tends to be the most readable

18. Justified Type NYTimes print

19. Flush Left NYTimes online

20. Line Length • Optimum line length is 55 – 75 characters

21. Widows and Orphans Widow

22. Line Breaks • For headlines or titles lines that break are harder to read • Than those that do not • Notice that I do not break lines in slides!

23. Aliasing and Legibility • Individual pixels cause jagged edges • Anti-aliasing

24. Subpixel Rendering • Use independent RGB pixels

25. Colors • A couple of warnings • Color spaces are approximations of the eye • Everything here is converted to RGB

26. What IS Color? • Light has wavelengths • Monochromatic light has one wavelength • The human eye has rods and cones • Rods for low-light and peripheral • Cones are for colors and high resolution • Three kinds of cones • Each sensitive to a different set of wavelengths

27. Cone Color Sensitivity

28. Color Spaces • “Color” is the intensity of three stimulus • No physical process can excite single cones • no way to make all “colors” • called imaginary colors, a greener-green • Color space • Three (or four) values that represent all colors

29. HSV Color Space

30. Chromaticity Diagram • Divide into two components • Chromaticity • Brightness • White and gray have the same chromaticity • Chromaticity has two dimensions (x,y) • Can show all visible colors • Remember this is an RGB monitor….

31. Chromaticity Diagram

32. Primary Colors • Pick three “colors” • A range of colors can be created as a mix • Called a gamut

33. sRGB

34. Adobe RGB

35. Adobe Wide

36. Physically Make Color? • Two ways • Additive • Red, Green, Blue pixels • Subtractive • Cyan, Magenta, Yellow, Black pigments

37. CMYK vs RGB

38. CMYK vs RGB • RGB • CMYK

39. Use Color Sparingly • Draw attention • Facilitate searching • Communicate organization • Indicate status • Establish relationships

40. Exercise • Find the red letter • Find the ‘A’

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

42. Color as a Search Aid • Color generally faster than other search methods • Shapes (60%) • Size (40%) • Brightness (40%) • Alpha characters (40%) • Letters (10%) • With too many colors, search is impeded

43. Color has Meaning • Yellow • happy, caution, joy • Brown • warm, fall, dirt, earth • Green • go, on, safe, envy, lush, pastoral • Purple • royal, sophisticated • Red • aggression, love • hot, warning, stop • Pink • female, cute, cotton candy • Orange • warm, autumn, Halloween • Blue • cold, off

44. Color is Cultural • Red • China: Good luck, celebration, summoning • Cherokees: Success, triumph • India: Purity • South Africa: Color of mourning • Russia: Bolsheviks and Communism • Eastern: Worn by brides • Western: Excitement, danger, love, passion, stop, Christmas (with green)

45. Color Palettes • Set of colors used at once Variations of 2 colors Monochromatic (variations of 1 color) Southwestern (culturally evocative)

46. Draw Inspiration from Nature From Boxes and Arrows

47. Draw Inspiration from Nature From Boxes and Arrows