cs325 usability typography and color l.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
CS325: Usability Typography and Color PowerPoint Presentation
Download Presentation
CS325: Usability Typography and Color

Loading in 2 Seconds...

play fullscreen
1 / 47

CS325: Usability Typography and Color - PowerPoint PPT Presentation


  • 278 Views
  • Uploaded on

CS325: Usability Typography and Color Mark Corner UMass Amherst Department of Computer Science

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
Download Presentation

PowerPoint Slideshow about 'CS325: Usability Typography and Color' - Thomas


Download Now An Image/Link below is provided (as is) to download presentation

Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


- - - - - - - - - - - - - - - - - - - - - - - - - - E N D - - - - - - - - - - - - - - - - - - - - - - - - - -
Presentation Transcript
cs325 usability typography and color

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

typography and color
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
typography
Typography
  • Art and techniques of type
    • the physical form of glyphs (characters)
  • Legibility and readability
  • Typefaces (fonts)
helvetica
Helvetica
  • Helvetica
major font types
Major Font Types
  • Serif and Sans Serif
  • Monospace font
emphasis
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?
font choices
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
slide10
Size
  • Size is measured in points
    • Approximately 72 points to the inch
    • 12 Point32 Point
  • Space between baselines
x height
X-height
  • X-height median size of the font
  • 28 Point Garamond
  • 28 Point Arial
size for legibility
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
resolution and legibility
Resolution and Legibility
  • Scan lines per character and recognition
    • 6 lines 79-88%
    • 8 lines 92-94%
    • 10 lines 97-99%
  • READ
leading
Leading
  • Amount of added space between lines
alignment
Alignment
  • Flush left, flush right, justified, centered
  • Flush left tends to be the most readable
justified type
Justified Type

NYTimes print

flush left
Flush Left

NYTimes online

line length
Line Length
  • Optimum line length is 55 – 75 characters
line breaks
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!
aliasing and legibility
Aliasing and Legibility
  • Individual pixels cause jagged edges
  • Anti-aliasing
subpixel rendering
Subpixel Rendering
  • Use independent RGB pixels
colors
Colors
  • A couple of warnings
  • Color spaces are approximations of the eye
  • Everything here is converted to RGB
what is color
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
color spaces
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
chromaticity diagram
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….
primary colors
Primary Colors
  • Pick three “colors”
  • A range of colors can be created as a mix
    • Called a gamut
physically make color
Physically Make Color?
  • Two ways
  • Additive
    • Red, Green, Blue pixels
  • Subtractive
    • Cyan, Magenta, Yellow, Black pigments
use color sparingly
Use Color Sparingly
  • Draw attention
  • Facilitate searching
  • Communicate organization
  • Indicate status
  • Establish relationships
exercise
Exercise
  • Find the red letter
  • Find the ‘A’
find red letter find a
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

color as a search aid
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
color has meaning
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
color is cultural
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)
color palettes
Color Palettes
  • Set of colors used at once

Variations of 2 colors

Monochromatic (variations of 1 color)

Southwestern (culturally evocative)

draw inspiration from nature
Draw Inspiration from Nature

From Boxes and Arrows

draw inspiration from nature47
Draw Inspiration from Nature

From Boxes and Arrows