Video: Android Design in Action: Device Automation and Touch Feedback
ROMAN NURIK: Hello and welcome again to Android Design in Action. My name is Roman Nurik. ADAM KOCH: Hey, guys. Adam Koch. NICK: Hi. Nick [? Coche. ?] ROMAN NURIK: And today we have way too much content. So we're just going to get started. Today's episode is on the device automation apps. The app that we'll be looking at today is called Tasker. And then we'll also go into a deep dive on touch feedback. And then we have a good amount of design use to cover as well. So let's just get started. So if we can look at the slides, Jeff. I can't really see if we're looking there.
But I guess we are. OK. So this is, on the left side, the Tasker app. Now Tasker is basically a device automation app. In the app clinic, they kind of use the term profile, device profile apps. This is kind of I guess a subset of that. Basically it lets you create a system of constraints or contexts and create a set of actions or tasks. I guess tasks are collections of actions in this app that get run when the device enters that kind of profile, that context. So, for example, if the week day is Monday through Friday and the time of day is between 9:00 AM and 5:00 PM, you can be thought as in the work profile or in the work set of contexts. And then so once you enter that context, rather enter that profile– there's a lot of terminology in this app. It's somewhat confusing. But it's very well thought out. When you enter the context, certain things can happen. When you leave that context or profile, other things can happen.
So there's an Enter and Exit action. So that's at a very high level what the app does. It lets you had to do a number of different things from setting system settings automatically, to speaking out text, to doing all sorts of interesting things. And then of course, the number of different profiles or different constraints that they have is also very large. So you can really, really customize the set of behaviors you want. So this is the app. As you can see here, there's kind of these three tabs– profiles, tasks, and scenes. I'm not really going to talk about scenes that much. Because I honestly didn't really get a feel for what they were. But profiles and tasks are two of the most important things here. So here we have a single profile, which is my work profile. And on the left, you see the different contexts that need to be satisfied to be in this profile.
And then on the right hand side, you see basically the actions that occur when you enter or exit. In this case, there's only an enter action. So when you exit this profile, when you leave work basically, nothing will happen. There won't be an unmute or anything. NICK: And it's set to unleash a panda as soon as you get to work. ROMAN NURIK: Yeah. I couldn't really find a better icon for muting. Unfortunately, the built an icons didn't really have a really obvious mute icon. So I just chose a panda. Because they're cute and cuddly. NICK: OK. ROMAN NURIK: And basically here there's some standard stuff. There's these actions in the bottom that let you add things, add a profile in this case, accept and cancel changes, turn Tasker on and off as a whole. And then to edit things on the screen, there is a lot of long pressing going on, which if you look through our guidelines on gestures you should really reserve long press for other things.
But there's a lot of complex interactions and a lot of stuff going on on this screen. So that's why we chose to think of a kind of a re-imagining of what it could look like. Before I jump into the redesign, Nick, Adam, any thoughts? NICK: Yeah. This app's been on my radar for quite some time. I think they won one of the early Android developer challenges. And I think the features you described are super powerful. But I've always been put off. Whenever I get to the place, to a listing, and you see their screenshots, it's very intimidating looking. Like I have no idea what all the different controls refer to and the plethora of options it seems to offer up. So I was pretty excited that we got to take a look at this application and try and make all that power perhaps a little easier to tap into. ROMAN NURIK: Yeah, absolutely.
ADAM KOCH: Yeah. We'll just move on. ROMAN NURIK: OK. So let's look at the redesign. So this is the re-imagining of the Tasker home screen. So on the right hand side– I'm just going to zoom in here so you can see. On the right hand side here, we have Tasker. And obviously we've refitted it with– wow. Saying refitted sounds like exhibits– what's that kind of car refitting show that he had? NICK: "Pimp My Ride." ROMAN NURIK: "Pimp My Ride." It sounds like pimping rides or anything. But whatever. So we've refitted it with– NICK: Is like a plasma screen TV is going to [? fall down the side. ?] ROMAN NURIK: Yeah. We've done a plasma screen TV. OK. We should really fly through this. Because we have way too much content.
Anyway so we've fitted it with the standard action bar and tab bar. We've basically taken their core tab bar that they've had in the previous screen here. And we've made it look more hollow obviously. We feel these tabs are probably fine. Separating out the app into these three core sections is probably OK. It's really up to the app to decide what their information architecture is. But we left it as it. And we've moved the on, off switch for the entire app to the top right as a key action. In this case, some could argue that you shouldn't have actions in both the top right and in the split action bar. But in this case, it's really kind of like a global– it's not really an action. It's really like a toggle, like a high level toggle for the entire app. So we felt that it was appropriate there.
And then in the content of the screen, you see your profiles. But here you can't really edit the profiles. And this is one of the things that I found that was a little confusing with the current app is that viewing the list of profiles and editing an individual profile is all in one screen. It'd almost be like seeing a list of contacts and editing each contact all in one. It's almost like a spreadsheet. And it just felt overbearing. So we decided to split this screen up into two screens, where on one screen you see the list of profiles. And you can obviously turn them on or off, which is a simple action that you can take. But then to edit the profile, you touch once to get into the details. And we'll show you that. So here you see the list of contexts. This is called my mute at work profile. And there's the list of contexts or constraints that need to be fulfilled. And then when you enter, it mutes. And when you leave, it unmutes. And then here is an example of a profile that's turned off. For example, send, I'm coming home, as a text message.
And we've decided to turn that off. And there's no exit action. There's only a single enter action there. And then you could add a profile using the standard action bar action there. And then there's another feature inside of the menu, deep in there somewhere, which was Search Tasker, which– I don't exactly know what it did. But it was just kind of like a global search through the app. We decided to expose that as an action in the bottom left. Before we move on, any comments? Should we fly through, keep going? OK. Let's keep going. So in the same exact screen that you saw in the beginning, you see this kind of both viewing a list of profiles and editing the profile screen. This is the editing portion that we broke up into a separate screen, where here you see the profile itself, the enter and exit actions that you can select using a spinner. And then there's a little shortcut here to edit each of these tasks.
And again, a task is a collection of actions which we'll see a bit. And then to add a context or add a constraint, you simply would press this in line Add button. And of course, you could put this in the action bar if you want. But this is just an assortment of different types of ways you can expose this. And then to remove something, you just swipe to dismiss it. And there are probably other actions you can take on each individual context. For example, editing should just be a one touch thing. But if you want to duplicate it or clone it or something, maybe that can be exposed through an overflow affordance. And obviously if you want to delete multiple things, you should allow for multiple selection using contextual action bar. OK. The next screen– this is an example of selecting a task. So when you exit this mute at work profile, here are the list of things you could do.
You can say oh, there's no exit task. Or you can browse all tasks and manage tasks where you can select one of the existing ones that you have there. Pretty straightforward, nothing fancy there. On the next screen, this is basically where you are editing a task. And you can see here, there are a lot of objects that you deal with in this app. And so one of the core points overall with this redesign is to simplify things, to make it very obvious what you're working with. And so here you're working with a list of actions for a task. And previously you were working with a list of contexts for a profile. So you want to make it very, very clear throughout every step in the process what the types of data you are working with is and where in the structure it is. So here is another example of how you can kind of use swipe to dismiss and a simple Add Action here at the top to replace a bunch of buttons that are on screen for deleting and adding and things like that.
And actually here you'll notice that there's no real way to delete something. You have to long press to delete. It seems kind of like extra work to have to do that. I think there's probably one or two more. This is the place where you can kind of rename a task. So if you jump into the task details, you should be able to edit everything. And one of the ways you could do that is to have an inline text field with the name. So you just start changing the name right there and then. Or if you don't think that that's going to be a very common thing, you could move it into the action overflow as kind of a rename additional action bar. And I think the last screenshot I want to show here is adding an action. This is one of the more important parts. So actually this is adding an action, not a context. So when you add an action, like when I am at work for example mute the phone or speak some text or whatever, airplane mode or whatever. To do that in the current app if you have to kind of go into a browse mode where you see this overwhelmingly large set of things you can do.
And it's kind of hard to really find the thing you're looking for. And I think in this case, you're generally more in search mode rather than browse mode. So I think that it would be a better case here to basically have an auto complete. So if I'm in the list of actions to take, I just start typing volume or mute or something. And it gives me a pre-populated auto completed list of things that I can do. And as soon as I touch, it just adds it. And if there's configuration stuff, then it just shows the configuration stuff. So I think that was it. I know that was super fast. We went through that in 12 minutes. Anything else you guys want to say before we move on from the screen redesigns? NICK: I really like the way it feels a lot cleaner now. I think generally dialogues just aren't the answer.
The previous app popped up a lot of dialogues, which kept a lot of contexts and a lot of load of the user to kind of remember where they are. And I feel like the new setup with the before and after– it just feels a lot easier to use for me. ADAM KOCH: Yeah. And this app in general is just really complicated. It does a lot of things. And so I think breaking the different functions into different screens really, really helps the user navigate through these different sections. ROMAN NURIK: Yeah. And really in this case it's simplifying. And actually there's a lot of cases in the past where we've combined the multiple screens into one. And I think that this app can do well by splitting things up more since it's so complex. Before we jump to the touch feedback session, I just want to briefly talk about some iconography, well actually I guess branding. And actually it's really just branding, this umbrella of branding. This is the current icon on the left. And here's kind of what it could look like matching the redesigned theme.
So the redesigned theme is kind of a blue and orange color scheme. And so here's what it could look like with that color scheme. And this better fits some of the other app icons that are out there just purely in terms of styling, not so much in iconography which is kind of the most important thing to be memorable is, what is in the icon? But to make it feel a little more modern and up to par with some of the other apps that are out there. And then the last thing I want to mention is the lack of a feature graphic. You cannot be featured, absolutely cannot be featured. The editorial team for Google Play will do nothing with your app in terms of promotion unless you have a feature graphic. So make sure that you add one. And this is just one example of what a feature graphic could look like for Tasker. It could be as simple as just having your name and the icon there, maybe a tag line or something. But make sure that it's also legible and clearly delivers the message at small sizes.
Because this feature graphic can appear in very, very small sizes on phones and other devices. NICK: Yeah. Just to expand on that just a little bit. Yeah. Like Roman says, this one, same, large asset– it's like 1024 pixels wide when you supply it. And so people get tempted to cram all kinds of information in there. But really, really resist that. Because it can be shown very, very small. If you think about a small handset, kind of three inches diagonally handset, it's going to be shrunken down greatly. So my advice to people is always to get your feature graphic. And resize it down to about 100 pixels wide. And check that everything's kind of legible and still looks good at that kind of size. And the other tip is that if you are lucky enough to get featured, the graphic can be shown in the Play store on the front page without much context. So I always find it's helpful to have your feature graphic convey some of the meaning of what the application actually does.
Because they're going to see it on its own without the benefit of the title and the description text and the screenshots. So really have it kind of stand alone. ROMAN NURIK: Yeah. And it could appear without the icon and appear without the title. So absolutely. That it can appear standalone is a very, very important point for future graphics. NICK: And resist putting screenshots in there. Because they don't size very well. And also [INAUDIBLE] [? put a device ?] frame in it. It just has the ability to look dated very quickly. So try and resist that. ROMAN NURIK: Absolutely. All right. Shall we move on to touch feedback? ADAM KOCH: Yeah. ROMAN NURIK: All right. Adam, you want to drive? ADAM KOCH: Yeah, sure. So we wanted to discuss a little bit about touch feedback. We actually look at a lot of different applications in our role. And surprisingly, one of the things we see broken in a lot of them is touch feedback, which is strange.
Because it really does give the user a sense of responsiveness and indicate that something's happening within the application. And the amount of effort required to actually add good touch feedback in your application is actually not that much. So it's definitely something with lower amounts of effort that has great pay off. And of course the canonical source for information on touch feedback is the design site. So if you just go on to style, there's a section called touch feedback. We'll cover this on the next page. There's a bunch of states here and some more information on some recommendations of how you should actually style the different states for touch feedback. But we have some tips I think on the next screen. Yeah. So the first thing to remember is all interactive elements should provide feedback. Not some of them– every single one should provide some sort of feedback. ROMAN NURIK: They say if it does something, it should look like it does something when you press it. ADAM KOCH: Exactly.
And another point to make is you should be consistent. So we often see people customizing touch feedback for parts of the application. But then they don't go and customize, say, the action bar touch feedback. So you have sort of the holo blue in the action bar. But you have a completely different color scheme for the rest of your application. ROMAN NURIK: And one that one thing that can help with that is the Android holo colors website, which basically generates all that for developers, as well as the action bar style generator, which again does all that for the [INAUDIBLE]. ADAM KOCH: Yeah. Combining that will really help you get sort of 99% through your application, being consistent there. We'll touch on this again in a second. But you should really ensure that the full touchable target area has feedback, so not just the portion of it. If it's touchable elsewhere, it should really have feedback across the entire item.
As we mentioned, customized ad feedback for custom components and whatnot. And also, don't forget about the multi select mode and contextual action bar. Those are really important modes. And you should really make sure that there's touch indicators when you're in the multi select mode. So we've got some examples. And we can discuss some of these points on the next slide here. ROMAN NURIK: It'll load. And there it is. ADAM KOCH: Yeah. So this is just some of the system apps to start with. We've got Google+ on the left, YouTube in the middle, and the system gallery on the right. So one area I see a lot of people leaving out touch feedback is when they're fully customizing a list view. So you've got this long scrolling list of items. And they've really customized it. So in the case of Google+, they've got these sort of nice cards. YouTube– it's almost like a card-like interface.
But it's sort of rich items showing the YouTube thumbnail. And very frequently, we'll see people forget to add the different states to these kinds of list views. So there's two, sort of, different types here that these apps have taken. In the Google+ app, for example, they've sort of covered the entire item in a sort of blue highlight, a holo blue highlight. I quite like that. ROMAN NURIK: Yeah. That's kind of like an overlay. And in development terms, it's basically the draw selector on top attribute on list views and grid views. ADAM KOCH: Correct. And in the YouTube app, they've gone and sort of shown the overlay, a sort of [INAUDIBLE] overlay. They've gone and showed it underneath the main thumbnail there. So it's another approach you can take.
It's really up to you which one to choose. Personally, I like the Google+ method a little bit more. But when you've got rich graphics in your list view, it really comes down to how you want to display it here. And then the third screen shot shows the gallery. And it's got the contextual action bar activated. And you can see, again, it's got the touch feedback there. So that when you select each of these, it shows a nice sort of blue holo overlay. ROMAN NURIK: And actually you get a lot of this for free using on Android 4.0, well, on ICS and above, you get this for free with, I think, the selectable item background attribute. So if you use that throughout, you don't even have to custom create all these assets, these blue assets. It just comes with the system, with the framework. So it's really, really useful to just use that, to just drop it in.
Android, colon, background equals this. Or Android, colon, foreground equals the selectable item background thing. And you get a lot of it for free. ADAM KOCH: Correct. NICK: It's also included in the support library, right? ROMAN NURIK: Is it? That's awesome. That's great. ADAM KOCH: Yeah. I guess it's with [INAUDIBLE] as well. Like a standard list view– if you use the standard list items, it will have touch feedback for you. But it's only when you really customize these things that it may not. Because you're building the layouts from scratch. NICK: Yeah. So I think the key thing is here is if you're customizing you're providing your own button drawables and stuff like that, make sure you include all the custom states as well.
ROMAN NURIK: Yeah. And it's a selector drawable or a stateless drawable. ADAM KOCH: It is. ROMAN NURIK: So here you have XML along with your PNG's that indicate which PNG file, which nine patch, or whatever should be used with each state. NICK: And while you're in there creating your kind of press states, remember to also include the focus states as well. Because devices with trap falls and Google TV's and so on will really, really benefit from those states. So while you're at it, do the right thing. ADAM KOCH: Yes, correct. And as I mentioned, on the design side it has some examples of how you should color and style those particular different states. NICK: Well just use [? Andrew Holoco's ?]. ADAM KOCH: Yeah. So here's an example of a third party app, the Ted application, which we like to use as an example here on the show. There's three different screens here now. It's kind of hard to see in the first screen. But there's a grey highlight actually on the top left part of the action bar as well as on the tabs.
I kind of double tapped here just so we could fit it into one screenshot. ROMAN NURIK: You just contorted your hand in there. ADAM KOCH: Yeah. It was kind of hard to take a screenshot at the same time. But they've got a sort of light grey highlight here when the user touches down. And then if you look at these other screenshots next to it, you'll see for other items, including the action items in the action bar– yeah. ROMAN NURIK: So we should move it into view. ADAM KOCH: Yeah, sure. Let's move it here. They've got a red highlight. So they've got two different highlights. And they kind of use them for different items across the application. So places, I guess, where they are already using the sort of trademark Ted red color, they'll use the grey highlight. And other places, they'll use the red highlight. So for example, in this button here, which says, listen to this talk, they've got the red highlight again. And this comes back to that point we were talking about where you should really highlight the entire touchable area. So you'll see here that the whole red highlight is covering the entire line.
Because you can touch anywhere across that entire line. ROMAN NURIK: Yeah. So the first time you touch it, you'll probably touch around the icon or the text. But then when you see that the rest of that row responds in red, your brain will internalize the fact that this whole thing is a single object that you can interact with. So it really helps make that association. ADAM KOCH: Yep. And I think we should move on. Because we're low on time. ROMAN NURIK: Yep. ADAM KOCH: And then finally two other types of touch feedback worth mentioning– there's boundaries and communication. So if you look here at the left screenshot, it's kind of hard to see. If you get the slides after the show, you'll be able to see it a bit easier. But this is showing the edge resistance, when you swipe down and there's nothing more above the current list. So you've got this sort of blue glow showing here at the top left in Google Play.
NICK: It's like a force field you just run up against. It starts glowing. ROMAN NURIK: It's dissipating energy as its kinetic energy is turning into light basically. For developers out there, this is the edge effect. And edge effect compat classes that let you do this on custom views. ADAM KOCH: And of course, using standard views, you get all of this for free. It is worth remembering how it looks and how it behaves. Because you don't want to have, say, blue colors at the top there that might be clashing with it. NICK: But it's quite interesting that if you use an app when you can see that they've implemented their own kind of horizontal paging [? we're often ?] using, so another view page component. And it doesn't give you that feedback when you've reached the edge. It just kind of feels off, right? ADAM KOCH: Mmm hm. ROMAN NURIK: Yeah. ADAM KOCH: Definitely.
ROMAN NURIK: For sure. ADAM KOCH: And then in the second screenshot, it's the Gallery application. And when you swipe to the edge here, it kind of has a 3D effect where all of the different thumbnails kind of tilt to the side, again showing resistance. So this is more of a custom implementation, I guess. So you can definitely implement something custom. It's really up to you. Personally, I like the blue glow, as we've been talking about. But depending on the feel of your application, the gallery is very much of a 3D sort of feel of an application. So that's what's it's sort of appropriate here. And Launcher has something kind of similar as well. But the whole thing tilts. And then finally, I just wanted to quickly mention this. And this is fairly advanced. I can't imagine that many app developers doing this. But there's this concept of communication, so for touch gestures.
So in this example, Gmail– you've got the sort of swipe to delete or swipe to archive. As you swipe, you'll notice the actual item starts to fade out slowly as you move across more. And if you slide back again without actually completing the swipe, it'll fade back in again. So this is just sort of hinting to the user that this item's going to go away as you swipe it off the screen. So, again, this is pretty custom and probably more advanced. But definitely something to think about if you have these advanced gestures. All right. We'd better keep moving. We've got five minutes left. ROMAN NURIK: All right. So let's fly through Android design news. ADAM KOCH: [INAUDIBLE] ROMAN NURIK: We have like six or seven items.
But let's start with the redesigns of the Outlook.com map by Taylor Ling and Sam Nolte from holo there. Really awesome work. Sam even basically did a multi pane UI. He did a whole bunch of different screens. And Taylor also kind of had his own take on this app. And you'll notice that actually there are some similarities. There are some very obvious ways to map an older app to the newer holo style. And this is just one example of minor variations of that. And I think that they're both really good jobs there. Let's fly through to actually Uhani, in response to their redesigns. He also did a post on the [? alog.com ?] map. And basically he gave some anecdotal feedback, actually some real feedback, I guess, with some real data on how when you release an app that is using older, kind of gingerbread, even eclair, donut styling, for newer devices, meaning now if you released that sort of app now, users are going to respond very negatively towards that. So be careful while doing that if you're thinking about doing that.
NICK: Just don't do that. ROMAN NURIK: Just don't. ADAM KOCH: It's a easier way, yeah. ROMAN NURIK: And then one of the folks that submitted an entry for the stencil giveaway a few weeks ago, Gen Gal– he did a couple UI mock-ups for the Dribble app or for what Dribble could look like on Android. It's pretty cool. Nick, you want to add anything about this? NICK: Just that I want this. ROMAN NURIK: Yeah. I saw your comment, just want, exclamation point. Yeah. I feel the same way. NICK: Says it all, right? ROMAN NURIK: OK. Next up we just released yesterday the new version of the Maps API for Android. This is V2 of the API. It requires Google Play services. And that's all you need really. There's no separate bundle or anything. It's really just part of Google Play services.
And this is basically if you want to get vector tiles and 3D building facades and all of this cool new 3D maps stuff in your app, you should definitely switch over to this from the original map view. And this also works with fragments and support library fragments as well. So you get a lot of the benefits. Basically everybody's asking for this. And finally we're able to– ADAM KOCH: The big [INAUDIBLE]. NICK: So for designers, I guess the key takeaway is you can now have maps kind of throughout the application. Developers have complained and said, oh, that's really hard to do. That's no longer the case, as well as having some pretty advanced features as well, so having custom overlays and different shapes and boundary boxes and so on and so forth.
This really, really allows lots of really, really cool interactions with maps. ADAM KOCH: Yeah. I'm really excited about the different angles and panning and tilting that you can do. I think that's going to work really nicely with some of the apps that are out there. ROMAN NURIK: And remember, you can design custom marker icons. So the marker icons don't have to look like the teardrop shape or a little circle shape. It could use your branding if you want. It could be custom shape or whatnot. So lots of options there. And there's this new website, Androidviews.net, which basically has a list, a collection, of different custom views and different UI widgets and things. And this is kind of similar to the ultimate Android library, which is more broadly scoped. It covers libraries that are for image caching and all sorts of stuff. But this is very specific to UI widgets.
And it's a very nice presentation of the different UI elements you can use in your app. NICK: It's very pretty. But I'm not sure about that icon. It's like a steaming Android. ROMAN NURIK: Yeah. That's exactly what it looks like, a steaming Android. He's very angry. He's very angry. NICK: OK. Next. ROMAN NURIK: And, Nick, you want to talk about Marie's post? NICK: Yeah. So basically Marie is a regular viewer and active designer in the community is trying to get the community of Android designers to kind of coalescence and speak to each other a bit more. I certainly resonate with this kind of idea. I think when we were doing the design competition, there was a ton of activity going on on Google+ especially where people posting on the hash Android design and the hashtag. And that was really cool. I'd really like to see that continue. So Marie is trying to get everyone together.
So if you find this QR code and comment on her thread, she's trying to put together a circle of developer designer working with Android. So comment on the post. And we'll try and share that around, so everyone can kind of connect to each other and start talking about Android design. ROMAN NURIK: All right. So we're at 11 o'clock. Let's fly through the last couple of things. I recently did a blog post on designing for tablets. So if you're designing for tablets, which means hopefully everybody that's watching, check out this blog post. It will link you to things that you may not have seen before, definitely kind of a good resource for designing for tablets and even developing for tablets. And lastly, we recently put out a developer survey. So if you're an Android developer and you haven't filled out the survey and you are thinking, I really wish that the Google Android team could do this, this, or this, fill out the survey and let us know.
Thank you. And I think that's it for stuff for this week. As always, I am Roman Nurik. ADAM KOCH: Adam Koch. NICK: Bye. Thanks. Nick Coche. ADAM KOCH: Thanks, guys. ROMAN NURIK: See you guys. ADAM KOCH: See you later. ROMAN NURIK: Yeah. See you next time. Peace out. .