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. Text Film Kinetic Text 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 80’s (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/kt_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 I’m 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 • Doesn’t 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 don’t 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