Android Design in Action: Transit Apps

[MUSIC PLAYING]
ROMAN NURIK: Hello, and welcome to
Android Design in Action.
This is our first episode of this brand new show.
My name is Roman Nurik from the Android Developer
Relations team.
We are broadcasting here from New York City.
We're also joined by Nick Butcher, who is, I guess, to
my screen left.
And he's coming from London.
Nick, you want to say hi?
NICK BUTCHER: Hi.
It's me here.
ROMAN NURIK: And we also have a special guest in the back,
Adam Koch, also from the New York Android Developer
Relations team, and he's producing the show today.
He'll be providing some color commentary here and there as
he sees appropriate.
And yeah, so that's the team kicking off this very first
Android Design in Action.
Now, I'm guessing many of you don't really know much about
the show since this is our first time and we haven't
really talked much about it.
Very briefly, I just want to talk about a brief history.
So, many of you are already followers of
the Friday app clinic.
And in that app clinic, some of our teammates, including
Reto Meyer, Daniel Pham, and Ian Lewis, they look at apps
that are nominated to the team through Google Moderator.
They look at those apps, and they inspect ways in which
they can improve the apps.
They look at what potentially could be fixed, what the apps
do wrong, things like that.
And so this show is basically a spin-off show to look at the
design, specifically to look at the visual and interaction
design aspects of some of these apps and see how those
can be improved.
So today in this first show, we're going to look at three
apps from the Friday app clinic.
We're going to look at the London Underground app, the
London Bus Checker app, and m-parking.
And we're going to look at specific screens from those
apps and look at how we can kind of reimagine or rework
them to better follow our guidelines from the Android
design site and, in general, how to just overall improve
the design of the apps.
So with that, let's get started.
Let's look at the very first app.
We're going to switch to the demo here.
And you could see that we're using a fancy little setup
using Dropbox, thanks to the developers of the Dropbox app.
We're going to look at the very first app, which is
London Underground.
So this is actually one of the screens from the app.
This is the live information screen.
You get to this screen from the top-level one.
There's this little icon.
It's kind of like an exclamation point that gets
you to the screen.
And it basically tells you the status, the state of the
different lines on the Underground.
It gives you things like access to weather.
If you look down here, it gives you access to weather at
the very bottom.
And then it also tells you the current departure boards.
And then it actually even notices-- and this is
something that I noticed checking in from New York.
It notices that you are not actually in London, and it
notices that you are in New York City.
And it says, hey, we actually have an app for that.
We have a New York City version of this app available.
And that leads you to the Play Store to get that version.
So it's a pretty straightforward screen.
Nick, do you have any initial comments on the screen's
usefulness since you are coming from London?
Do you have any idea on--
NICK BUTCHER: Yep.
I feel privileged today doing two London-based apps with me
here in London.
I think when I look at this screen you pulled out, the
first thing I think is, it's fairly iOS styled.
That's my gut reaction when you have kind of the rounded
white sections.
That's the first thing that jumps out at me, really.
They have made an attempt to adopt some things, like we
have an action bar, although it's using some slightly
non-standard styling there, which we'll get into later.
But yeah, the first thing that jumps out
to me is the iOS-ness.
ROMAN NURIK: Yeah, absolutely.
And you could tell just by, like you mentioned, the kind
of rounded, grouped list items and then this gray background.
So, yeah, there's definitely kind of a styling from a
different platform.
So that's one of the first things you'll notice that in
the redesign coming up, one of the first
things that we changed.
The thing that stuck out to me was there's a lot of space
dedicated here to showing all the different lines, all the
different lines of the London Underground, for example, the
Bakerloo, the Central, the Circle Line.
And all of them have good service.
So it seems like it's just showing a lot of information
that's the same.
It's not really useful information, seeing that
everything is good service.
So if I'm, say, taking the Waterloo line, you'll notice
here in the second screenshot, this is kind of the
scrolled-down version.
If you scroll down, then you have to find Waterloo and then
and only then see that there's minor delays.
So that was one thing that stuck out to me, that to see
any actual--
I guess actionable information about the status of certain
lines, you have to scroll, and that's never a good thing.
NICK BUTCHER: Also, for me particularly as a Londoner, if
I'm pulling out this app and going to the live Information,
it's probably because I'm heading towards a specific
line and I want to know if there's anything going on.
So I want that information first and foremost
right at the top.
ROMAN NURIK: OK, so let's talk a little bit about some of the
other interactional elements.
So the first thing that-- well, one of the
first things that--
one of the second things I guess that I noticed was that
there's no up button, right?
So this is a subsequent screen.
So there should be some way of getting up in the
hierarchy of the app.
So there's an icon here, but there's no up-caret indicating
that you can go up.
The other thing is that the action bar has a bold title.
And while that's sometimes OK, while that's often OK, it's a
little nonstandard.
So it kind of takes away some of the visual attention from
the content of the screen.
And, also, this is kind of curious.
There's an update button somewhere in the middle here.
And really that's probably something that should be kind
of like a refresh action, potentially in the action bar.
So with that--
NICK BUTCHER: Do you mind if I comment here--
ROMAN NURIK: Yeah, go ahead.
NICK BUTCHER: On the action bar icon, it doesn't really
come across in the screenshot, but the highlight is
nonstandard as well.
So when you touch the icon, the highlight behind it is
kind of tall and narrow.
There's a very--
nice zoom-in.
There's a very standard size and shape that you would
expect with these controls, and that's part of the
importance of the action bar, that it's very
familiar to the users.
So every time you kind of deviate from that standard
size and shape, then all of a sudden, it's introducing like
a cognitive speed bump to the users, where something just
feels slightly off.
ROMAN NURIK: Yeah, absolutely.
NICK BUTCHER: So it sounds nit-picky, but I think it
really contributes to making your app feel
very easy to use.
ROMAN NURIK: Yeah.
And the last thing I want to point out before we jump into
the redesigned version is the Send Us Feedback link.
Generally, for things that are secondary, things like
settings or send feedback, or log out, or things like that,
we generally try to put that into the action overflow since
that's really what it's for.
It's for actions that users wouldn't really use on a
regular basis.
So if 10% of the time, even 1% of the time they're going to
be using Send Us Feedback, you may want to just come up with
the action real quick.
So moving on, we're running a little short on time, I guess,
for this part.
Let's jump into the redesign.
So this is a reimagined version of this screen.
And I'm going to quickly zoom in here.
So you'll notice that we've changed some of the colors.
One of the things that we started with was the dark
action bar theme.
And this isn't something that you should do for any app, but
it kind of conveys a pretty nice contrast between actions
and screen content.
Also, we put weather as a second tab that you can swipe
over to since weather is potentially something that is
fairly important.
This isn't necessary, but it is a nice touch.
The other thing you'll notice here is that we took that list
of all the different lines, the Circle Line, the Bakerloo
Line, the District Line, and we collapsed it only into what
the user wants to see, which is exceptions.
Exceptions to the almost always well-running London
Underground.
So in this case, you notice that--
NICK BUTCHER: [CHUCKLES].
ROMAN NURIK: Is that true, Nick?
Does the Underground actually run pretty well?
NICK BUTCHER: Yeah.
It's running great.
Underground is running great.
ROMAN NURIK: Awesome.
So right now I'm guessing that you would see no
exceptions in this tab.
So you see that you Circle Line is closed, and this is
just an imaginary situation.
If the Circle Line is closed, there's a little bit of
iconography to indicate that on top of the yellow color for
the Circle Line.
And then minor delays on the Waterloo Line, you would see
that below.
And you'll see that we actually use Holo styling
throughout.
We use these standard list headings that have this all
caps twelve-SP text.
And then below those two exceptions, we actually just
say as an additional confirmation to the user that
all the other lines have good service on them.
The other thing I will quickly point out here is that for the
traveling in New York City, I guess, the toast or pop-up,
that's kind of an exceptional case that
rarely happens, likely.
So what you may want to do there is actually just show up
a kind of like a bottom toast or a bottom bar that slides in
and lets the user take action.
And if they don't really care about New York City, if I just
happen to actually open the app in New York City, just
press the X to dismiss that and never
show it to them again.
So, Nick, with that, do you have any thoughts on this?
NICK BUTCHER: Well, it immediately just feels much
more like at home on my Android device.
It feels like it fits in with the system look and feel using
the Holo styling.
I especially like the use of color.
It really made the pertinent information jump out to me.
The things I care about when I'm opening the line's status
is what is closed?
What's going to be delaying my journey?
I think what it needs to be is where it points to the app
where it pops out to me now, so that's my favorite
takeaway from that.
ROMAN NURIK: Awesome.
The other quick things we'll point out before jumping into
the next app is that there's a refresh button here in the
action bar to convey that you can refresh
everything on the screen.
And that's the standard place to put something like a
refresh on Android.
And then for the other piece, the View Departure boards over
here, we moved that as well into the action bar
as an icon up top.
Oh, and Adam points out that we should
probably mention the ad.
So you'll notice that in the original screen here, there's
an ad at the bottom.
There's nothing really preventing you from using that
same ad in the bottom here.
The only thing that really would detract from it is the
traveling in New York City banner.
But in that case you may want to consider that's really an
ad for yourself.
That is effectively a house ad.
So maybe that could cover up--
or if that is the case, if you are traveling in New York
City, hide the other ads and show this house ad.
And when you dismiss, maybe show the other ads.
So that's, I think, it for me.
Nick, any parting thoughts for London Underground?
NICK BUTCHER: I think just if you take a look at these two
snapshots next to each other, you can notice that there's
much less chrome around the content.
Instead of using bounding boxes and different background
colors to give the app structure there, we've used
typography and consistent spacing to really convey the
same information in a much cleaner way, which to me makes
the content pop our much more also.
I think this side by side really sums up the Holo design
philosophy very nicely.
ROMAN NURIK: Awesome.
All right.
So, with that, let's move on to the next app.
The next app is m-parking.
And so this app basically--
I don't really know how to use this app, because I think
parking in the States works a little differently.
Nick, any thoughts on m-parking?
NICK BUTCHER: Yes.
So here in London, there's a few schemes like this, where
you can pay for your parking fee by sending an SMS to a
certain premium number.
And that will-- you basically SMS them your vehicle
registration plate, and that'll give you parking for a
period of time.
So this app lets you set up certain zones which work with
it, with the appropriate SMS numbers attached to them.
And then you just hit a button, and
it sends this message.
ROMAN NURIK: Interesting.
So and you've tried this out.
At what point did it actually send the SMS?
Was it outside of the screen?

NICK BUTCHER: So this screen we're looking at now is one of
the set ones.
This is where you actually configure the parking zone,
where you enter in the number that you need to SMS to and
how long that kind of covers you for.
So once you've configured this, then on the very home
screen, it'll show all the zones you've configured and
the car registration numbers you've saved.
So the first thing you see when you open the app is you
just hit one of the zones you've saved.
And it'll send a message and basically
give you parking access.
So this is one of the setup screens you would go through
in configuration.
You have to do this step.
ROMAN NURIK: So basically, you wouldn't use this on an
everyday basis.
So things like speed, in general, if you're using
something on an everyday basis, you want to minimize
the number of inputs.
You want to make it quick and easy for the user to just fly
through and obviously not make mistakes.
But this is kind of an auxiliary screen, right, Nick?
NICK BUTCHER: Yeah.
I could imagine you probably install this app and configure
three or four parking zones which you primarily frequent.
ROMAN NURIK: OK.
So let's talk about what we would change in this screen.
So the first thing that jumped out at me was that
there is a Save icon.
And in general, barring the whole discussion of whether a
floppy disk is actually a useful metaphor these days for
Save, there's two ways to basically leave this screen.
Actually, three ways if you count the back button as well.
And this is something that I recently posted about in a
post about the Done button.
We'll talk about that in a moment.
So, basically here, I can press Back, or Up, or Save to
basically get out of this screen.
And it doesn't seem to be a--
it doesn't seem kind of like a specific affordance for
discarding changes or reverting.
That's a whole issue in itself.
But that was the first thing that stuck out to me, that
there's a lot of ways to save and get out of this screen.
The other thing is that just purely from a visual
standpoint, the blue action bar and the blue screen
content didn't really mesh well for me.
Generally, in this kind of app, where you're entering
data, lots of data, you probably want to use a lighter
background.
I think the darker backgrounds, like a black or
the Holo dark theme, those are best used for media apps like
Gallery or playing video.
And so when I'm entering text or entering data, it seems
like it's a better fit for a lighter theme.
The darker color action bar, the blue action bar, is fine
for branding.
But that's just one of the first things that jumped out.
The second thing was around visuals.
So you have labels here, like name, SMS number, price,
things like that.
So the problem there is that they're not really aligned
with the content itself.
So you have, I'm going to butcher this, TariffBreak 1
and then the SMS number, and they're not visually aligned
with the rest of the text.
So that was another thing.
And, lastly, I just wanted to point out that this color
chooser seems a little simplistic.
You actually can't tell this from the screenshot, but the
background color is the currently selected color.
So if I touch yellow here, it would actually change the
background color of that to yellow.
So that's not a very common way of indicating selection.
So with that, Nick, any thoughts on this screen?
NICK BUTCHER: No, you've pretty much nailed it.
I think they've basically taken the color palette from
the iPhone and run a little bit too far with it in my
book, especially when they haven't customized the Holo
control fields, where I find that the blue underline in the
text boxes doesn't really contrast highly with the
background color and making the focus get
lost a little bit.
ROMAN NURIK: Absolutely.
And actually, I just want to make a callout since you
mentioned that, Nick.
Someone-- and I forget your name, I'm very sorry.
Someone has actually recently created a generator for
styling, for Holo styling.
So you can just punch in a few colors and you can generate
all the different assets for buttons, for text boxes,
things like that.
If this developer wanted to disregard our feedback about
the light color and wanted to have a lighter color for the
text field, the little bottom bar, they could use the Holo.
I think it's called a Holo style generator.
We'll link to that afterwards.
OK, so let's jump into the redesign.
So here's a redesigned version of that screen.
You'll notice immediately that we switched from using Save
and Up to a single Done button.
And this mirrors what you would see in the people app,
for example, on Ice Cream Sandwich and later.
So when you edit a contact, you're presented with this
similar screen for entering data.
The other thing we did here was that we took the city, the
location, and we used-- and this is, I think, one of Nick
and my favorite things to do is turn it into a Roboto
Light-- or actually in this case, maybe
even a Roboto Thin--
large text to indicate that this is the current general
vicinity that you're working with.
The zone you're editing is in Berlin.
The other thing you'll notice is that we've realigned all of
these labels.
Actually, we removed the name label because it's almost
self-explanatory that you're currently editing this
specific zone.
But we took all the other labels like SMS number and
period suffix, and we aligned them with the content.
And this is something that is a little tricky to do with the
framework currently, but it's something that you can
actually do correctly with a couple of
tweaks to your padding.
The other thing is that we dropped period suffix.
So if you'll notice here, period suffix was to the right
of SMS number.
And that conveyed-- to me at least, it conveyed a sense of
sequence, so that the period suffix is almost the suffix to
the SMS number.
And, again, speaking-- this is coming from somebody who
doesn't really know how parking in Europe works, but
it was kind of a weird connection to make, that
period suffix was after the SMS number.
So we moved that down to the bottom.
And then, lastly, we made this color changer.
I'm going to actually switch to the next slide.
We had this color changer so that when you touch it, it
gives you a dropdown of the different colors you can
choose from.
And then you can select which color you want to change to.
And it shows a little blue rectangle around the currently
selected color.
And then it also lets you discard changes if you select
the action overflow.
It lets you discard changes that you've made here.
So that's a high-level summary of what we've done here.
Nick, any thoughts?

NICK BUTCHER: Yeah.
Immediately for me, I find the light theme works very well
for the data entry screens.
It's very easy on the eye to scan and enter quickly and
just lining everything up.
I mean, it makes this screen flow a lot more with much
better ribbon.
Like design is going to talk about grids and patterns and
ribbons and stuff like that, but basically it just means
line stuff up and use the standard pattern.
I mean, it's a program and we can then work
with that in structure.
And it just helps make things really easy and quick to scan.
ROMAN NURIK: Yeah, absolutely.
NICK BUTCHER: And I think all of these patterns as well,
like one of the most important things in this input screen as
well is using the appropriate input types.
So this is a field you can set on your edit text to hint to
the system what kind of data is going to be input.
So you can say it's going to be a number field
or number of decimals.
Or it's going to be a proper name, where it might
capitalize every letter.
And I think that's really critical for making the
screens flow very fast and making you very productive.
So the developer's not done too bad a job.
They've set a number of input types in a couple of the
fields, but not all of them.
So I'd like to see those used throughout.
ROMAN NURIK: Yeah, a very good point.
I do want to just add on one little point to the line stuff
up point you made there, Nick.
In a recent Google I/O video, I believe it was Advanced
Design for Engineers, Christian Robertson, who is
the lead visual designer for Android, he mentioned this
kind of concept of lining stuff up as part of the
discussion of a gestalt principles, or "jestalt"
principles.
I don't know how to pronounce it.
But that was something that definitely stuck out.
Line stuff up is a very, very kind of easy way to make
things instantly look cleaner.
NICK BUTCHER: I think that's where I
borrowed the line from.

And I just want to echo, again, the
use of Roboto Light.
Typography can really, really help give structure and
emphasis to your application, and I think this is a great
example of setting it like a header and it really popped
out clearly in that.
ROMAN NURIK: Yeah, totally.
Adam had a point about discard.
Adam, what was that point, again?
ADAM KOCH: I was just looking at the screen.
You've got discard in there, too.
ROMAN NURIK: Oh, yeah.
So Adam was just pointing out that we also
have discard, right?
So in the previous screen, there wasn't
really an obvious way--
when you press Back or Up, it's really up to the
developer to decide what to do there.
We don't have strong guidance on whether Up
or Back should save.
It generally should.
In cases where you have really, really destructive
operations, if Save is a really destructive operation,
like it posts a tweet or something, or it posts to the
entire world, you probably want to have some sort of
confirmation or something.
But having that discard in the action overflow gives that
extra sense of certainty as to what that action will do.
So moving on to the last app, we're going to look at London
Bus Checker.
Actually, Nick, since you're in London, do you want to just
briefly talk about what this app will do for you?
NICK BUTCHER: Yeah, absolutely.
So it's an application to find the nearest bus stop to you
and tell you the routes of those buses and how long
you'll have to wait until the next bus arrives.
ROMAN NURIK: OK, awesome.
So it's basically exactly that, it tells you where--
it's your guide to the bus system in London, effectively.
NICK BUTCHER: Yes.
It slides into the system.
When you go to a bus stop, it tells you, you have five
minutes to the next bus.
But not every stop has that, but apparently there is
information.
So this app's actually super-handy around London to
find out how long you're going to have to wait for a bus.
ROMAN NURIK: Awesome.
NICK BUTCHER: So I use it.
I paid for this app.
I bought it.
ROMAN NURIK: So Nick is an avid user of this app.
So let's see how we can fix this UI, and not really
necessarily fix, but improve.
So one of the first things that I notice was that this
map dropdown, and the zooming is kind of wonky right now.
This map dropdown, this spinner, is kind of off in its
own place somewhere in the middle of the action bar.
I don't know if that's intentional or just because
the logo's really wide.
But that's kind of like a weird place for it.
Also, the logo here, the placement of the logo in the
action bar and the blue, I guess, Holo dark border at the
bottom of the action bar just seems kind of out of place,
especially in such a visually rich app like this.
The other thing I'll note is that these buttons here kind
of have styling from a different platform.
And you can't see this in the screenshot, but touching on
the bubble doesn't actually do anything.
To see the details for that stop, you have to touch on
this blue button here.
And then this is basically a shortcut to see the bus route
map for that stuff.
NICK BUTCHER: Yeah, just one thing, the bus route is
actually one of the most useful functions of this
application.
You can walk up to a random bus stop and hit the route
button and see exactly where that bus is going to take you.
But I don't know whether it's at all conveyed, but it's got
it on the left in the bubble and then repeated in this
action bar at the bottom with the kind
of three dots connected.
It did this on the screen route to me.
ROMAN NURIK: Yeah.
And the other thing is that, maybe it's just me, but it
resembles sharing.
So the Share action icon, and this is something that users
of ICS devices especially are extremely familiar with Share.
It's used throughout the entire operating system.
And the icon for Share is basically this icon with
filled circles and flipped horizontally.
So it may just kind of convey that unintentionally.
So that's another thing that jutted out, was that it just
seems like a version of Share, but it's not.
It's completely separate.
It's a route map.
NICK BUTCHER: And actually, they are
straight off another platform.
ROMAN NURIK: The other thing is that, again, you can't see
this in the screenshot, but the bottom icons are blurry.
They seem to just be either MDPI or HDPI resources.
You should really-- and this is just for
everybody out there.
You should really provide XHDPI resources for your apps.
Because lots and lots of devices that are out now and
coming out, they have XHDPI screens.
So, with that, any parting thoughts, Nick,
on the current screen?
NICK BUTCHER: No, let's go straight into the redesign.
ROMAN NURIK: OK.
So the redesigned version is here.
You'll notice immediately--
maybe I should just stop zooming and let the
camera do its trick.
You'll notice that immediately here, we got rid of the
branding up top.
And this is kind of controversial.
A lot of folks may think, oh, but I want my brand to be
visible at all times.
But you have to remember that this is an application that
users use every day.
If they're launching into your app, they probably know that
they're using Bus Checker.
So it's not necessarily--
it's not necessary to always show your brand name.
Sure, you can show an icon.
I mean, if an icon represents your brand really strongly,
then show it.
In this case, just to me personally, the icon has a lot
of different things going on in it.
And so it doesn't seem like a great
representation of the brand.
And so what we did instead was we thought maybe let's pick a
strong highlight color, a strong accent color to
represent the brand better.
In this case, we just chose a reddish pink.
And you could see that in the action bar there's kind of
this reddish pink outline underline.
And then in each of the markers in the map, it also
uses that color.
We also decided to show some additional branding in the
background of the tab bar.
So basically, you see the TFL logo there.
You probably shouldn't use the TFL logo as-is, but that's
just an example of somewhere where you can put some sort of
square-like branding.
Additionally, very quickly, since we're running low on
time, we put the Locate Me button in-line in the maps
since that's something that users of Google Maps will be
accustomed to.
We've also simplified some of the icons at the bottom.
We've changed the icon for the route map to an actual map.
And this is actually based on some iconography from--
blanking on his name, oh my God, Nick.
NICK BUTCHER: Guenther.
ROMAN NURIK: Say again?
NICK BUTCHER: Guenther.
ROMAN NURIK: Guenther.
Yes, absolutely, Guenther.
Guenther from Germany.
I feel horrible, Guenther, if you're watching.
Sorry for forgetting your name on the spot.
But Guenther has provided a couple of icons.
I think they're called androidicons.com or something.
He's provided a bunch of additional icons in addition
to the action bar icon pack.
And so this is based on a map down there.
And so this conveys a map of a route.
You can't really see it in the icon, but it's got two points
with a route in between.
And then lastly, here, we've changed this pop-up bubble so
that it uses a styling very similar to the Maps app.
And touching on the entire bubble will take you to the
details as opposed to having this kind of
separate icon here.
And then there's this additional action button that
takes you to the route map.
So that's a very high-level redesign.
Nick, any thoughts?
NICK BUTCHER: Yeah, one of my favorite changes here is the
use of the overlay action bar as well.
I think that really-- with the map application especially, it
really, really stands out, that you get to see this kind
of a whole larger canvas across the way.
So I think that works really well here as well.
ROMAN NURIK: And Adam pointed this out as well.
So you could see here, what we did here was we used, not a
black action bar, but I think it's like a 111 or a 222 hex
color with opacity.
So even setting the opacity to like 90% and using it like
Nick mentioned in overlay mode, gives the feeling that
the entire screen is really your canvas.
The map moves across the entire screen.
So that definitely helps convey a sense of content is
in front of you and infinitely pannable, basically.
OK.
So, it's 11 o'clock.
I think that's it for this week.
But before we cut off, any parting thoughts from Nick,
first, and then I'll go after.
NICK BUTCHER: No.
I hope that this format's working well for everyone.
But I think it's a really good way to demonstrate a before
and after, a good way to demonstrate the strengths of
designing for the platform and how you can really remake your
application to feel right at home on Android and therefore
feel easier to use it.
So, yeah, I hope you guys enjoy it.
ROMAN NURIK: Yeah.
And I just want to mirror that.
Absolutely, if you do like the format, definitely provide us
comments, either on the event or in any of the related posts
on the Google+ page for Android developers.
And if there's anything you'd like to see changed or
anything you'd like to see in the future, added or whatever,
definitely let us know.
Like we mentioned at the very beginning, this
is a very new show.
So we're still exploring different ideas, different
ways of getting design in your hands.
Design in action.
So, let us know and thanks, everyone, for tuning in.
And we'll see you next time.
[MUSIC PLAYING]