[tabgroup]
[tab title=”Instructional” id=”t1″][one_third]

What is instructional motion?

Using motion to draw a person’s attention to a specific part of the screen. Many times this means reinforcing cause and effect i.e. “the action you just took caused something to go here.”
[/one_third]
[one_third]

Showing the double heart next to mutual to communicate where matches are found

[/one_third]
[one_third_last]

Showing where to locate added teams post-onboarding

[/one_third_last]

[one_third][/one_third]
[one_third]

Drawing the eye to where saved articles are stored

[/one_third]
[one_third_last]

Using motion as a loading state to articulate one message being sent to multiple people

[/one_third_last]
[/tab]
[tab title=”Branding” id=”t2″][one_third]

Branding Motion

In a lot of ways, motion can be used to set the tone for the experience of your app. Whether it’s showing a sizzle video on the log in screen of your app, using your logo mark as a loading state, or recording interactions in the app to promote it in the app store, video is a powerful medium for representing a brand prior to using the app.
[/one_third]
[one_third]

Sizzle video on splash screen as a first impression

[/one_third]
[one_third_last]

Logo mark (heart) transitioning from static loading screen to dynamic spinner.

[/one_third_last]
[one_third][/one_third]
[two_third_last]

Google Play store video promoting the release of our new Android app

[/two_third_last]
[/tab]
[tab title=”Delight” id=”t3″][one_third]

What does delight mean to me?

Delight can mean a lot of things. In some cases it’s that “Oooooh” sound followed by smile on a person’s face when they see something pop onto the screen. In other cases, it’s a hidden element that is so unexpected and entertaining that you share it with a friend. Generally it’s usually an interaction that you didn’t expect, but adds value to experience of using something.
[/one_third]
[one_third]

iOS pull-to-refresh animation for Zoosk’s inbox

[/one_third]
[one_third_last]

[/tab]

[tab title=”Loading” id=”t3″][one_third]

Loading states/spinners

Isn’t it a drag when you’re on a bad internet connection and you’re not even sure if the page or app is loading? There’s something to distracting a person with a shiny object so that they don’t feel like they’re waiting. I’d liken it to handing a child a toy when it’s bored. Nobody likes sitting there watching paint dry and loading states are there to prevent people from feeling like they’re waiting.
[/one_third]
[one_third]

Static splash screen to content loading in app

[/one_third]
[one_third_last]

Loading circle around the tapped like button to give feedback on a successful action

[/one_third_last]
[one_third][/one_third]
[one_third]

Bouncing envelope on top of progress bar as a playful loading state

[/one_third]
[one_third_last]

Tracing a grey heart as a loading state between experiences

[/one_third_last]
[/tab]
[/tabgroup]