Kinetic Typography

1
Kinetic Typography
2
Readings

• CMU Kinetic Typography web page
• http//www.cmu.edu/cfa/design/kdg/kt/
• No authorship given, but seems to be adapted
  from a paper by Shannon Ford, Jodi Forlizzi, and
  Suguru Ishizaki (all CMU Dept. of Design)
• Links to lots of examples

3
Old expressive form

• Expressing language through typeset text is an
  old (but still central) form of expression
• Powerful due to strong human linguistic abilities
  
• Typography extensively studied this century
• Going beyond just the content and into the form

4
New expressive form Film

• Primarily visual (but also auditory) forms
• Moving pictures
• Rather different properties
• Much stronger story telling ability
• Writers have to work very hard to paint a
  picture in words
• A good film maker can set the scene in a few
  seconds
• Easier to convey emotive content
• Verbal puts back tone of voice (prosodic
  features)
• Films tend to be much more engaging
• Take you places and make you feel things
• Perhaps not as good at communicating facts
• Less linguistic

5
Kinetic typography

• Now have the ability to do add some of the
  properties found in film to text (via dynamics)
• Emotive power
• Engagement
• Less passive
• Can explicitly direct/manipulate attention of
  reader

6
A new opportunity

• Earliest uses in film
• Needed text for opening credits but wanted to
  better match the form / feel of the rest of the
  film
• Separate thread from perceptual psych
• RSVP Rapid serial visual presentation
• Currently very widely used in commercials
• Emotive content attention manipulation both
  important
• But only recently really looked at systematically
  
• Media lab starting late 80s (Small, Wong,
  Ishizaki)
• CMU since then (Ishizaki, Boyarski, Forlizzi,
  students)

7
Powerful but under exploited(A nice combination
-)

• Only widely used in limited domains
• Lots of other potential uses (e.g., web, email,
  )
• Not combined with interactivity at all
• Not well explored / understood
• Some systematic exploration of design space, but
  not by a lot of designers
• Not much in the way of recognized / reusable
  rhetorical structures
• Very little literature on this
• Could use help from tools
• Currently quite hard to author

8
Examples

• http//www.cmu.edu/cfa/design/kdg/kt/kt_examples/k
  t_kid.html
• (local link)

9
What do we know about kinetic typography?

• A few general things
• Start on how to express a few specific things
• Emotion
• Character
• Longer list of things that can be manipulated for
  expression
• Still far from complete

10
Content and form (in)separability

• Some text has ambiguous meaning that can be
  indicated by form
• I said Im sorry
• Oh boy is it nice out (nice day1) (nice day2)
• But most have fairly clear meaning
• Can only manipulate so far
• Might turn sad into angry but probably not sad
  into happy

11
Things that can be expressed Emotion

• Analogs to affective meanings in human (and
  other) motion (nice day1)
• Use of prosodics
• Timing, pace, rhythm
• Tone of voice

12
Expressing emotion

• Tone of voice
• Two parts
• Paralinguistic
• Doesnt typically affect meaning
• Vocal qualities (e.g., huskiness, timbre)
• Hard to express / weak results
• Linguistic / Prosodic
• Can effect emphasis and/or meaning

13
Analogs for prosodic expression

• Pitch
• Classic example statement vs. question
• Analog large upward or downward movement
• Loudness (abuse example)
• Used e.g., for stress
• Analog changes in weight or size
• Tempo
• Used for overall emotional quality
• Analog movements with human meaning

14
Things that can be expressed Character /
personality

• Look to techniques from film
• M. Smith, Engaging Characters
• Can manipulate aspects of
• Recognition
• Alignment
• Attachment
• Subjective access
• Allegiance

15
Aspects of character creation

• Recognition
• Identification and re-identification of a
  character
• Normally based on invariance of characteristics
• Position, typeface, color, etc.
• Critical to establishing a character

16
Aspects of character creation

• Alignment (Oh No example)
• Attachment
• Following characters in time and space
• View follows (is attached to) some characters
• We see them or what they see
• Attached / main characters are always in the
  scene
• Others only in view when they come in contact w/
  attached
• Subjective access
• How much we know about the inner life of
  character
• How much of emotive content is expressed

17
Aspects of character creation

• Allegiance
• Viewers emotional and moral response to character
• Desirable / preferable characteristics relative
  to other characters
• Do we like them, are we rooting for them?

18
Attributes of form that can be manipulated for
expression

• Visual properties
• Color, saturation, brightness, etc.
• Translucency (visibility) focus / blur
• Spatial properties
• Location, layout, alignment,
• Scale Rotation
• Pseudo-3D (order, occlusion overlap, relative
  scale)
• Typographic properties
• Typeface and style
• Spacing (leading, kerning, etc.)
• Glyph shape
  (pit stop ex)

19
Attributes of form that can be manipulated for
expression

• Timing, Pace, Rhythm (silence
  ex)
• Motion
• Wiggle, bounce, vibration, etc.
• Path
• e.g., curvature of arcs, anticipation
  follow-through
• Analogs to meaning in human and other motion
• Inferred properties of material (stiffness, mass)
• Dynamics of other properties
• E.g., change translucency, color, or visibility ?
  flash

20
Possible Structures Hierarchy of Phrases

• Phrase
• Entrance
• Progression
• Manipulation of form(s) over time
• Possibly sequence of component phrases
• Departure

21
Rapid Serial Visual Presentation (RSVP)

• A technique of particular interest
• Saw a lot of it in the demos
• Display one element at a time (serially)
• Typically one word, but also groups, or letters
• Originally emerged from experiments on visual
  perception and reading
• Flash a word on the screen very fast, can you see
  it?
• Can increase reading speed
• Eyes dont have to move (esp. back to beginning
  of the line)
• But can be tiring (esp. if not under user
  control)
• Have to pay attention
• No opportunity to rest

22
Rapid Serial Visual Presentation (RSVP)

• Applicable to small screen displays
• Trade time for space
• Reuse the same (limited) space over time
• Not necessarily a tradeoff
• Same or better performance in much less space
• But can be tiring
• Single words can be large (less resolution issue)
• Provides independence between words etc.
• Can manipulate e.g., size without worrying about
  effects on the rest of the line

23
Other recurring themes / techniques

• Applied to different levels and purposes
• e.g., Word emphasis
• Wiggle / shake, grow, fade, retention, etc.
• e.g., Direction of attention
• Flying, zooming
• Need to be categorized and characterized better

24
Wrap up

• Lots of potential here
• Adding emotive content
• Appeal, liveliness, desirability
• Direction of attention
• Improved perception
• Tool for story telling
• Win for small displays
• Under exploited
• Needs more study (characterization of techniques)
• Needs tools

25
(No Transcript)