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)
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.
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
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
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
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