Mobile Mail Application: Google Project

As interface designer and UI  animator, I was to define a motion behavior that would enhance usability of a mobile mail application concept; I aimed to create a natural experience that would give users a pleasurable sense of involvement, control, and flow.

Happy path motion composition demonstrating navigation behavior of mobile mail application (inbox list, email body, compose reply, compose email, inbox list)

Workflow

Ideate
To envision the appropriate motion design, I mapped out all key information spaces required for the entire interaction.

Design Usability
I then proceeded to mockup and animate UI so as to reinforce spatial relations, create motion affordance, convey gesture confirmation, and hide latency.

Spatial Orientation

To streamline navigation, I aimed to design a mental model for users; By leveraging motion design to “glue” information spaces together, my intent was to communicate to users the spatial relationships between all screens and components.

Point of Origin Morph

Animation to establish spatial relationship between initial and newly created information space

Motion Affordance

Using motion to create affordance, my goal was to guide users to any discoverable functionality and to augment graphic affordances.

Scroll bar

Appearance of scroll bar to convey length of scrollable space

Rubber Banding

Bounce animation to convey end of scrollable information space

Scrollable Space

Initial message shifts up in viewport to imply scrollable functionality

Sticky Headers

Persistent headers that shift with corresponding information in viewport

Gesture Confirmation

I incorporated motion into anything actionable to create a visual connection between the user's gesture and succeeding action.

Gestural Motion

Animation meant to connect user action to subsequent operation

Hiding Latency

To mask delays from server communication, I used motion to create the appearance of an instantly successful operation. The use of "optimistic" feedback was to preserve the user's sense of control even if their flow had been disrupted. Users would only be interrupted in the event of a failed operation (not shown).

Instant Success

"Optimistic" animation meant to convey an instantly successful operation

Indeterminate Loader

Stylized loader meant to visualize an undefined waiting time