Android Design in Action: Messaging and Community Designs

Uploaded by androiddevelopers on 13.11.2012


ROMAN NURIK: Hello, and welcome to "Android Design in
Action." My name is Roman Nurik.
ADAM KOCH: Hey, guys.
Adam Koch.
ROMAN NURIK: And unfortunately, Nick Butcher is
stuck at Devoxx and trying to figure out a way to join us
via Google+.
So he may join at some point, hopefully quite soon, but
we're going to give him a few extra minutes.

For those of you who are new to the show--
ROMAN NURIK: It seems like Nick is joining.
Has Nick joined, Producer Pete?
Nick has joined.
Hopefully, he can hear us.
Can you hear us, Nick?
ADAM KOCH: There he is.
NICK BUTCHER: Yeah, I can hear you.
Can you hear me?
For those that weren't watching, we were having some
trouble getting Nick connected.
But Nick is now connected live via Devoxx.
Nick, you want to do a quick introduction?
NICK BUTCHER: Yeah, absolutely.
So I'm here at a Devoxx conference in Antwerp.
So it's been a fantastic kind of Java-based conference.
So hearing about things related to the world of Java
and talking some about Android.
We did delivered a code of that yesterday telling people
how they can sync data between their Android apps using
Google Drive in the background.
It was also cool to hang out with some of the Android
framework engineers like Romain Guy and people like
that and hear about all of the latest improvements in the UI
toolkit, so pretty nice conference.
And we're very envious that we can't be there with you, Nick.
But we're hoping you guys are having a great conference.
So for those of you that are new to Android Design in
Action, in this show, we look at existing apps.
And sometimes we look at existing categories of apps
and look at what types of design renovations or design
re-imaginings we can do for them.
On this episode, we're going to cover instant messaging.
And we're not going to go too deeply into that because we
have some more important stuff to talk about, and that is a
community redesign.
So last week on "Android Design in Action," we gave
kind of a mission, a challenge to the community to take an
app that you've seen before and potentially that you maybe
don't like the layout for and rethink
it, redesign it yourself.
Use your Photoshop skills, use your sketching skills and put
up a public redesign of that app.
And we've gotten a lot of contestants--
well, actually not really contestants, a lot of entries.
And we're going to take a look at some of those today as well
as talk about VIA, the tablet UI stencils that we promised
to give away before.
So let's get started and jump into instant messaging.
So rather than take a look at existing apps like GroupMe and
Trillion that were covered in last week's App Clinic, we
wanted to think of what would a hypothetical, awesome IM
client or messaging client look like.
And so we came up with a few screen mocks for what that
could look like.
We didn't give it a name or anything, so it's just called
hypothetical messaging app.
And you can see here this is kind of one of the key Hero
screens for the app.
It's basically the conversation view.
In this view, you're communicating with a bunch of
different people.
In this case, you're Luke Skywalker
talking to all your friends.
And the point here is that we didn't want to really
emphasize all the Chrome around the instant messaging,
like all the action bar stuff and the action buttons that we
talk about usually.
We really wanted to focus on how you present the content.
So here you can notice that there's three different types
of content, really.
There's rich information about a place that you've shared, a
rich kind of audio snippet with transcribed text, and
then a bunch of photos that you've submitted.
So that's at a very basic level what this
screen shows you.
And it's really just a conversation view.
You guys have any preliminary comments before we keep going?

I have something quick.
I just really like the fact that there's rich content
included here directly.
I think we've moved beyond having just text in instant
messaging clients.
And now we have phones, which you can take pictures, you can
record audio.
Obviously, sharing places is very important.
So I just really like how it's sort of different content
types are being brought out here.
ROMAN NURIK: And a lot of this isn't new.
Existing apps like GroupMe already do this.
So you can share your current location or--
actually, I don't know if you can share a place, but I think
you can check in with Foursquare, for example.
And you can also share pictures.
So existing apps do this, but what we'd really like to see
is more and more apps doing this.
Because it's no longer, like you said,
Adam, about just text.
You really want to share content or objects.
In the next screen, you'll notice that when you touch the
little attach icon on the bottom left, you could be
presented with things like take a photo, record some
audio, and then maybe automatically transcribe it,
and then obviously, attach location, things like that.
One of the coolest things that I really want instant
messaging clients to start thinking about
is streaming video.
And this is kind of interesting because you have
things like Google+ Hangouts where you can basically create
a shared meeting space with your friends and with your
family and all be on video at the same time.
But for some reason, I was thinking about, like what
about those push-to-talk days?
You know Sprint, Nextel, where you'd push, say something, and
everybody would hear it streaming live.
What if you could do that with video?
So I did a quick mockup.
Let's just skip this one.
I did a quick mockup of what that could look like.
I guess you press the attach icon, and select stream video
from your camera.
It immediately changes the compose box into basically a
preview of your front-facing camera.
As you're talking, it's streaming live in the stream
of the conversation to everybody else.
And then for you as the recorder, you just see this
live token in the stream.
And then maybe as people are saying stuff, as they are
responding to your video, they can type and type and type,
and it will maybe stick your video feed to the
top of their window.
That wasn't mocked up, of course.
ADAM KOCH: So just to be clear, the video's actually
playing in line in the conversation with you, right?
ADAM KOCH: And would there be like a full
screen mode as well?
Yeah, so, I mean, we didn't mock this up.
I think if we had some more time, we'd totally do this.
But the idea would be like you're streaming video.
It's not like--
actually, it is recorded, so after you press this check box
to indicate that you're done, that video is just a token
that's playable, kind of like a YouTube video or whatever
that's attached.
But in line, in the stream, if somebody's currently streaming
video, you can watch it in line or full screen it.
So this is something that I just haven't seen other apps
do, and I think that it's something that--
like think about ways to compose rich content, not only
view rich content, but compose it.

In another one of these screenshots or mocks, you have
this kind of composition window that can accept tokens.
So let's say you paste the URL.
What if you just paste the token indicating that this is
a URL object?
And maybe a place is also kind of like a place token or such.
This is just something that I think folks
should think about.
ADAM KOCH: Yeah, I think it's cool because--
NICK BUTCHER: Is the idea with the images as well that you
can scroll those in line?

Where is it?
Let's go back here.
If you have a set of six or seven images that you've
attached, then you should probably
support the share intent.
So if I'm in Gallery, and I select eight images, I should
be able to share to my messaging client.
If I get a conversation or a message, with eight images, I
should be able to swipe through them left
and right in line.
NICK BUTCHER: That's awesome.
And yeah, with so many apps, there's like a lot of--
I guess you call it pogo sticking, where you have to go
up and down, in and out, and have all
these context switches.
So I love the idea of staying within a fluent conversation
but being able to take in all the immediate types.
It's cool.
ROMAN NURIK: Yeah, and this is something that the Gmail
recently did with the Android 4.2 update.
Gmail now lets you have this mini-Gallery view within an
email message.
So if you get an email message with 10 attachments, you don't
have to jump in to see each individual one.
You basically have a horizontally swipeable gallery
for the email messages of the attachments that were there.
So rather than spend too much time on instant messaging,
again the main event is coming up.
The last thing I just want to talk about is the tablet UI
that we designed here.
So again, this is fairly standard, a very simple master
detailed view, where on the left, you have a master list
of all your conversations, and then on the right, you have
your conversation view.
The important thing to note here, and this is where the
interesting part of tablets comes in, is there's a lot of
ways to optimize for a tablet.
On the left, obviously, we're combining screens.
But on the right, you'll notice that the presentation
of the conversation itself is slightly different.
We've increased the padding, the spacing, the margins to
let the core content float freely within your bounds so
that it's not compressed into one of the corners and edges.
So the spacing between the conversation and the avatar is
increased, between the avatar and the side of the screen.
And then everything is just bigger.
These images are no longer a one-to-one aspect ratio.
They're slightly wider to, again, account for the extra
width you have on that screen.
And then everything is larger.
So this composition bar at the bottom is--
I forgot the exact dimensions it shows, but it was about one
and a half to two times as tall for a much larger, more
accessible touch target.
And then at the very top, this presence bar that shows you
all the people that are currently viewing the
conversation as well as all the people that are involved
in the conversation, that's also slightly larger to give
the thumbnails more space to breathe.
So that's kind of just one example of how you could take
something as simple as a list of messages and turn it into a
great tablet UI.
Before we jump into our main event talking about all the
awesome stuff that the community has done, anything
else you guys want to talk about in terms of IM and
messaging clients?

ADAM KOCH: I guess one thing I wanted to mention was there's
a lot of popular IM clients out there on the Play Store.
But for some reason, the most popular ones typically do a
pretty poor job at the actual presentation and design, maybe
because they've been around for a long time, maybe because
they focus more on the functionality.
I'm not sure, but personally, I'd really love a client that
just had a great design and worked really, really well,
like this, for example.
ROMAN NURIK: I think also just on top of that, just getting
the details right, making sure notifications work, making
sure things are quick, that you never miss anything.
That's also important.
But on top of that, to go above and beyond your
competition, having a great tablet UI and having a strong
visual presentation of the content itself, of the
messages and your friends that you're talking with, that's
going to put you above and beyond.
All right, so let's move on to the main event.
So as we mentioned in the beginning, last week we set
out a challenge to the community to take a look at
one of the apps you use regularly or one of the apps
you just don't like how it looks or whatever
and redesign it.
If that company were to hire you to redesign the entire
app, what would that look like?
What are some of the key things you'd use?
And the response was just crazy, phenomenal.
NICK BUTCHER: Overwhelming.
I was so impressed.
ADAM KOCH: We thought we were going to get four, maybe five,
but it was very, very impressive.
ROMAN NURIK: Yeah, we got a lot of submissions.
And if you'd like, you can actually check
them all out now.
If you go on Google+ and search for these two hashtags
here, for public posts tagged to those, you'll
see all these entries.
But we've done a quick kind of collage of what all the
entries look like and we'll just quickly show you a few.
this is just like all the great content of the community
has come up with.
Really phenomenal.
Obviously, there's some tablet layouts here.
We'll talk about Catch That Bus in a moment.
IMDb by Paul Burke was a great job., we'll talk about, and then Good Food, which is a
Nexus 7-specific layout.
And Nick, I believe you've looked at Good Food
specifically, right?
NICK BUTCHER: Yeah, I have been talking to the developers
of it, and I think there's some really good ideas in this
redesign, which are awesome.
ROMAN NURIK: Yeah, and I mean, a lot of these developers are
going to have to look at some of these screenshots now and
say, let's get cracking.
Let's figure out how to implement some of this.
So overall, really great work.
And there's another page of this.
Again, lots of tablet UIs.
This one down here at the bottom left, this is for speed
tests, right?
And we'll talk about that.
Android guys, lots of good stuff going on here.
So great work overall.
These are the entrants that participated
and submitted something.
So again, round of applause for them all.
I think overall it was a
phenomenal job by the community.
And then regarding the stencil, we originally said
that we were going to give out 10 of the UI stencils from
So first of all, before we jump into who we're giving
things to, you can, of course, purchase them at, and click on the Android tablet kit.
So that should be available today.
But for all of the entrants that submitted something,
basically everybody here, we'll be sending you guys a UI
stencil from
And we'll be reaching out to you on Google+ to find out
your shipping address and all that.
So great job, job really well done, and
you're all getting Stencils.
So with that, let's move on to some of the highlights.
We wanted to pick a few of the community entries, and look at
them in detail, and say a few words about what we loved
about them.
So first is WhatsApp.
Adam, you want to talk about WhatsApp?
So this is an app I actually personally use quite heavily,
I guess grudgingly use it.
It's one of those apps where a ton of my friends across the
world use it a lot so I'm forced to use it.
It's actually pretty good in terms of functionality.
It's very responsive, it's very quick, and it's very
simple to use.
But the design is definitely lacking.
They certainly have the menu button of shame down the
bottom there.
It's a very dated-looking UI.

I don't think they have much sort of visual flair, I guess.
It's very plain.
So the redesign of this-- very, very nice-- by
Maximilian Solomon.
Hopefully, I'm not slaughtering that name
But it's a really nice re-imagining of the app with
the Holo theming.
Let's see if we can just zoom in here a bit.
ROMAN NURIK: You probably want to shift it over so there's no
window blocking.

It actually uses a few things that Roman put into the
hypothetical messaging app as well.
The one thing I'm not sure about actually is the top
tabs, what that would be used for.
But I really like just the conversation list here, plus
the split action bar down at the bottom
for the quick actions.
It's worth noting as well that those split actions down the
bottom would be evenly spaced if you implemented using the
standard split action bar on Android.
But yeah, it's nice.
You've got this sort of snippet of text there with the
emoji still showing.
You've got the unread message count showing there directly.
And instead of using a long press to trigger the
contextual action menu, they've got the little
triangle down the bottom right corner to signify that there's
additional actions that you could take on that particular
And then a bunch of the additional actions have been
collapsed under the overflow menu there that you wouldn't
necessarily access all the time.
Guys, any thoughts on this screen?
ROMAN NURIK: The first thing I like-- and this is a theme
The choice of colors and the color palettes that were
chosen throughout all of the contestants were really,
really strong.
I thought that the combination of the dark teal and green
color, it fits in with the branding of WhatsApp.
I mean, I don't know much too much about the company and the
app, but it seems to fit with that green brand.
In the original screen you see here on the left, there is no
hint to that at all.
So I thought the branding here is particularly good and
obviously using the Holo elements is awesome.
But I think even more interesting was the second
screen, right?
ROMAN NURIK: In this screen, this is kind of the
conversation detail view, where it shows all the
different messages that have been going back and forth
between you and your friends.
And I think that the redesign of this screen, particularly
for me, just was a stark contrast.
ADAM KOCH: Yeah, definitely.
ROMAN NURIK: So I think this is quite good.
Even these little details, like having the little
triangular callouts include part of the image.
So like the simplest way to implement something like this
is you just have the callout, which is always white.
And then if there's an image, then you show the image to the
right of that.
But here, the developer, or rather the designer, has shown
that, let's not do that.
Let's actually make the image part of the callout.
And again, it gives you this feeling of immersiveness, that
it's an image that's taking up the entire space, that it's
this free-form piece of content.
I can't really put it into great words, but that's the
feeling I get from that.
Nick, anything else you want to add to the awesome WhatsApp
design, or should we move on?
NICK BUTCHER: I like it.
It's very clean.
It looks like an Android app to me now.
Good job.
ROMAN NURIK: Awesome All right, so
next we have
And, this is the old screen, so what you're
currently looking at is the current app. is basically an app that lets you look at online
radio stations and play them and whatnot, kind of similar
to Pandora.
It's been around for quite a long time.
I actually know one of the former developers.
The app is written really well, and the app is actually
open source.
So it's quite a good, strong app in terms of using Android
features, but the design is kind of dated.
ADAM KOCH: Kind of dated isn't--
probably an understatement there.
ROMAN NURIK: So you could see that they're using the old
Eclair-style tabs.
They're using these right-facing carets.
And really, just the content screens
aren't really that immersive.
You just have seas of white and splotches of
text here and there.
ADAM KOCH: Really tiny images in the list view there.
ROMAN NURIK: So I think if we were to give out awards at
all, I think the starkest contrast between old and new
goes to this one.
So I hope I'm pronouncing your name right.
Walmyr has done an awesome job redesigning this.
Here's the new screen.
So you could see that complete shift in terms of color
palette, in terms of content first.
The images just immediately stick out, like the first
thing you see is the content.
But also, I mean, he's done a great job introducing some of
that branding.
The color palette here is very strong.
It's kind of that red, dark grey, white theme, and it's
really strong here.
It's a really good job introducing that
color palette here.
Some of the specific things I wanted to point out, and this
is something that doesn't get enough attention I think, is
when you have list items or grid items, basically
collection views, spend some time on the individual layout
for each row or each cell.
Here, there's a really interesting presentation where
you kind of couple the content, the album art, as
well as who is sharing that.
So this is kind of a great way to show two pieces of content
layered on top of another.
And then as you can see here, there's just tons of that red
shown everywhere, and it's really powerful evoking that
brand everywhere throughout.
NICK BUTCHER: A couple of details I'd like
to call out as well.
I think they've done a really nice job with the branding,
like you say, extending the color palette throughout, but
also, and I don't see people do this enough, is having a
full-on logo on the top of the whole screen.
But then, you don't need to have that taking up a lot of
space throughout every level of the hierarchy.
So I love the way that he's gone and put the collapsed
representation on their child screens, which allows you to
use the title space more effectively, which I think is
a really nice detail.
They've done very well there.
ROMAN NURIK: Yeah, definitely, definitely.
And this is something that the I/O app does.
So if you want to see how it's done in terms of
implementation, just take a look at the Google I/O app,
which is open source.
And it does this, showing a logo on your home screen and
then just an icon, which is again customizable.
It doesn't have to be your launcher icon, just an icon on
detail screens and category screens.
So moving on from, the next app is Speedtest.
Adam, you want to talk about Speedtest?
Speedtest, for those of you who haven't used this app,
it's a pretty simple app, at least on the Android side.
I'm sure there's a bunch of infrastructure
on the server side.
But it's used just for measuring the speed of the
connection that you have.
So it could be measuring Wi-Fi connection.
It could be measuring 3G, 4G, whatever connection that you
have to the server.
So it really does just two things.
It measures your speed, it does a speed test, and it
stores your historical test so you can see where you were and
which speed you got.
It's actually fairly popular.
People have used this service, at least in the
US, for quite awhile.
We don't have a shot of the original app yet.
I think this might almost get the award for
stark contrast as well.
The interesting thing about the current app is that it
actually locks itself to particular dimensions.
I'm not even sure how they did that.
I think they would have had to go out of their way
specifically to do that.
Even on my Nexus 4 it shows in a small cropped window with
black space around it, which is really peculiar.
ROMAN NURIK: It's almost like frame, not even letterbox.
It's framed in black pixels.
ADAM KOCH: Yeah, definitely.
And if you load it up on a tablet, it
does the same thing.
It's just this tiny little window in the
middle of the screen.
So I like this just because it really simplifies
the look and feel.
It brings the content out, and it sticks to the roots of what
the app is trying to do here-- measure the speed and show
your historical entries.
NICK BUTCHER: It also has elements of the new clock app
I think, that new stopwatch app that shipped with Android
4.2, which I think is a good thing.
ADAM KOCH: Yeah, I agree.
So not much else to comment here other than I think it
looks really nice.
The Holo thing is great.
And it really sticks to a sort of main navigation we would
recommend for an app like this--
Menu button, action bar, tabs and then two content panes on
the tablet UI.
ROMAN NURIK: I think the other thing I just want to point out
for the tablet UI is look how much you can do just changing
metrics, just changing dimensions.
The only difference--
and I'm guessing that the assets are probably the same.
They're probably not even using the assets.
This is probably some custom drawing if you were to
implement this.
But the font sizes are slightly larger.
The spacing between elements is slightly larger.
The size of that circle is obviously larger.
But then it's really just about spacing, font size, and
just dimensions and metrics, and then obviously, if you're
showing images, showing those images at full resolution.
But it really shows the power of what you can do with just
So for developers out there, if you just extract your
dimensions into dimension resources, you don't even have
to create a tablet-specific layout in a lot of cases.
You just change the dimensions for tablets.
Good job, Glenn Barker.
NICK BUTCHER: Yeah, I guess the takeaway from the
designers for that is don't be scared about having something
that looks similar, but then you call out different
switching points at which you say the text size should be
larger because that's really easy for developers to do.
ROMAN NURIK: Yeah, exactly.
We should probably do a future episode on how to best
annotate that in your mockups.
That's definitely something that requires some logic, like
if this, than that.
Maybe we should talk about that a little more.
But anyway, let's move on to the next app since we're
running a little low on time--
Nick, do you want to talk about IMDb?
NICK BUTCHER: Yeah, absolutely.
What I really liked about this redesign, in particular, was
they didn't only apply a Holo look and feel to it.
They also took a stab at looking at the information
So when I say they, it's Paul Burke.
Good job, Paul.
He looked at the way that people, he and his friends, he
says, use IMDb.
And it definitely resonated with me, that you're quite
often using mobile in a different context than you are
using a website.
And he's really rearranged the hierarchy of the information
to make things, like you know, you're watching a movie.
You want to see who the actor is or what other movies
they've been in and make that really, really quick.
And he's used images really well, I think, throughout the
app to make it very quick to see what's going on and
visually you kind of like pause the app.
ROMAN NURIK: Yeah, and you can't see this here.
In one of his mockups, he basically hid all the trivia
information, like the birth date and so on for the actor,
hid that under an expandable item here at the top.
And it's nice to be able to focus on the stuff that you
immediately want to see on mobile.
I mean, you probably want to see, oh my
god, I just saw somebody.
Is that Joseph Gordon-Levitt?
You want to be able to tell by looking at some photos.
Maybe you're not as interested about when they were born or
where they grew up or something on the go.
So definitely a good rethinking of the entire
experience on mobile of what is the user trying to get at.
And then when you touch on one of these movie titles, it
gives you a very quick pop-up.
I'd probably use something beside a pop-up.
But it shows you a very quick pop-up showing you the
immediately important things like the rating and then I
think the metascore.
So obviously, you want to see if movies are good on the go.
You're deciding between something, so making that
rating, number, or star meter or whatever really prominent
is probably pretty important.
NICK BUTCHER: Yeah, generally a dialogue's not the answer.
But I'd quite like to see that perhaps as another expand in
place, a bit like he has for the
information about the actor.
That could be quite fun.
I think the last app we have today is Catch That Bus.
And I'll just briefly mention, the one thing I loved about
this is the focus on the different screens.

And actually, this is implemented already.
The designer slash developer, as part of the redesign
actually re-implemented everything.
So if you go ahead and download Catch That Bus, this
is what it looks like.
NICK BUTCHER: And it's design in action.
It's design and implementation in action.
But the one thing I loved here is that he clearly thought
about the different screen sizes.
That's something that's more and more important as you have
devices like the Nexus 10, Nexus 7 out there.
And the other thing that I loved here
is the color choices.
Again, the single accent color where they're using yellow as
the accent color is really unique, and it really stands
out throughout the app.
You could see that kind of yellow is everywhere.
Yellow is in the tab selections.
Yellow is in the core iconography and in the
launcher icon.
So I think it's--
NICK BUTCHER: Even in the setting screen.
I think it's just the one where he colored some of the
switches in the setting screen,
really thorough branding.
ROMAN NURIK: For sure.
Yeah, so great work.
I think that's the last one we had.
Any other notes around the community stuff, guys?
ADAM KOCH: Only that some of the
others were also fantastic.
We just didn't have time to cover all of them.
But great job, guys.
Yeah, really, really great.
NICK BUTCHER: The other thing I've been really enjoying is
actually just seeing a community of people evolving
around their hash Android design hashtags,
certainly on Google+.
I'd love to see this continue.
It's been fantastic to see all the conversation, seeing
people dive in to other people's redesigns and
offering feedback, and then people
iterating on their designs.
That's been incredible.
ROMAN NURIK: And I should say, if you get feedback on your
design, don't take that as somebody criticizing you.
We're, in general, trying to provide positive feedback.
And just learn from what others are doing.
If they give you criticism, that's
totally positively minded.
They're not trying to tell you that you suck or
anything like that.
Just before we sign off, I really want to quickly give a
shout out to Taylor, who is actually
also one of the entrants.
He submitted a redesign for Google Finance.
And he just this morning released a
sketching kit update.
Basically, this is a sketching kit that you can print out
onto A4 paper.
It's a template that shows you the real sizes of the Nexus 4,
the Nexus 10, Nexus 7.
I think he's got all the Nexus devices in there.
So if you're interested in doing some sketching,
definitely download Taylor's kit.
So with that, I think that's it for this week's episode.
Nick, thanks for joining from the conference.
It's been fun.
NICK BUTCHER: Glad that I could find a stable internet
ROMAN NURIK: Yeah, pretty remarkable that you haven't
dropped off.
ADAM KOCH: Yeah, good work.
And not really design news, but the Nexus devices, the new
Nexus devices, are on sale today.
So happy Nexus day, everyone.
I'll be buying some as soon as they're available in the US.
All right, well, that's it for Android Design.
Thanks for coming.
Thanks for showing up, and thanks for watching.
My name is Roman Nurik.
ADAM KOCH: Adam Koch.
NICK BUTCHER: And Nick Butcher.
Thanks, guys.
ADAM KOCH: Thanks guys.
ROMAN NURIK: See you guys next week.