Embed Size (px)
DESCRIPTION
Mobile interfaces have become a playground for new and unusual transitions. When you add a “to do” item in Clear, or move from category to story detail in Facebook Paper, you experience a new standard in interface response using animation and sound. Mobile developers and designers have a multitude of opportunities to inform and delight in those spaces in between major actions. When done well, unique transitions can add playfulness, meaning, and interest to your mobile solutions. When done badly, they can frustrate users with long wait times, or obscure the relationships between elements of your product. In this session we’ll explore the power of transitions in the mobile space, and discuss: Why is it important to consider transitions? What types of situations warrant a unique transition? Where can you find inspiration? How do you know when you’ve gone overboard?
Citation preview
The Power of TransitionsON REACTION
This introduction is a transition.
I’m a sci fi geek
I wrote things with cool people
who teaches UX Design
What you really want to know…
What will I hear about, and from which perspective?
No focus on transitions other than a communication about “connecting” between each step.
My Verizon Mobile
Breadcrumbing>all>the>way>into>a>view is an easy way to get lost. !
Pasquale D’Silva, Elepath
1 2 3 4
The moment my mind was blown
Clear
Antonio De Pasquale
Monument Valley !Building anticipation and setting tone
Human Behaviors
Stepping
What is important? The end point… the beginning… or the journey?
Behavior:
Stepping
Techniques:
Exaggeration, Bounce
Nice use of:
Peripheral Hints, Dominance
Duolingo
Great uses of BOUNCE
1. Feedback that a swipe can go no further with a single gesture
Behavior:
Stepping / Riffling
Techniques:
Pinning, Extension
Nice use of:
Content & Category Association
Facebook Paper
1 1 12 2 2 2 2 2 22 22
Riffling
Behavior:
Riffling
Techniques:
Parallax / Z Space
Nice consideration of:
Peripheral “Vision”
Yahoo! Weather App
http://alistapart.com/article/the-z-axis-designing-for-the-future
Behavior:
Stepping / Riffling
Techniques:
Z Space Layering
Nice use of:
Maintaining Context, Extension
Gmail
1 2a02a
2b
2c
2d
2e
2f
Behavior:
Riffling
Techniques:
Automatic Play on Focus
Nice use of:
Anticipation, Attention Shifting
Vine
Glancing
Behavior:
Glancing
Nice use of:
Maintaining Context, Position
Outside the Box
Behavior:
Glancing
Techniques:
Reference from the Bottom, Page Turn
Nice use of:
Attention Switching
Duolingo
Pivoting
Behavior:
Pivoting
Techniques:
Sliding Tabbed Panels, Bounce
Nice example of:
Maintaining Context
Google Search
Great uses of Bounce
1. Feedback that a swipe can go no further with a single gesture
2. Building an understanding on how a UI element can be interacted with, AKA “Feedforward”
Not this…
Drilling Into Detail
Behavior:
Drilling Into Detail
Techniques:
Gradual Blur, Darken
Nice use of:
Attention Shifting, Staging
Yahoo! Weather App
Behavior:
Drilling Into Detail
Techniques:
Fading, Carrying Over, Pinning, Sizing
Nice example of:
Maintaining Context Through Steps
Instacart
Techniques:
Flipping
Nice example of:
Associating Paired Information
Buster
Immersing
Behavior:
Immersing
Duolingo
Behavior:
Immersing
Techniques:
Sizing, Color Shifting
Nice use of:
Tunneling/Zooming
Duolingo
Behavior:
Immersing
Techniques:
Skeumorphism, Folding, Slight Arc
Nice use of:
Visual Hints, Character
Facebook Paper
12 2 23 3 3
23
23
Changing
Behavior:
Changing
Techniques:
Playful Animation
Nice use of:
Expressing Status Change, Personality
Tumblr
Behavior:
Changing
Techniques:
Spreadable Items, Transitions in Between Spaces, Focus
Nice use of:
View/Edit Switching, Help Text
Clear
Behavior:
Changing
Techniques:
Color Shifting
Nice use of:
Gesture Distance
Mailbox
Some suggestions…
be Subtle
“IOS 7 Is Reportedly Making People Sick”FastCompany, Sept 2013
be Subtle
be Mindful
be Consistent
Inconsistency
NYPD
be Subtle
be Mindful
be Consistent
be Playful… when it’s playtime
Great uses of Bounce
1. Feedback that a swipe can go no further with a single gesture
2. Building an understanding on how a UI element can be interacted with, AKA “Feedforward”
3. Playfulness!
Bounce!
Dots
Wren Lanier The Z-Axis: Designing for the Future
…think about a menu as a piece of content in and of itself, and not just more interface cruft.
Presenting a menu to the user… can be more than popping up or sliding over from the left—it can be an opportunity for surprise and delight.
Tools
Antonio De Pasquale
Inspiration
http://www.ui-transitions.comJohannes Tonollo
Pasquale Doble
Pasquale D’Silva Elepath
Antonio De Pasquale Frog Milan
Ease Cushion Sizzle Shiver Zoom !Hug Bounce Lumber Swoon Glide !Shatter Rocket Explode
Subtle ?
In-Your-Face
Redonkulous
Collect Verbs
