Android Design in Action: Stopwatches and Timers

[synthesizer music]
>>Adam: Hi, everyone. My name is Adam Koch. Welcome to the second week of Android Design
in Action. For those of you who don't know me, I work on the Developer Relations team
on Android here in New York. I'm joined by Nick Butcher in London. He is to my left over
there. How's it going, Nick?
>>Nick: Good. Good to see you, Adam.
>>Adam: So, thanks for joining us. For those of you who aren't familiar with the show,
the show is designed to follow on from Reto and Ian Ni-Lewis's show that they have on
Friday called the App Clinic where they look at a number of different apps. And what we're
trying to do here is re-imagine, redesign some of the screens in those apps. Nick, anything
else to add?
>>Nick: No. This is the second time we've done this show, so we're still feeling our
way around the best way to do things. So if you have any comments, feedback on what you'd
like to see, if there's something you'd like to see more of, then let us know. But yeah,
the real goal is to really use these make overs to demonstrate how you can use Android
design in your every day apps.
>>Adam: Yeah. And I want to give a special shout out to Jeff Posnick, who's actually
running all the fancy equipment for us today. You should listen in to his show as well on
the YouTube API which is generally weekly as well. One thing I did wanna quickly mention
is that some people asked some questions about how we set up the show and what kind of equipment
we're using here.
And I just wanted to say that we're using this really fancy tablet here--it's called
the Motorola XOOM--to show us our screen shots. And it's plugged into an HDMI and fed into
a central system here that loops in all the different video feeds. So with that, let's
get started. Today's focus is stopwatch and timers.
So, hopefully you watched the App Clinic last week and saw some of the apps that they went
over. Why don't we switch it over to demo?
[pause]
Alright.
>>Nick: Great, yeah. So, actually set it last Friday. Ian and Reto took a look at a number
of stopwatch and timer apps and gave their opinions on what they liked, what they were
looking for in their applications and what they didn't like. So, the first application
we're looking at here is called Hybrid Stopwatch and Timer. So this came out as one of Ian
and Reto's favorite applications.
They enjoyed the functionality and the design and the big feature graphic on their Market
page. So, what we've done here is we've taken a look at it and said, "Yeah, it's got some
pretty good functionality, but there's a few ways in which we'd like to see Android design
applied to it." So, taking a quick look at the screen shot here, you can see the stopwatch
page, which lets you start stopwatch using the big red button in the middle as well as
record a number of laps and resets.
And it gives you that timer up at the top and it shows you your latest lap time in the
orange bar just below. If you want to go to the subsequent page, on the right you can
see that it also lists out all the lap times you recorded during your session. So, we looked
at this and we, the first thing that strikes me really is it's quite what we refer to as
a skeuomorphic design.
So, it's really trying to imitate real life in a digital surrounding. While that can be
great for bootstrapping the user's mental model, it's getting them to instantly see
something familiar and recognize it, you have to be aware that when you use this kind of
design, it's also gonna bring across people's limitations of the physical world.
It's gonna start, if you have a book application that looks just like a book--a real book--you
can't really just copy the page, the text, or do a Wikipedia search for a certain word.
So, those kind of features might not become obvious, or might not sit very well with the
design, which is really skeuomorphic.
So, there's pluses and minuses to this school of design. It's also quite associated with
the IOS world. Another thing we notice is there's quite a liberal use of gradients throughout
the application. So, every bar and so on has this textured gradient feel, which is, doesn't
quite sit at home in the Android look and feel, the Holo design philosophy really.
And from a technical point of view we've noticed that it's not targeting the latest versions
of Android. So, it's using the legacy menu button, as you can see, emulated down at the
bottom. If you go to the next slide, Adam, you can see if you pop open the menu, they're
actually using that as one of the primary means of navigation.
So, this isn't really very advised. Not everyone's gonna look under the menu button for the navigation.
They might not even realize that there are other features in the application, such as
the timer. It has some advanced preferences in here. So what we'd really like to see them
do is move towards the latest APIs, which should be using an action bar to expose these
kind of functionality and navigation controls on-screen.
Also, if they target the latest APIs, they'd benefit from the latest Holo themes and styles.
So, things like the updated scroll bar styles and new text fonts and so on. They would benefit
from all these modern look and feel. How about that, Adam? Do you have any thoughts about
the look and feel of this, the Hybrid Stopwatch and Timer app?
>>Adam: Yeah, yes. So, to me, like the actual stopwatch itself looks quite nice. As you
say, it's trying to mimic real world object. But when they go and actually show the lap
times and then they have to reuse those gradients to really make it sort of look the same as
the stopwatch, that's when it, the design starts to fall apart if you ask me.
It just doesn't look quite as nice. It doesn't really fit with the Android system at that
point. So I mean, it's a choice every designer and developer needs to make when they design
their app. It's totally a valid choice if you think it serves your users better that
way, then that's totally fine. So, that's the design piece of it.
As far as the navigation or getting around the application, as you said, they're using
the old-style menus. And to me, that's not like a, visual design aside, navigation in
this app is very difficult. It's one of the reasons why the menu button has been deprecated
now. It's very difficult to find those additional features in the application.
And I think the guys mentioned this in the App Clinic on Friday, but not all devices
have soft, on-screen buttons on the bottom. So, for example, the HTC One X device will
show that menu button as a horizontal button, taking up the entire bottom portion of the
screen.
>>Nick: Yeah.
>>Adam: So, it instantly makes your application look not up-to-date, not using the latest
Android API versions.
>>Nick: The button of shame, I think they call it on the App Clinic, right?
>>Adam: [laughs] Is that what they call it? Yes, the button of shame.
>>Nick: So, what did we do with it?
>>Adam: All right. Oh, and I should mention that our favorite pixel pusher Roman Nurik
is off on vacation. I guess we let him have one day off from work. But he's here in spirit
because this design was actually something he worked on last week. So here we go.
>>Nick: Ta-da.
>>Adam: Ta-da. And reveal. So, I guess I can talk through the navigation elements first,
and then maybe Nick, you can add some comments. So, what you see at the top, you've got the
action bar, which we love, the anchor of the screen. You've got the icon in the top left
corner, the branding. And then, right next to that, you've got the top level navigation.
So, in this case, it's a spinner with the currently selected item, which is the stopwatch.
Right next to that you have an action item, reset, and the action overflow. And then what
we've done here is underneath, there's two tabs which are made to easily navigate between
the action timer itself and the different lap times, sort of list view collection of
a particular object.
And then, obviously, you've got the nice Holo theming throughout the whole application there.
It's worth noting that actions like stop and lap, they could be in the action bar, but
because they're so important and so critical to this application it warrants pointing them
out and having them in a more visible and easily accessible place. Nick, thoughts?
>>Nick: Yeah, so for me, this instantly jumps out as just feeling right at home in the Android
look and feel. I think the application of the Holo styling married with a accent color,
which we picked out from the original application, the orangy, browny color is from the original
application. We've used those to hint the default Holo widgets set and create the clock
face.
And I just think it instantly looks much, much more Androidy to me. So, like you said,
I like use of the action bar 'cause instantly it feels familiar to me. I instantly know
how to switch modes between timer and stopwatch just by looking at this. Incidentally, 'cause
this app has these two different modes you can run it in, timer and stopwatch, having
that name right up there in the title next to the icon is super useful.
So, if I am switching back to the application from resets, for example, I have the name
echoed back to me right there. So, straight away, I know which mode I'm in. I think having,
pulling out the lap times into a separate tab makes it much more visible. I don't have
to discover them under the menu and switch to them.
They're instantly there and just a swipe away so you can use the horizontal swipe to get
to them. So, it's really brought that functionality out. Looking at the stop and lap, I consider
that like this action bar almost. So, for me, it feels like an extension of the actions
in the application. But what's great about this is they've really pulled out the key
actions of start and stop into much larger tap target.
It makes the most important things you do in the app, like starting and stopping for
a stopwatch, super easy and like, front and center. The other thing I really like about
this redesign that Roman has done is the use of typography. So, this is something we keep
on going on about, but using different weights and colors of typography to give structure
and emphasis to the application.
So, I found in the old application, on the left-hand side, all those leading zero digits
I find add noise. So, I find it harder to read it and quickly understand the time. Whereas
in the redesign, using a different color or weight for the fonts, you can really make
the important information stand out.
[pause] >> Adam:Yeah, definitely
>>Nick: So, for me, that's some of the major benefits. One thing to talk about is we've
always not included the advert in the redesign, which obviously helps it feel a bit cleaner.
But thinking about that, I was thinking you could easily just include the advert when
it's in the non-running mode. So, for example, when you're actually using the stopwatch and
it's running, you'd be able to clear that away and have a very clean interface in the
down time when you're between actually running stopwatches, you could pop it in.
So if you go into the next page as well, we've taken a quick look at the lap times as well.
OK. So, Roman's done the same redesign, applied the same treatment to the second tap here.
So, here we can see, rather than using all these different gradients, we've gone for
a much flatter, Holo style again and really, really cut down on all the chrome and just
let the content stand out.
So, one of my favorite aspects of this design is the use of color. So, you can see here,
we've picked out using green and reds to show the fastest and slowest lap times. So instantly,
once you break away from the constraints of having all these, all this chrome, or the
gradients surrounding the content, it lets you do more interesting things with content
and lets it shine.
>>Adam: Yeah that's [ inaudible ].
>>Nick: Any more thoughts, Adam?
>>Adam: Yeah, so two other things I wanted to quickly mention. One, I really like the
share action directly in the action bar there, so you can quickly share out your lap times
and whatnot. I believe before it was in, OK. There was no way to actually share before,
I guess, using the regular menu but that's a really nice addition.
And the other thing is, a lot of people ask me about I guess second-level navigation or
how can I add a filter to my application to a list? So, for example, in a movie application,
you might have top movies and then you wanna filter by genre, but you wanna have it all
on the same screen. So, what was added here is a secondary spinner or drop down underneath
the action bar where you can choose lap time or total time.
And I think this is a really nice way of adding, easy way to change or filter the content on
that particular screen. It's really clear that it falls underneath the lap times on
the right side. It doesn't apply to everything. And it's just a really easy way and visually
simple way to tell the user that there's a way to change the visuals on that particular
screen.
The other option, which I've seen used which is also a decent option, is to actually put
something in the action bar, which is tied to the fragment that sits on that tab. It
could be like a little filter icon or something. And clicking that would again, pull a little
drop down which you could quickly use to change something on that particular screen.
>>Nick: OK.
>>Adam: What else?
>>Nick: I think also just having the laps and the stopwatch on the same hierarchical
level of each other on separate tabs is great 'cause you can obviously have the stopwatch
still running and switch over to have a quick look at the lap times you've done and switch
back to the still running stopwatch. And it's much, much more apparent that these are siblings
in that kind of hierarchy when they're on tabs, rather than the old design when you
were perhaps having to go in and out of different screens and you couldn't see those two elements
on the screen at the same time.
So I could see your way of, you could perhaps decorate the stopwatch icon in redesign, like
make it glow somehow or have a different highlight state to show that the stopwatch is still
running or stopped to indicate that at the same time 'cause it's on-screen.
>>Adam: Yeah, that's an excellent point. I guess one last thing I just wanna quickly
mention was--I think you mentioned this before--but the use of typography and also the font sizes.
For example, this screen where you've got the stopwatch and lap time. It's very small,
not much padding around it. It's kind of difficult to see, whereas in the redesign, you can very
easily make out lap time there.
And then, the same on this screen. You've got list view on the left side on the old
design taking up just three rows, yet it's hard to read the text. There's not a lot of
padding. There's not a lot of, it's visually not easy to break out.
>>Nick: It might be a case where you wanna look at the data, if you have analytics in
your application, and see how many lap times people often record and use that sizing information
to inform your decision. I mean, here we're making an assumption that five or six lap
times at most are gonna be shown, or else you might end up running out of room.
>>Adam: That's true. That's a good point.
>>Nick: Cool.
>>Adam: Excellent. So, should we move along here?
>>Nick: Yeah. So this next application is called Impetus and it's an interval timer.
So, it's an application for people doing workouts pretty much where you want to do repeated
intervals of workouts. So, we're gonna take a look at one particular screen in this application,
which is the edit screen, which lets you set up one of these interval sessions.
So, taking a look here on the screen on the left, you can see we're in an edit tab for
editing that particular set up. And it lets you enter a period for, of prep before your
interval training session and then a number of rounds of interval that you're gonna go
through, made up of work and rest periods.
And then a cool down at the end, giving you a total. And what happens when you edit these
values, each of these rows per se, a tappable clicking on which launches a pop-up you see
on the next screen, which gives you a spinner and the option to go back to the screen and
choose another time to set or use the arrow buttons to advance back or forth between the
different sections. So, taking a look at this, Adam, do you wanna give any initial thoughts
on this photo screen?
>>Adam: So first of all, they are using action bar and they have the design, tab designs
and whatnot there. So, that's a great start. I think the guys on Friday mentioned this
as well. As far as this sort of, I guess, work flow goes, going through and adding all
these things, to me it seems like a lot of work.
Like, a lot of tapping, a lot of changing. It's not really, when I see all these fields
and I know I have to configure them all, to me it's already in my head and mentally, it
makes it feel like a lot of work to me. I do like how they added the arrows, so that's
an attempt to make it easy to quickly navigate through the different things, but I'm not
sure if it like, really, it really solves the problem of quickly getting through and
configuring all these things.
>>Nick: To expand on that feeling hard, for me it's what you would refer to as a mode
problem because in the first sense, you launch the app. You come in and you see a particular
timer and then you have to hit the edit tab, which is like going into edit mode. So, it's
like you're already in mode on top of the standard timer. And then, every time you hit
edit, there's a pop-up which comes up on top, which is like a mode on top of the mode in
my mind. So, this is--.
>>Adam: Must go deeper.
>>Nick: When you're putting all these different layers on top of each other, you're asking
the user to hold a lot of state in their mind, which is what makes it feel hard to use or
hard to keep it all in your mind at once. So that's one of the main problems which we've
really tried to address with it. Some other minor stuff I wanted to call out from the
page as well is it had a good attempt to theming the Holo look and feel.
So you can see they've used the orange accent on the tap bar, for example, which picks out
the color schemes from their icon, which is great. But they haven't quite taken that further
throughout the application. So you see when the pop-up comes up to show the time. They're
using the standard Holo dark blue accents.
So, 'cause you have these two different color accents on-screen, for me that feels a bit
like a clash and that they haven't really gone far enough with the customizations. I'd
like to see that kept consistent throughout really.
>>Adam: Yeah, that's a good point. And just on that, they are using the dialog header
from the Holo theme, but then everything below that in the dialog just doesn't conform to
the standard Holo theme at all. You've got this custom time picker, which is lighter
in color. And then below that, you've got three buttons which aren't the standard dialog
buttons from the Holo theme either.
>>Nick: Yeah. If there's a dialog, I expect to see the button bar style where you have
just the outline separating like the OK, cancel buttons or whatever the buttons might be.
And another one--it might sound minor as well--but just looking at the main screen on the left,
the alignment feels really off. It feels like the total isn't aligned to the things below
it.
And then, within each of the rows, the text is hard-lined to the left and not quite center
aligned vertically. So for me, just looking at it, it just feels unwieldy. It doesn't
feel very regular or very even at all. There's no extra weight given to total, even though
that is, you know, totaling up what's going on.
And at first blush, it might not be obvious that rounds refers to, the eight rounds refer
to work and rest periods, but not to the cool down or prep. They're separate to those things.
There's no grouping or anything there. So, for me, there's quite a lot going on. It's
not particularly aligned to make it easy to scan and understand what's going on.
>>Adam: Yeah, and we have a recommended standard padding that you have in use around the different
text fields. And you can see here it's just the text fields are up against the sides of
the screen on both sides. So, some padding there would have definitely helped as well.
>>Nick: Right. So onto the redesign.
>>Adam: It's, here we go.
[pause]
Is that synced over for you now?
>>Nick: Yeah. I can see it now. [laughs] Cool. So, what we've gone for here with the redesign
is--.
>>Adam: Also, one quick thing. Our very own Nick Butcher did this redesign. So, good stuff
there, Nick. Go ahead.
>>Nick: In Roman Nurik's absence, there's a poor substitute there. I do with it what
I can. So what we've gone for here with this redesign is more like a wizard-style. So,
the idea here is that you come in to this summary screen showing you what's the summary
of the workout is and then you can swipe right, go through each of the individual sections
that you can configure, each of which contains a number picker letting you set it.
So, we've gone for like a scroll bar indicator at the bottom as well to indicate that there
is this horizontal scrolling affordance, very similar to the home screen, the default home
screen you might have in the launcher app on Android. And also, clicking on each of
the items would jump you to the right section.
So, the idea here is instead of having to go in and out of each of the sections with
dialog popping up, being dismissed, a new dialog popping up, being dismissed, you have
this one consistent wizard feel that lets you configure the whole thing. And then you're
done. And speaking of done, instead of having it as a mode within the main UI, it's a tab
within the main UI. We've launched this as its own separate activity and used a pattern
copied from contacts and calendar applications, where we had this done and discard bar at
the top.
So instantly, this bar stays the same and you know how to dismiss it and say, "Yes,
I'm done, " or "No, get rid of this." Have any thoughts, Adam?
>>Adam: Yeah. I really like the layout you've chosen here with the big edit timer. Sorry,
the little thing's coming off. And then you've also bolded and made the total time really,
really noticeable and easy to read. As far as the actual wizard goes, I think that's
a pretty unique take on it. There's something that's traditionally pretty mundane, like
filling out a bunch of fields like in a preference-style screen.
You've taken and really made it into something more interesting. So, just so I've got this
right, the initial screen is a summary and then you can either start swiping left, swiping
across to edit each of them one by one, or if you want to jump to a specific one, you
just tap on it and it'll slide across to the correct field. Is that right?
>>Nick: Yeah. Will you show us the next slide on the XOOM?
[pause]
>>Adam: Ah. Bingo.
>>Nick: OK. So here's an example. You tap on the rounds link on the center, for example.
It'll pan you across to the right page and you'll get a standard Android number picker.
And so, you can progress, keep on swiping across to go to the next one. And as you can
see at the bottom, there's the scroll bar affordance at the bottom, similar to the home
screen letting the user know where they are in the page, how far along they are, and also
just signifying that there is this horizontal swipe affordance.
>>Adam: Yeah. And I definitely like how it's its own screen rather than being a tab on
the main screen. As you were talking about modes before, like to me this is much clearer.
It's almost like when I'm viewing a contact or editing a contact, viewing a timer or editing
a timer. So I really like that. And then I noticed that you've got this standard system
number picker here as well, which fits in nicely with the Holo theme.
>>Nick: Yeah. Speaking of Holo theme, we've really gone for using just typography and
standard controls to give the application structure rather than having these bounding
boxes, which you used to have around the controls. So you can see we've used the different colors,
for example, like on total and edit.
It just give the, make those stand out as important sections rather than putting dividing
lines in and so on and lining things up, really. So, we've used the standard 48 DP rhythm here
to give the application this steady rhythm, which makes it much easier to scan and read
and understand what's going on very quickly and make certain things jump out, like the
total time.
We've also taken the orange accent color, which the original application used in the
tab bar, and run with it and really use that to theme everything. So, from the standard
number picker to the page title and the total bar, for example.
[pause]
>>Adam: Excellent. I really like it. One question, so around the done and discard, I think we
had a slide on this last week as well. Why the twist to show both at the same time rather
than, say, push one into the overflow menu?
>>Nick: So, I would say that really comes down to the expected behavior here. So, how
is the user gonna use this? If it's the kind of thing where they're gonna come in and then
once get rid of the, what they've done, is quite likely, then I think having discard
as a primary option works very, very well.
If it's something where they expect to back out and not have it discard what they've done,
but have it just cancel the edit--so think about editing a contact, for example--you
wanna have a big done button at the top, but you're very unlikely to want to actually just
completely discard, then that justifies putting it under the overflow.
The other option as well is obviously, 'cause this pattern takes up the entire action bar
at the top, if you did have other options, other actions, that you wanted to put under
the overflow button for example, you couldn't really have room for both the large buttons
and the overflow. So that's a case where you might wanna pick the most likely candidate
as a stand out one, like maybe just the done button and then have other options under the
overflow.
>>Adam: Yeah, that's a good point. And I guess, like, I don't know if this way that users
would, I guess you'd have to analyze how users use this application, but if it was unlikely
to undo via common action to discard what you find there, I'd say push it into the overflow
menu, have 'done' as the primary action.
That also means that, say, if the user hits the back button, they know that we're going
backwards and we're gonna save whatever state was there rather than not knowing if it's
gonna be done or discard.
>>Nick: Actually, my take on this was that this isn't the kind of application where you're
gonna install it. You're gonna go in and set up a bunch of interval times--these are the
workouts which I'd like to do.
>>Adam: Yep.
>>Nick: So you're gonna go in there and do a bunch of them. And you're probably just
gonna set them up and you're either gonna want to save it, say, "Yeah, that's it." Or,
you're just gonna decide, "Oh, no. That's not what I wanted." Discard it. Throw it away.
There's not actually gonna be a lot of curation.
You're not really gonna be coming in and out and changing it very much. So this is why
I went to the plain done and discard. If you did think that people were gonna be curating
them, using them a lot more, then you might go for the pattern with just the 'done' button
and discard under the overflow.
>>Adam: Excellent. Well, I think we're almost out of time.
[pause]
We don't have any more slides. So, any other last thoughts, Nick, before we call the show
for this week?
>>Nick: Yes. So, I wanted to use just a little bit of time that we have left just to go over
a few headlines in the world of Android design. Just pull out some activity that's been going
on in the community and really highlight it.
So, for me, last week we had an event here in London called DevFest London, which is
run by local Google developer group, which is awesome to meet up with a bunch of Android
developers as well as one of my favorite Android designers, called Marie Schweiz, who was over
from Berlin, who draws lots of cute Androids and was going around the Hackathon prettying
up everyone's applications.
So that was really awesome. But out there in the design world, I also wanted to call
out an excellent blog post I saw last week from Juhani of AndroidUIPatterns.com. It's
a fantastic blog. He did a great job of putting together a bunch of community tools which
have been out there, put out there for helping you to customize the Holo controls as well
as using the assets you go to create a Holo-looking icon and the action bar generating studio
to customize your action bars.
So, he did a really, really nice post pulling those three brilliant tools together, showing
how you can use them in conjunction to customize your app. So check out AndroidUIPatterns.com
for that post.
>>Adam: Excellent. And this is not really new news this week, but something I just did
wanna quickly mention is the draw pattern, which is becoming very popular recently. For
those of you who don't know, there actually is a section up on the design site. It's under
the action bar page which has some information on our best practices around implementing
a draw, how it should work.
If you are building draws out there, I would encourage you to look at that and try and
follow those guidelines before everyone implements this pattern and does it differently. It would
be good to standardize around that. We don't have any code samples out at the moment for
the best practice pattern, but at least the design site's been updated with some information
there.
>>Nick: Yeah, I'd say for the major takeaway for the draw pattern is look at the YouTube
application, is the best way right now. The best example we have is implementation.
>>Adam: Yep.
>>Nick: So, our advice is that the draw shouldn't move the action bar, 'cause that's such an
important anchor in your application, that you shouldn't be really shifting that in and
out of the way. And the draw should come from underneath that. And also the draw should
only be available from top-level navigation items.
So, once you go down in your view hierarchy, you shouldn't have instant access to it or
else it just ends up as like a bag of links rather than having any kind of structure to
it. So those are my major takeaways and tips for implementing your draw patterns.
>>Adam: Fantastic. Alright. Well, we're out of time. Thanks for tuning in and we'll see
you next week. See you guys.
>>Nick: Cheers. Bye.
[synthesizer music]