Kinetic Typography

Readings CMU Kinetic Typography web page: 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

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

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

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 TextFilm Kinetic Text

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)

Powerful but under exploited (A nice combination :-) Only widely used in limited domains –Lots of other potential uses (e.g., web, , …) –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

Examples (local link)

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

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)nice day1nice day2 But most have fairly clear meaning –Can only manipulate so far –Might turn sad into angry but probably not sad into happy

Things that can be expressed: Emotion Analogs to affective meanings in human (and other) motion (nice day1)(nice day1) Use of prosodics –Timing, pace, rhythm –Tone of voice

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

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

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

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

Aspects of character creation Alignment (Oh No example)(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

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?

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)(pit stop ex)

Attributes of form that can be manipulated for expression –Timing, Pace, & Rhythm (silence ex)(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

Possible Structures: Hierarchy of Phrases Phrase –Entrance –Progression Manipulation of form(s) over time Possibly sequence of component phrases –Departure

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

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

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

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