Motion = Meaning Use Motion Design to Enhance Experience

1
Motion MeaningUse Motion Design to Enhance
Experience

• Josh Bunting, Designer/Developer
• Punchcut

2
hello
3
Motion Meaning

• Motion creates understanding and an emotional
  link between a device and its human operator

3
4
Motion has some negative baggage

• Perception Its a processor hog
• It doesnt have to be
• Perception Just creates delays
• If done right it wont
• Perception Theres little time or budget for it
• If the value is understood, there will be

4
5
Motion is an asset

• Establish users mental model of the UI
• Can capture users attention and guide them
  through a task or experience
• Keep users informed through status animations
  (dont forget to entertain)
• Build product and brand equity

5
6
Real-world behavior is the best archetype

• People understand the physical world
• They understand gravity, bounce, friction
• People understand their current physical location
  because they participated in the journey
• Example Take the subway versus walking

New York Subway
6
7
Motion design bridges the gaps

• Adding transitions to a UI fills in the gaps,
  helping users create a mental map of the
  interaction

Journey not included
With journey
7
8
Status animation provides feedback

• Animations in key instances let users know
  whats happening behind the scenes and help
  reduce frustration
• Loading
• Searching
• Sending

8
9
Motion Study
Sending a message
9
10
Motion builds product loyalty and brand equity

• Motion is memorable
• Bling is good. Create the thrill of interacting
  with a UI.

10
11
Motion Study
Motion branded maps
11
12
Putting the principals in action

• Dont get in the way
• Look to the natural world
• Motion design requires choreography

12
13
Dont get in the way

• Streamline animations with residual motion
• A little goes a long way

No residual motion
With residual motion
13
14
Look to the natural world

• Physical behavior, Scale, 3D space, Gravity,
  Bounce, c.

Machine versus natural movement
14
15
Motion design requires choreography

• Timing
• Balance
• Rhythm
• Contrast

15
16
Motion Meaning
17
Thank You
17
18
Punchcut is a user interface design?and
development company that specializes in improving
mobile user experiences. We provide strategy,
design, and development services from user
research to the complete design and development
of custom interfaces and applications. Our
clients span the wireless industry, including
device manufacturers, operators, technology
providers, and leading entertainment brands.
170 Maiden Lane, 3rd FloorSan Francisco, CA
94108www.punchcut.com
Thank you // Josh Bunting bunting_at_punchcut.com
415-445-8855