cmsc434 week 12 | lecture 23 | nov 19, 2013 visual design ...slide from ellen lupton, thinking with...

Human Computer Interaction Laboratory

@jonfroehlich Assistant Professor Computer Science

CMSC434 Introduction to Human-Computer Interaction

Week 12 | Lecture 23 | Nov 19, 2013

Visual Design: Typography & Legibility

Hall of Fame Hall of Shame

https://vimeo.com/50071857

Today

1. Schedule

2. Typography

3. Midterm

Small Activity

Take out notebook or other writing medium

Write feelings/adjectives/reactions to each slide

Focus on immediate, visceral reaction

love

love

love

LOVE

Love

love

Segoe UI Light

Palace Script MT

Amatic SC

Arcade classic

October Crow

Double Feature

Gamifying green Jon Froehlich Assistant Professor CS 30th Annual HCIL Symposium May 22 2013

strong

strong

strong

strong

strong

strong

Crafty Girls

Impact

Comic Sans MS

Helvetica NeueLT Com 23 UltLtEx

Edwardian Script

In IxD, we care about legibility but we also care

about mood, personality, vibrancy, and energy.

One of the principles of durable typography

is always legibility; another is something

more than legibility:

Robert Bringhurst Poet, Typographer, Author

Quote from: Bringhurst, The Elements of Typographic Style, 2002

One of the principles of durable typography

is always legibility; another is something

more than legibility: some earned or

unearned interest that gives its living energy

to the page. It takes various forms and goes

by various names, including serenity,

liveliness, laughter, grace, and joy.

Robert Bringhurst Poet, Typographer, Author

Quote from: Bringhurst, The Elements of Typographic Style, 2002

kerning

kerning ke r n i n g

kerning ke r n i n g kerning

Human Computer Interaction Laboratory

@jonfroehlich Assistant Professor Computer Science


Week 12 | Lecture 23 | Nov 19, 2013

Visual Design: Typography

type & scale

Scale is the relationship among elements

within a composition or hierarchy.

Ellen Lupton Author, Designer, Educator

Quote from: Lupton, Thinking with Type, 2nd Edition, 2010

Slide from Ellen Lupton, Thinking with Type

revolver: zeitschrift für

film (magazine for film)



UNITED NATIONS’ OFFICE ON DRUGS AND CRIME (UNODC)

Maps, 2009. Design: Harry Pearce and Jason Ching/ Pentagram.

This series of posters for the United Nations’ Office on Drugs and Crime uses typographic scale to compare drug treatment programs, HIV incidence, and other data worldwide. The designers built simple world maps from country abbreviation codes (GBR, USA, RUS, etc.). Note Russia’s high incidence of HIV and low availability of addiction rehabilitation programs.

http://gizmodo.com/5590572/windows-phone-7-gallery/

http://go.microsoft.com/fwlink/?LinkId=196225

http://www.flickr.com/photos/47388015@N00/5186798761/sizes/o/in/photostream/

typefaces serif vs. sans-serif

http://en.wikipedia.org/wiki/Serif

San-serif

Serif


San-serif

Serif

Serif (red serifs)


In typography, serif is a small line attached

to the end of a stroke or symbol… a typeface

with serifs is called a serif typeface. A

typeface without serifs is called sans-serif.

Wikipedia http://en.wikipedia.org/wiki/Serif

Other languages have different writing styles akin

to serif vs. sans-serif


Kathleen Tinkel, Adobe Magazine, 1996

Which is more legible?

Serif or Sans-serif?

http://alexpoole.info/blog/which-are-more-legible-serif-or-sans-serif-typefaces/

read how we


When we read, our eyes travel along the lines in “saccadic leaps” (roughly approximated by red arrows), pausing briefly at regular intervals called “fixations” (shown as gold circles). Occasionally we regress to reread a chunk.

Aoccdrnig to rscheearch at Cmabrigde uinervtisy, it

deosn't mttaer waht oredr the ltteers in a wrod are,

the olny iprmoetnt tihng is taht the frist and lsat

ltteres are at the rghit pclae. The rset can be a tatol

mses and you can sitll raed it wouthit a porbelm.

Tihs is bcuseae we do not raed ervey lteter by it slef

but the wrod as a wlohe.

Anidroccg to rcraeseh at Cgdirbmae utisreviny

Condition Example Sentence Reading

Speed

Normal The boy could not solve the problem so he asked for help. 255 wpm

Internal letters The boy cuold not slove the probelm so he aksed for help. 227 wpm

Final letters The boy coudl not solev the problme so he askde for help. 189 wpm

Beginning letters The boy oculd not oslve the rpoblem so he saked for help. 163 wpm

Rayner et al., Psychological Science, 2006

Condition Example Sentence Reading

Speed

Normal The boy could not solve the problem so he asked for help. 255 wpm

Internal letters The boy cuold not slove the probelm so he aksed for help. 227 wpm

Final letters The boy coudl not solev the problme so he askde for help. 189 wpm

Beginning letters The boy oculd not oslve the rpoblem so he saked for help. 163 wpm

Rayner et al., Psychological Science, 2006

Still, study only looked at letter transpositions of a

single position. See:

http://blogs.msdn.com/b/fontblog/archive/2006/05/09/594050.aspx


“From your confessor, lawyer and physician,

hide not your case on no condition.”

- John Harington


We recognize letters more by their top halves than bottom halves

Serifs appear to aid in the recognition process

“From your confessor, lawyer and physician,

hide not your case on no condition.”

- John Harington

weight font

fonts investigating web

https://addons.mozilla.org/en-US/firefox/addon/context-font/?src=api

resources font

Some book sources

http://www.dubberly.com/articles/how-do-you-design.html

midterm the

1

11

6

11

9

1

0 0

2

4

6

8

10

12

0.4-0.5 0.5-0.6 0.6-0.7 0.7-0.8 0.8-0.9 0.9-1 1-1.1

Midterm Grades Without Bonus

Total 120

Average 82.4

Average % 68.70%

Median 85

Median % 70.83%

0

7

8

9 9

5

1

0

1

2

3

4

5

6

7

8

9

10

0.4-0.5 0.5-0.6 0.6-0.7 0.7-0.8 0.8-0.9 0.9-1 1-1.1

Midterm Grades With Bonus

Total 120

Average 89.7

Average % 74.73%

Median 92

Median % 76.67%

0

7 8

9 9

5

1

0

2

4

6

8

10

12Midterm Grades With Bonus

Total 120

Average 89.7

Average % 74.73%

Median 92

Median % 76.67%

1

11

6

11

9

1 0

0

2

4

6

8

10

12

Midterm Grades Without Bonus

Total 120

Average 82.4

Average % 68.70%

Median 85

Median % 70.83%

cmsc434 week 12 | lecture 23 | nov 19, 2013 visual design ...slide from ellen lupton, thinking with...

Documents