Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Animations to Guide Us All

Animations to Guide Us All

Slides of my presentation at Droidcon NYC 2015. The code for the example can be found at my Github.


More Decks by Marcos Paulo Souza Damasceno

Other Decks in Programming


  1. Animation to guide us all +marcospaulosd @marcospaulosd

  2. http://life.mirego.com/

  3. Evolution of Mobile Apps Outlines UX Complexities Meaningful Animations A

    tale of back buttons Material Life out of lollipop/Marshmallow
  4. A STORY!

  5. I’m an engineer/developer/programmer

  6. None
  7. None
  8. None
  9. The hard environment of transportation in Sao Paulo made me

    start using some applications and stop using others, not based in functionalities or my needs, but actually based on how easy it was to use it and how fast I could get things done
  10. Engineer UX/Design

  11. The Evolution of Mobile Apps At the beginning of all

    times, Mobile Applications were there for simple uses.
  12. The Evolution of Mobile Apps Nowadays with big screens and

    the popularity of smartphones, we’re trying to get the most independent possible of our computers. Unfortunately some design strategies like navigation drawer have not been enough to take the User Experience to a better level and instead have been used in many bad ways.
  13. The UX/UI dilema Apps are flooded with navigation drawers, unnecessary

    buttons everywhere or even tutorial screens that are a pain to develop and annoying.
  14. The UX/UI dilema At the end, coding an app is

    not the hardest part anymore, but actually to know where to put your elements, functionalities and even how to do the flow of your app have been the real challenge.
  15. Material Design


  17. Material Design Motion Matters Where things come from, where do

    they go, what can I do, where should I focus. MOTION MATTERS LET ME EXPLAIN YOU
  18. Material Design Where things come from. GOOD BAD

  19. Material Design Where should I focus

  20. Material Design Where do they go.

  21. Material Design Where do they go.

  22. Material Design What can I do.

  23. Material Design What can I do.

  24. Material Design What can I do.

  25. Drawables Overview We will see how we can take advantage

    of drawables so we can reduce the amount of resources in our application. Also we will see cases where a drawable could easily replace views, making our app more clean and faster. Objective
  26. The UX/UI dilema Animations to rule everything The use of

    animations can help simplify your app and eliminate unnecessary tutorials or even buttons
  27. The UX/UI dilema Just remember to answer those three questions!

    Where things come from Where do they go What can I do
  28. The UX/UI dilema Authentic Motion Animations should behave in coordinated

    manner. The paths elements travel along should all make sense and be orderly. Haphazard motion is distracting. GOOD BAD Your animations should make sense
  29. The UX/UI dilema Your animations should make sense They need

    to have a reason to exist.
  30. None
  31. Lollipop Introduced - Activity Transitions - Reveal - Touch Feedback

    and much more.
  32. Activity Transitions Use meaningful transitions to tell your user what’s

    happening. In the inbox app, when you open an email, it has a nice transition that gives you the idea that you’re really opening the email.
  33. Activity Transitions Code example: Explode Fade Slide …

  34. Activity Transitions Code example:

  35. Activity Transitions Code example:

  36. I want to play a game Challenge

  37. ShapeDrawable Shapes Types OvalShape XML Code A tale of back

  38. Bad UX Challenge What happens when you click back in

    each of those screens? Google Play Facebook Youtube
  39. Let’s take a look at Facebook for Example - You

    are on your timeline - You type Droidcon in the searchview. - You press search. - Then you type Andevcon in the searchview - You press back button. Will my search going to be cancelled? Will I be back to the timeline? Bad UX Challenge
  40. I’m back to the timeline. Bad UX Challenge

  41. Another case: - You are in someone’s profile. - You

    press the search button. - Then you type Droidcon in the searchview - You do a search. - Then you type Andevcon. - You do a search. - Then you press the back button. Will I be back to Droidcon results screen? Will I be back to the person’s profile? Bad UX Challenge
  42. NONE OF THEM Bad UX Challenge

  43. Now Youtube - You are at the home screen -

    You type The killers in the searchview - You press search. - Then you type Coldplay in the searchview - You press back button. Will my search going to be cancelled? Will I be back to the youtube’s home? Bad UX Challenge
  44. The Search is cancelled. Bad UX Challenge

  45. There isn’t right or wrong. There is bad guidance. Bad

    UX Challenge
  46. Bad UX Challenge Google Play solves the confusion When you

    click on search, it does a reveal animation to pop up the search view over the toolbar. Because of the animation, it becomes pretty clear the by clicking the back button, the search view will close and the search will be cancelled.
  47. DEMO

  48. DEMO MovieListActivity.class

  49. DEMO MovieDetailActivity.class

  50. Is Motion Design only possible on Lollipop?

  51. NO!

  52. Transition Bad Example Spotify has a terrible transition between the

    player and the playlist, the animation between its states makes no sense and there is an unnecessary “X” button that makes no sense to be an X
  53. Transition Good Example Google play music has a simple animation

    that solves the problem that spotify has. Because you know the minimized panel slides up, you don’t need any indicator to show that it also goes down.
  54. Transition Good Example No lollipop required. It’s a simple translation

  55. Wrap up Material design is a concept, not a new

    technology, take its ideas and apply little by little in your applications. You don’t actually need lollipop to bring Material Design to your applications. Be creative!
  56. Wrap up Use animations to guide your users.

  57. Wrap up Get inspired by other apps but don’t do

    a copy paste stack overflow design partners.
  58. Wrap up Get inspired by other apps but don’t do

    a copy paste stack overflow design partners. Even better, be an inspiration to other developers and applications.
  59. Thank you!! +marcospaulosd @marcospaulosd