User Experience and Animation

So while we are in a lull of making some serious web changes, I wanted to summarize a few recent points around user experience and animation. There is a lot we can learn from the film industry in regards to user interface design.

When we are looking at moving elements pertaining to Continuity we should be looking at the

  • Content
    • Visibility from shot to shot
  • Movement
    • Carry movement continuously
  • Position
    • Keep spacial relations to other objects
  • Time
    • Color and Lighting

The largest difference between films and web applications is the driver. In a film we are listening to a story. In a web application we are directing the story in a non-linear timeline.

Continuity plays a key role in UI Design as it helps user’s understanding of the system they are using. When users understand the environment and its potential, the UI can then aim to be either informative, entertaining, functional, or all three at the same time.

Apple

Aims for realism. Movement will not defy the laws of physics.

Google

Aims for magic. Ignores physical laws and allows elements on the screen to transform into new areas.

Motion Provides Meaning

Motion provides meaning

Motion respects and reinforces the user as the prime mover. Primary user actions are inflection points that initiate motion, transforming the whole design.

All action takes place in a single environment. Objects are presented to the user without breaking the continuity of experience even as they transform and reorganize.

Motion is meaningful and appropriate, serving to focus attention and maintain continuity. Feedback is subtle yet clear. Transitions are ef´Čücient yet coherent.

~ http://www.google.com/design/spec/material-design/introduction.html

Principles of UX Choreography

Each element the user will interact with should have an entrance, performance, and exit. The choreography of these elements is a combination of how with the when and why.

One of the biggest keys I took away was the exaggeration of elements. It’s not enough to just ease an element in and set a timing on it. Exaggeration is felt not just seen.

Feeding-forward can be seen commonly now in uploaders where they use text to direct the user like “drag and drop files here”.

Spatial awareness is not something new to take away, but was a good point to be reinforced. It’s not always enough to color elements differently, but using space you can separate functions well.

Book Kit Mockups-Flyout-Available-Yes