Designing for Motion with Android

We were delighted to host a meetup of the Bay Area Android Developer Group, featuring a talk by local designer Jairo Avalos. As Android and other operating systems have evolved we’ve seen a shift towards adding motion in our interfaces. His talk looked at the benefits and the work involved in incorporating motion into our apps.

---

Why Use Motion? (2:59)

There’s three main reasons why you should use Motion in our UIs. The first is to inform the user. It’s very important that when somebody uses your app that you provide very clear and actionable information. Little clues, like tapping for a set of options or a password field shaking very vigorously, help us understand when something goes right or wrong.

Another reason to use Motion is to guide the user. You want to help the user make sense of where they are, showing the user how to navigate through the app and layering things on top of each other. Reassure the user that if they dismiss all the views, they’re going to get back to the same starting place.

Thirdly, delight the user! People spend a lot of time making things as awesome as possible, creating experiences that people enjoy because we want them to keep coming back. Small details make a world of difference if we want people to use our products over and over again. You can tell that someone deeply cares about their craft and spent a lot of time trying to make things right so that you could have an amazing experience.

Material Design (5:52)

There are three fundamental pillar of material design. The idea is that there’s this magic paper that behaves like things in the real world, and there’s things like depth, shadows, and lighting. You’re also able to extend that to other properties to make the experience as immersive as possible through the use of rich colours, typography, and imagery. Lastly, you want motion that provides meaning. Google really cares about this as well; they understand that it’s really important to give the user waypoints and show them where things are.

Material Design Motion (7:39)

According to Google, motion material design has four main principles. In Authentic Motion, things have mass and behave the same way that things to in the real world. The idea is that you don’t just magically appear somewhere, but instead get there with a certain speed and accelerate just so.

Responsive Interaction is immediate feedback. We expect things to happen, and so we want things to behave the way we expect. For example, having a menu pop out of an icon can become a pattern that users will continually use and understand. When users understand things, I can do a lot more with the product.

Meaning transitions - you don’t just do things for the sake of doing them. There’s a reason for everything. A secondary motion during a transformation shows the relationship between objects and again, helps the user make sense of what’s happening on the screen. This way, there isn’t a jarring switch but rather something the user can follow as it happens.

Lastly, delightful details. You could spend forever working on this kind of stuff. Giving things a nice kinetic rhythm or having icons transform into other icons is pretty cool to see, but not directly related to the physical world. It’s something that I think we generally appreciate because people love moving things.

Motion Usage (11:14)

The real question is, when should we use Motion? Very simple - when it’s needed. It’s one of those things where, if you start working on it, you fall into this rabbithole and then you get trapped into wanting everything to move. That’s something we need to avoid; we don’t want users getting motion sickness when they’re using our app. When you have any kind of shift in state, you have to help the user get from state A to state B.

Principles of Animation (12:38)

Two Disney animators came up with 12 principles of motion, but I’m only going to talk about what I think are the most important ones because they relate to interfaces.

Squash & Stretch

To really place emphasis on an action, “squash and stretch” to give a sense of weight to your animations. You can also exaggerate to really drive the point home on an action. You should always plan out your animations. When people are prepared and things are prepared, they usually turn out better than when not. Make sure you know what path you’re going to undertake.

Secondary Action

When you have a main action, your supportion motion will help to reinforce the relationship between elements to help users make sense of it all.

Timing

Probably the most important one is timing. How fast or slow things move really helps set the mood for your interface. Something that zips around the screen has this feeling of speed and urgency, whereas something that moves a little slowly is very leisurely. There’s no right or wrong answer with timing, but you can definitely time things in such a way that they create personality and really elevate the product to the next level.

Also very important is prototyping. In my early days, I would always just write out my animations to give engineers a clue, but you can’t really explain in words things like personality that comes from how fast or slow things should happen. There are so many prototyping tools, like Framer, Form, and Quartz Composer. The one I use every day is Framer, which is really nice because they all these built-in features for you to just start messing around with, and they’ve had Android and iOS from the beginning.

Resources

• Google’s Material Design Guidelines
• The Illusion of Life: Disney Animation
• Transitional Interfaces by Pasquale D’Silva
• The Art of UI Animations by Mark Geyer
• Prototyping tools: Framer, Form, and Quartz Composer

Q&A (21:53)

Q: What are some of the design considerations or concerns for choosing a flatter UI?
Jairo: I think all the different operating systems are trying to have their own way of doing things. Apple is still doing things like the drilling in and out of folders, so there’s hints of caring about motion. I think it’s just their philosophy, their preference of the UI. Microsoft went super print heavy, which was their influence in creating the Metro design language.

Q: The code you showed in Framer was done in CoffeeScript or JavaScript, which we can do write as Android developers but won’t actually be necessarily helpful for developers?
Jairo: Yeah, my iOS guys tell me the same ting. JavaScript and CoffeeScript are ultimately kind of useless for the developer, but help to communicate the idea of what we want as far as animations go.

Q: What are your favourite apps on the Playstore where you have seen Motion or animations in general done really well?
Jairo: I wouldn’t say I really have any examples of fantastic apps. I think with the fragmentation of Android, people are still trying to support 2.2 and so they’re all over the place. I think it’s really hard to find an example of something that’s doing it really well, since Lollipop just came out. Apps are still trying to catch up, so the best thing I can think of is Flipboard. They have literally pages flipping over, but that’s kind of their own custom animation rather than a material design kind of thing. Person 2: The Google First Party apps are also really good examples. I know on Android, the contact and the phone apps are really good. Anything that Google is releasing is gonna be ahead of the curve on this.

Q: Working with a lot of designers before Google released guidelines, they used to say it was kind of like the wild, wild west when designing an Android app. Google’s updated design guidelines and 5.0 were a massive redesign and effort for designers for Android. How do you feel after 5.0 and all these guidelines?
Jairo: It’s tough because apps still have to run on all kinds of other operating systems, since few people have 5.0 currently. It’s hard because you need to accept this as the way that the platform is going while at the same time, keeping in mind that not everyone can take advantage of it. You do best with that you have.

Q: What are problems that Android hasn’t fixed yet, or other mobile design frameworks and operating systems that are still kicking your butt?
Jairo: Person 2: The lock screen is awful. This is the first thing you see when you turn on your phone, and now it’s all over the place depending on which direction I swipe in.

Q: What do people do now that 5.0 is out, with regards to adding code and checking for backwards compatibility?
Jairo: From my understanding, there’s some decent backwards compatibility depending on what version you’re using. Our developers are slowly implementing things and they make it look really easy, so I assume it’s easy but that’s all the insight I can really give you.

Q: How do you assess the design or usability of an app? What sort of criteria or processes do you use?
Jairo: Let me use 2013’s favourite design buzzword: if it’s intuitive. If I know how to use an app the moment I launch it, that app has done a really good job because I’m coming in contact with something that I’ve never seen before. If you did a good job helping me understanding how to accomplish the thing that I was meant to do while using this app, then that’s a really good design.

Q: What about apps that provide hints but end of stacking like five screens? Do you still recommend doing that if the app is intuitive?
Jairo: It depends. If your app is something that’s complicated and requires users to do a lot, then I think it probably makes sense for you to call out important features or ways of doing things that might make their lives a little bit easier. It’s also very tricky to find out if something is really intuitive, because it’s intuitive to you but maybe not for someone else.

Q: What’s your tester build? Do you get alpha users from your demographic customer or just some random users?
Jairo: Right now, we bring in users every other week on Fridays and then we just have them run through new features or sometimes even whole apps to get their feedback.

Q: How does design language impact form factors? How do you bring the best out of the form factor with the design language?
Jairo: I would say it’s the other way around, where the form factor impacts the design. For example, you have the device and you want to show the right information and make it easy for users depending on what the physical device is like. For example, look at the iPhone 6+, the thing is massive. Should the navigation be at the top or bottom? They don’t want users to reach all the way across the screen, maybe they can’t.

Q: Does design language itself change based on form factor? What kind of an animation or design principle can you bring out from the factors?
Jairo: It’s funny you ask that, because if you go through and read the design guidelines, it’s actually meant to be universal. If you watch their reel, it’s all about the system and how it can expand and get bigger and smaller as needed in order to provide the same information. I have no perfect answer for you, but it seems like those guys thought about it a little bit and felt that iw as something that did work across different form factors.

Q: We’ve seen Microsoft coming up with Windows 10 and going back to their normal interface, and the whole Metro thing just fell apart. What do you think they did wrong in this case, or what was at fault?
Jairo: I have no insider knowledge, but I would assume that maybe the research wasn’t done properly. You have familiar patterns and mental models that come from years of usage, and to have that just ripped away and be tossed into something that is very jarring to you was problematic for them, I think.

Q: Do you think material design is well suited for desktop environment? Everything seems very touch based, so would you recommend those guidelines when working with Motion for desktop interfaces?
Jairo: There’s familiarity across platforms and devices, but there’s little things like moving all the way down to the corner of a huge monitor to do something you don’t on a smaller screen. These little things are slight annoyances that I wouldn’t say would kill design but are just things to improve upon.

Q: What do you think should be the progress of design, more incremental steps like iOS or giant leaps like Android and Microsoft?
Jairo: It probably just depends on how bad your initial design was to begin with. It also depends on, at least for Google, what kind of leadership they have and how different new ideas are.

---