Animations to Guide Us All

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

https://github.com/marcospaulo/movies_example/

Transcript

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
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
16. Material Design LET ME EXPLAIN YOU MOTION MATTERS
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.
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 buttons
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 animation.
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