On Reaction: The Power of Mobile Transitions

1,365 views

Published on

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?

Published in: Design, Technology

On Reaction: The Power of Mobile Transitions

  1. 1. The Power of Transitions ON REACTION
  2. 2. This introduction is a transition. I’m a sci fi geek I wrote things with cool people who teaches UX Design
  3. 3. What you really want to know… What will I hear about, and from which perspective?
  4. 4. No focus on transitions other than a communication about “connecting” between each step. My Verizon Mobile
  5. 5. Breadcrumbing>all>the>way>into>a>view is an easy way to get lost. ! Pasquale D’Silva, Elepath
  6. 6. 1 2 3 4
  7. 7. The moment my mind was blown Clear
  8. 8. Antonio De Pasquale
  9. 9. Monument Valley ! Building anticipation and setting tone
  10. 10. Human Behaviors
  11. 11. Stepping
  12. 12. What is important? The end point… the beginning… or the journey?
  13. 13. Behavior: Stepping Techniques: Exaggeration, Bounce Nice use of: Peripheral Hints, Dominance Duolingo
  14. 14. Great uses of BOUNCE 1. Feedback that a swipe can go no further with a single gesture
  15. 15. Behavior: Stepping / Riffling Techniques: Pinning, Extension Nice use of: Content & Category Association Facebook Paper
  16. 16. 1 1 1 2 2 2 2 2 2 22 22
  17. 17. Riffling
  18. 18. Behavior: Riffling Techniques: Parallax / Z Space Nice consideration of: Peripheral “Vision” Yahoo! Weather App
  19. 19. http://alistapart.com/article/the-z-axis-designing-for-the-future
  20. 20. Behavior: Stepping / Riffling Techniques: Z Space Layering Nice use of: Maintaining Context, Extension Gmail
  21. 21. 1 2a0 2a 2b 2c 2d 2e 2f
  22. 22. Behavior: Riffling Techniques: Automatic Play on Focus Nice use of: Anticipation, Attention Shifting Vine
  23. 23. Glancing
  24. 24. Behavior: Glancing Nice use of: Maintaining Context, Position Outside the Box
  25. 25. Behavior: Glancing Techniques: Reference from the Bottom, Page Turn Nice use of: Attention Switching Duolingo
  26. 26. Pivoting
  27. 27. Behavior: Pivoting Techniques: Sliding Tabbed Panels, Bounce Nice example of: Maintaining Context Google Search
  28. 28. 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”
  29. 29. Not this…
  30. 30. Drilling Into Detail
  31. 31. Behavior: Drilling Into Detail Techniques: Gradual Blur, Darken Nice use of: Attention Shifting, Staging Yahoo! Weather App
  32. 32. Behavior: Drilling Into Detail Techniques: Fading, Carrying Over, Pinning, Sizing Nice example of: Maintaining Context Through Steps Instacart
  33. 33. Techniques: Flipping Nice example of: Associating Paired Information Buster
  34. 34. Immersing
  35. 35. Behavior: Immersing Duolingo
  36. 36. Behavior: Immersing Techniques: Sizing, Color Shifting Nice use of: Tunneling/Zooming Duolingo
  37. 37. Behavior: Immersing Techniques: Skeumorphism, Folding, Slight Arc Nice use of: Visual Hints, Character Facebook Paper
  38. 38. 1 2 2 2 3 3 3 2 3 2 3
  39. 39. Changing
  40. 40. Behavior: Changing Techniques: Playful Animation Nice use of: Expressing Status Change, Personality Tumblr
  41. 41. Behavior: Changing Techniques: Spreadable Items, Transitions in Between Spaces, Focus Nice use of: View/Edit Switching, Help Text Clear
  42. 42. Behavior: Changing Techniques: Color Shifting Nice use of: Gesture Distance Mailbox
  43. 43. Some suggestions…
  44. 44. be Subtle
  45. 45. “IOS 7 Is Reportedly Making People Sick” FastCompany, Sept 2013
  46. 46. be Subtle be Mindful be Consistent
  47. 47. Inconsistency NYPD
  48. 48. be Subtle be Mindful be Consistent be Playful… when it’s playtime
  49. 49. 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!
  50. 50. Bounce! Dots
  51. 51. 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.
  52. 52. Tools
  53. 53. Antonio De Pasquale
  54. 54. Inspiration
  55. 55. http://www.ui-transitions.comJohannes Tonollo
  56. 56. Pasquale Doble Pasquale D’Silva Elepath Antonio De Pasquale Frog Milan
  57. 57. Ease Cushion Sizzle Shiver Zoom ! Hug Bounce Lumber Swoon Glide ! Shatter Rocket Explode Subtle ? In-Your-Face Redonkulous Collect Verbs
  58. 58. Challenge! Carolyn Chandler carolyn.ux@gmail.com @chanan

×