My goal is to empower the Product Design team at Snapchat to build beautiful, seamless interactions that allow them to be more creative and efficient. To date, I have been equipping the Design team with straightforward rules and principles. These allow both Designers and Engineers at Snapchat to break limits and push innovation to create the most delightful experiences for Snapchatters. In particular, I believe this framework will allow Product Designers to focus on their specialties while still taking advantage of a system-approach to interaction design.
Creative Direction - Daniel Szeto
Product Design - Snapchat Design Team
Interaction Design - JOE 4TA
Snapchat's Core Motion Principles
Snapchat is the fastest way to share a moment and our UI should support that by being as swift as possible at all times.
Communicating on Snapchat is real-time and authentic. Our interactions should be transparent and responsive, making users feel like they are in a real-life conversation.
Motion celebrates moments in user journeys, adds character to common interactions, and is an opportunity to express Snapchat's personality.
Elements that animate across a shorter distance have a shorter duration than those that travel longer distances. Regardless of an animation’s style, transitions shouldn’t be jarringly fast or so slow that they keep the user waiting. The right combination of duration and easing produces fluid and clear transitions. The factors below detail how duration should be adjusted to suit each animation.
Enter - 100ms | Exit - 100ms
Enter - 200ms | Exit - 100ms
Enter - 300ms | Exit - 200ms
Area Speed Notes
The duration for elements leaving the screen is always less than or equal to elements entering.
Elements that are persistent have a total duration of the exiting and entering animations. i.e. if the outgoing is 100ms and the incoming is 200ms. then the persistent equals 300ms.
Action animations, like buttons and sliders, have equal incoming and outgoing durations.
Standard Easing (Points A to B)
Standard Easing is associated with the *persistent* elements on the screen -- this includes any elements that are neither entering nor exiting, but simply moving from point A to point B. For example, when sliding a piece of paper on a desk with your hand, this Standard Easing method would be organically smooth. The beginning of the curve is 70% less than the ending curve, giving the element(s) a fast start and a smooth finish.
cubic-bezier(0.4, 0.0, 0.2, 1);
Outgoing Easing: 30%,
Incoming Easing: 70%
Decelerate Easing (Entering)
In order to visualize *Decelerate Easing*, imagine kicking a soccer ball on the ground in the middle of an open field. The moment your foot makes contact, the ball is at its *Peak Velocity*. From that point onwards, the ball decelerates and eventually comes to a natural stop. These are the same mechanics that the Decelerate Easing method uses: elements that are entering onto the screen start their journey at 0% and end at 70%, the *Peak Velocity*. They then slowly slide into place until finally coming to a full stop.
[[CAMediaTimingFunction alloc] initWithControlPoints:0.0f:0.0f:0.2f:1.0f]
cubic-bezier(0.0, 0.0, 0.2, 1);
Outgoing Easing: 0%,
Incoming Easing: 70%
Accelerate Easing (Exiting)
For this easing method, lets picture we're jumping off of a rock into a lake. When you start your journey down to the water you're starting at 0mph and accelerating to say 10mph. This is the same theory to elements that are exiting the screen, they are essentially falling off the screen. Opposite to the Decelerate Easing method, this journey starts at 30% and ends at 0%
[CAMediaTimingFunction alloc] initWithControlPoints:0.4f:0.0f:1.0f:1.0f]
cubic-bezier(0.4, 0.0, 1, 1);
Outgoing Easing: 30%,
Incoming Easing: 0%
Understanding the Sequence
Designing a good sequence requires a good understanding of what has left the screen, what will be entering the screen, and what remains. For each of these states, it is important to define the proper timing and apply the easing methods listed above. Once you apply this framework, you can successfully choreograph the sequence of interactions on a given screen as summarized below.
What is leaving the screen?
What is entering the screen?
What stays on the screen?
The Perfect Transition
Once you have asked yourself the three questions above and applied the accurate timing and easing methods, you are now at a “Tipping Point” and have reached the Peak Velocity. You can now make the Outgoing elements disappear and Incoming elements appear:
Outgoing elements’ easing velocity ends at “0”;
Incoming elements’ easing standard where the velocity starts at “0”.
The "Tipping Point"
Now that we all understand the rules.... Let's play!
New Story Ring animation
As of now, Snapchat does not have an automatic loading animation. An animation that communicates to the user that the app is working on providing real-time content. Without this feedback animation, the user is left pulling to refresh the screen not knowing if they needed to do so in the first place.
With the new V11 style we can now provide feedback in un-used real estate. By using 10px between the last Snap and the search bar we can offer a new loading rainbow animation that tells the user Snap is working on loading their new content for them.
Automatic Loading Animation
Post Pull-Down Animation
Pull To Refresh
How about we use this space to delight users with not only animation but a location-specific scene? Similar to Google Doodles, we have Snap Scenes. Let's say you just got off the plane from LA to NYC and you open up Snapchat for the first time. Naturally, you pull to refresh your feed but you notice something different, your Snapchat is now in NYC. Different holidays and seasons could also be used for this feature, it doesn't have to be just based on location.
Using the same parallax effect shown here, the further you pull down the more of the scene is shown. Working with the visual design team we would create a defined style that communicates to the user that this is a Snap Scene, like how you can identify a Google Doodle.
Not style approved
Use 3 same size layers for easy substitution.
Foreground, middle ground, background.
Future scenes would have new 3D style Chilla
Great place to exercise and showcase Snapchat V11 illustration style.