Tip:
Highlight text to annotate it
X
MIKE DENNY: Hey, there and welcome to another episode
of Android design in action.
My name's Mike Denny.
NICK BUTCHER: Hi.
I'm Nick Butcher.
MIKE DENNY: And we also have two special guests with us today.
MARCO PAGLIA: Hi, my name is Marco,
I'm an Android designer here at Google.
ABHILASH KUDUVALLI: Hey, I'm Abhilash.
I work on the Android Design team with Marco.
I also have the site called Android Niceties,
that maybe some of you use.
MIKE DENNY: And we also have in New York--
ROMAN NURIK: Hey, guys.
Roman Nurik from New York, as usual.
NICK BUTCHER: So, Happy New Year.
Welcome to the first episode this year.
We're going to, today, cover an update
to the Beautiful Design Collection,
which is a collection of apps on Google Play that was updated
just after Christmas, the end of last year.
And so this is a collection which
Google Play uses to showcase some
of the most beautiful design apps out there,
and is a really, really good source of inspiration
for looking at apps which are doing some really, really
great work.
So we'd like to take the next 20 minutes
or so to take a look at some of these apps,
and call out some of the individual design details which
we really enjoyed from them.
And two of the apps from the previous collection
have stayed in the collection, so that's
Pinterest and Grand St., so we're not
going to cover those today.
Feel free to go back to the previous episode of Android
Design in Action, where we looked at those.
But we are going to take a look at the other apps
in the collection.
So without further ado, we've got a lot of apps
to get through.
We're going to dive straight in.
The first app that we would like to take a look at is Timely.
So if you're a fan of Android Design in Action,
you've probably heard us talk about this a couple of times,
so I'm going to be very brief with this application,
but essentially it's beautiful.
It really defines a very high level
of polish and subtle animations, that just really
showed a lot of thought went into this application.
So I think, Mike, you talked about this
in a previous episode.
I think one of your favorite interactions
is simple things like setting a timer is
a very, very visceral and enjoyable interaction.
Things like if I want to set an alarm, instead of controlling
knobs and levers, I just kind of swipe out from the edge.
And I can just tap up and down to finely adjust it, and so on.
Everything is kind of a direct manipulation
kind of interaction, which speaks
to some of the design principles.
It's much more fun to directly control stuff,
than to control these knobs and levers.
And again, it's just polish, polish, polish.
Anyone else have any thoughts on Timely?
MARCO PAGLIA: Another thing about this applications
is that you don't have any [INAUDIBLE].
All the transitions, they go from one point to another,
I think.
But you heard this is my favorite,
is how the number zooms into positions and back,
really, really nicely.
All the things they have, the transition
between each other, the interaction
feels a continuous thing rather than
broken into different screens.
NICK BUTCHER: It's almost like a game or a movie, right?
In that everything just kind of seamlessly
transitions between things, rather than
a series of individual screens.
MARCO PAGLIA: More than a storyboard, yeah.
MARCO PAGLIA: Right, exactly.
ABHILASH KUDUVALLI: I think even like when you're counting down
and you're starting a timer, and each of the seconds
come out as you go past them, instead
of a little finger or dial moving past them.
There's lots of little touches like that,
that are pretty amazing.
MARCO PAGLIA: And we don't have to forget the transition
across the numbers.
[INTERPOSING VOICES]
MARCO PAGLIA: That's a pretty cool transition.
It's great that people are playing with those things.
NICK BUTCHER: Great.
So once again, love the app.
Next up, I think, Roman, you wanted to take a look at Circa.
ROMAN NURIK: Yes, so Circa is basically a news reader app,
right.
I think the company provides its own news,
or they edit their own articles.
But at the heart of it, it's a news reader app.
It has just a handful of topics.
It's very highly curated.
So the content itself speaks volumes
about the app and the company.
They're really crafting the content for, I guess,
almost micro news consumption.
So on top of the visual awesomeness of the app,
it's very simple.
There's very little Chrome in the app.
It's really the content, the images, the photos.
They really stand out, and the type as well.
Beyond all of that, there's one thing
that I really wanted to talk about.
And that's when you look into or when you open an article,
the way in which you interact and consume the article
is very novel.
Basically, instead of just scrolling vertically
through a long list of paragraphs and images
and things like that, they actually
take each point-- each individual point of the news--
and they make that into a single little card type-thing.
It's a little object, right?
And you flick vertically.
You page vertically between these individual points.
So consuming the news is actually
very fun and very quick.
You can flick through to see what's interesting.
If there's a map or a photo, it kind of takes up
the majority of the space in that little point,
in that little card.
And it's really consuming news at your own pace,
I just really love the interaction.
Also there's a little scrubber at the right.
You can scrub along the right side of that scroll bar thing.
And you can quickly flip through the different news sections.
So those are my favorite aspects.
You guys have any other points about Circa?
MIKE DENNY: Just to follow up on the point
that you just made about the digestible scrolling format,
I've actually been staying up-to-date more on the news
by using Circa thank looking at news from other sources,
just because it definitely caters to the skimming
kind of reading where it's just tiny chunks at a time.
So it's great when an app actually
changes your day-to-day where you're more informed.
MIKE DENNY: I also quite like the information
density they use on the home screen.
They're unashamedly using lots of space per story,
rather than trying to cram in the most
number of stories per screen.
And they also don't present a ton of stories per day.
So all in all, their design conveys to me
that they've selected the most important things,
and these are important things which
you should pay attention to and read.
So, like you say, it makes it very easy to scan a day's news,
and it communicates that to me for their design.
MARCO PAGLIA: Yes.
One more aspect that I'd like to have people
look at, which is typography.
So it starts from the Circa logo itself,
which is just a typographic logo.
It was also interesting how, in the main view,
you see the whole logo.
But when you get into different sources,
they use it differently, which is really Interesting.
Then obviously you will recognize this is not
[INAUDIBLE].
And I think applications that can play with phones
and have different types of typography
will enrich our platform.
Now obviously [INAUDIBLE], but it's
good to see other phones out there.
It's also interesting how they use words together with icons,
as we do in our platform, in the action bar.
But even there, they use a different typography,
which makes this application feel very distinct.
MIKE DENNY: Yeah, so we love Circa.
And I think the next app we want to talk about is Airbnb.
So Airbnb obviously is an app for the-- it's not really
couch surfing.
The best way to explain it, if you don't know about Airbnb
already, it's finding traveling rental, people renting out
properties that they have for smaller chunks,
as competition to other forms of travel housing like hotels.
So the thing that stands out immediately
to me about the Airbnb app is the use of photos.
And that they're really utilizing the visual style
of Android, which is to show full-bleed photos,
so the Chrome kind of fades away.
It's just about the spaces.
And here we can just tap into a little bit more detailed view.
But even if you want to just scroll through,
they have this horizontal paging within a given property,
so that you don't have to leave the full list.
This really, really allows for a simple browsing experience
to find a place that you want to stay.
MARCO PAGLIA: And this really speaks
about the philosophy of Airbnb itself,
which is a company that had invested tremendously
in design, in particular had been sending
professional photographers to people who were renting
their places, in order to make that experience better,
because everything starts from looking at the photos where
you're going to be staying.
And the app really reflects their philosophy
by focusing so much on photos, and even just little things
like this little snappy way to go through photos real quickly.
And obviously it carries through in the full-screen view.
It's super important.
You don't know how important it is,
moving towards that kind of interaction versus having
a typical, maybe, obsolete gallery where you have to keep
on going back and forth within the photos that are provided
to you.
That makes the whole difference.
ABHILASH KUDUVALLI: Yeah, I think
the other thing for me, as someone that's used Airbnb
quite a lot, is how functional in feature this app is.
I thought you could just browse listings, make a booking.
But you can create a listing so easily, it kind of makes sense.
You have your mobile device.
You choose your number of rooms.
You take photos.
It does it really nicely.
So I feel like there's a lot of screens
that they put a lot of effort into designing well.
So that's the other thing that stood out for me.
MARCO PAGLIA: Yeah, even the dialogues
with renters and the chat system,
it feels almost like it could have
been an application in itself by how beautifully it's designed,
and by the level of details they had,
like the profiles of the house.
Everything is very, very well curated.
You feel welcome in their application.
NICK BUTCHER: So moving on, the next app
that we would like to cover is a heart rate
monitor from Runtastic.
And so this is an excellent example of what we're always
talking about on Android Design in Action,
is to take the holo design language
and use that as your starting point,
and really bring your own personality
and your own branding to the equation.
So I think they've done an excellent job of interpreting
the raw holo design language and doing that-- so simple things
like the way they've recolored a bunch of elements,
and the use of the typographic styles
we commonly use, like the block capitals, when to use,
and robust or light or larger-set text
to bring emphasis to certain elements.
I think they've done a really, really nice job of doing that.
The one screen I would like to call out
as being extremely beautifully is the hero screen
of application, which is when you're actually
using the application to measure your heart beat.
So if you haven't used the app, it's pretty innovative really.
It actually fires up your camera and the flashlight
on the back of your phone, and actually shines the light
through your finger and measures the difference in color
to actually measure the heart rate, which
is pretty innovative.
But if we look at it now, when it's doing that,
it uses this beautiful blur effect
to indicate when it's picked up your heart beat.
And you have this live graph going along the bottom, which
will show you you're going to get an instant response.
It's doing something that's trying to find it.
And it's just a really, really beautifully,
well-designed experience to communicate what it's doing,
which is pretty novel.
[INAUDIBLE]
So that was Heart Rate Pro.
Does anyone have anything to add?
MARCO PAGLIA: Just a little simple thing.
Even the dialogues are personalized.
They have a strong web collar on top of dialogues.
I think they use all caps.
They use the font, with a different size--
different from the very typical out-of-the-box dialogue
framework that we have.
And I think it's something that we invited developers
to play with, as long as the interaction would be the same.
It feels novel, but it doesn't feel completely
different from everything within our platform.
NICK BUTCHER: Yeah, it feels completely native Android,
but it feels completely Runtastic at the same time,
right?
It's that good marriage of both.
MIKE DENNY: Yeah, definitely.
So the net app that we want to talk about
is called The Whole Pantry.
And we've already talked about the importance
of high-quality photos and photography,
and the impact that can make on your app,
obviously depending on the kind of app.
But for The Whole Pantry, they use beautiful photos
to really sell the entire purpose of their app, which
is to present a very holistic approach to nutrition,
lifestyle.
They've got recipes.
They have health guides.
They have recommended products and services.
We can drill in here and look at macadamia and caramel
cheesecake.
The photos are very high resolution.
I think the app itself is a 75-megabyte download.
So it's definitely in the forefront
of the app presentation.
MARCO PAGLIA: And I can't stress enough
how important having the right resolution for assets
and for photos is.
I think The Whole Pantry, on a tablet like [INAUDIBLE], really
defines a beautiful experience, because the photos are so much
high res, and unfortunately something we don't see enough
out there, because they're expensive,
et cetera, et cetera.
But when you see it, you know that it is important.
So I'm actually very much looking forward
to seeing bandwidth getting faster, and seeing
more and more high-resolution photos in a large-form factor,
because it defines the experience
in a whole new light.
ABHILASH KUDUVALLI: Yeah, I've tried
a few of these recipe apps-- not that I cook or anything.
But they've put a lot of effort into curating it,
and they've slowly released updates to recipes.
So you can see with the recipes they
have, there's nothing that looks broken.
Every photo is amazing.
The ingredients, the instructions--
they're all nicely done.
So it doesn't rely on trying to render something
from a junky website.
They've tried to keep it within the app.
NICK BUTCHER: Especially food ***.
It's just like everything looks amazing
MARCO PAGLIA: Anything here like we saw in Circa,
I'd like to make people pay attention to the different font
style in the action bar.
Which really, those small differences
will make your application different from the rest.
And Circa had different fonts.
Whole Pantry has this italic serif-type of font.
It really makes the application stand out
with a very simple change.
You don't have to do a custom action bar
or go crazy with things.
You just need to curate your application with a very small
difference, and it really stands out from the crowd.
MIKE DENNY: Yes, so the next app we want to talk about
is Tumblr.
ROMAN NURIK: Yes, so the thing about Tumblr-- Tumblr
in itself, I think everybody knows what Tumblr is.
It's kind of a micro-blogging platform, I guess.
The thing I want to focus on for Tumblr, the app itself,
is not so much see the actual experience of using Tumblr,
but it's the onboarding-- the first time you run the app.
And we had a whole episode of Android Design in Action
just on this, because it's so very important.
When you get featured on Google Play,
or when you're in a collection like the Beautiful Design
Collection, a lot of people are just discovering your brand.
And they're coming to your app, and just kind
of getting a feel for what it is.
So you don't want to throw up a login now or register now
type dialogue.
You want to give them a taste of what they're
going to get when they sign up, if they sign up.
And so Tumblr does this brilliantly.
They go above and beyond.
You can obviously view public Tumblr content in the app,
I guess in the explorer tab.
But you can even start following.
You can even start personalizing the app
before you even have an account.
Obviously once you follow more than ten Tumblr blogs,
they'll say hey, you probably should
start saving this somewhere, because this
is just kind of stored locally.
And as soon as you, I guess, sign in or sign up,
they actually add that to your account.
So it's just done very brilliantly.
Besides that, obviously the UI's very clean.
Again, the content stands out.
The Chrome is almost transparent.
It's there.
There are the icons there and the text,
but it's really the content that stands out.
But to me, the number one thing in this app
is the amazing onboarding experience.
ABHILASH KUDUVALLI: Yeah, I mean there's
a few little nice animations.
Like when you follow something for the first time
in the explorer tab, and it flies into your home tab,
it's just a nice little indication.
The pull-to-refresh, even like how the radio menu comes out--
yeah, there's quite a few nice touches.
NICK BUTCHER: OK, so the next app
that we would like to talk about is Umano.
So Umano is a news consumption application,
but it's kind of different to Circa and other standard ones
in that it's all orientated around listening
to the news, having the news read out to you, spoken to you.
And so one of the things I very much like
about this application is they have
quite a complex information hierarchy,
but it's expressed very, very clearly,
using some very familiar Android patterns.
So they used the drawer for the major organizational tasks,
as it were.
But they also have this partial width and swipeable tabs,
to allow you to filter down by categories
and really find the content you're looking for.
Another interaction which I really like
is they've learned from the best, as it were,
and they've done a very similar implementation to Google Play
Music, to allow you to see what you're currently listening
to you while navigating around, to find the next story you
might want to listen to.
So here at the bottom, I have a Now Playing drawer.
And I can drag it up or just tap on it,
and quickly get back to the current story which
is now playing, so I can quickly go in and rewind a minute,
or add it to a favorite playlist or something like that.
And it works very nicely.
You can see as you drag up, it just kind of replaces
the content behind it and acts similar to the action bar.
MARCO PAGLIA: It's beautiful how the action bar moves away
together, with a sort of parallax effect, as the view is
coming up.
It's a very , very nice detail.
MIKE DENNY: And one of the main use cases of this app
is to listen to the news during your commute, right?
So they've actually added something particular for use
in the car.
ABHILASH KUDUVALLI: Do you want to talk?
MARCO PAGLIA: No.
ABHILASH KUDUVALLI: Basically when
you're listening to something, when it starts playing you
can switch into car mode by tapping the car icon.
And they've just done a beautiful job
of presenting a UI that's very touch-friendly when
you don't have a lot of attention.
There's a nice overlay.
There's a remote control view.
It's just a nice touch.
NICK BUTCHER: Easy-to-hit buttons.
ABHILASH KUDUVALLI: Very easy to hit buttons while driving.
MARCO PAGLIA: They used the new framework from KitKat,
where the view goes full-screen.
And how it fades in and out is really [INAUDIBLE].
This is an application that tries to make something
that we've got used to, which is hearing things being read
out loud by our machines, but it makes it more human,
bringing human beings back into the game.
So obviously there's a focus in design on humanity,
if you wish, across the app visually, and even
from the audio perspective.
NICK BUTCHER: And the [INAUDIBLE] developers,
I know that they've open-sourced their drag-up panel
implementation as well.
So if you have a similar kind of interaction,
you might want to look at that.
MIKE DENNY: Awesome.
So the next app that we want to talk about
is perhaps slightly controversial.
I know that when the app was first released
there was a flurry of discussion about it, and that is Yahoo!
Weather.
ROMAN NURIK: Yeah, so I want to spend a little bit of time
talking about some of awesome details in Yahoo!
Weather.
Now again, all these apps are not without their flaws,
but here we really want to highlight
some of the best details.
So Yahoo!
Weather, when you first open it up,
it just shows you, obviously, the weather near where you are.
Now front and center-- I guess back and center-- is a photo.
And this photo is actually highly contextual.
The photo is not only about the current weather type--
whether it be sunny or rainy-- but it's also
contextual in the sense that it shows you the location.
So I think that if you're in London and it's super sunny,
it'll show you London when it's sunny.
But if it's rainy-- [LAUGHTER]
ROMAN NURIK: But the idea's that it's highly contextual,
so it actually gets you a pretty good feel of what
it may actually look like outside.
Now in terms of the UI itself, if you have multiple locations
set up, you can swipe left and right, obviously,
between your current location and your predetermined
locations.
And there's a nice parallax effect where the background
image actually scrolls at a slower rate,
and it kind of transitions neatly
into the next image for the next location.
But within a specific location as you start scrolling down,
that background image actually starts to blur.
And this blurs so that you can actually
focus on the information that's in the foreground--
things like the forecast and the details of the weather.
And then if you scroll down to the very bottom,
this is probably my favorite detail in this app.
You get to these really awesome animations
of wind and sunlight.
And it's these really small, little touches
that really set this app apart from other weather apps.
So I really like a lot of these different touches in there.
Those are my favorite elements.
NICK BUTCHER: One of my favorite things
as well is as you're scrolling down
to see some of the more detailed information,
I love that it synchronizes the scroll position.
So that if you swipe horizontally,
you can easily compare two locations.
So if you're trying to decide on you want to go to either City X
or Y this weekend, you can scroll down
to the long-range forecast and easily pan between them
and have these comparisons.
Little details like that just show how much thought's
gone into that.
MARCO PAGLIA: Yeah, it really shows
how design follows functions after all.
And all these details we're seeing ,
they're not just to make the application more beautiful,
but even more functional.
And they create a story that is understandable.
To those details that Roman was talking about,
that information at the bottom, also when you pull it down,
you have this pull-to-refresh.
They have this little sun spinning around.
So a lot of little playful elements
that they embed in the application
that make it fun and surprising.
MIKE DENNY: Yeah, so we definitely love the Yahoo!
Weather app.
Speaking of visual design when compared to interaction design,
the next app that we want to talk about
is Etsy, where it's just a gorgeous app that
screams their own brand.
It very loudly has a voice.
And it's interesting because visually you might not
recognize Android glyphs or icons.
They've got a lot of custom things.
But the interaction design, the design patterns
for navigation throughout the app
are very consistent with platform standards.
And that means that users will instantly
feel at home using the app, while still
being exposed to Etsy's brand.
ABHILASH KUDUVALLI: Yeah, I think
Marco mentioned earlier dialogues.
And again, Etsy, the custom dialogues they use,
I really like.
And the other thing I liked is the purchase flow.
I feel like a lot of apps, once you get into the purchase flow,
they kind of get into web views, or they're not as well done.
But these guys, again, have paid a lot of attention
to the purchase flows through the app, which is important.
MARCO PAGLIA: For us it's amazing how,
when we define certain rules for the UI-- like the new side
drawer and things like that-- how good developers
and good designers, they go above and beyond
to play with that simple rule, but to make it special.
We have seen it before on Airbnb.
But if you pay attention when you bring the side drawer in,
your view zooms back.
And if you look into Etsy instead,
when you pull the drawer in, the view fades.
So there are a lot of little effects.
And again, it's what I was saying before.
Just changing the font in your action bar,
but keeping the action bar as it is from an interaction
point of view, or changing the effects
when the drawer comes in, is enough to really distinguish
your application from the rest of the crowd.
In this case, Etsy also made their site navigation
to be very colorful.
Also here to be noted is the different font.
Treatment for the side drawer, for the action bar as well.
A lot of elements that I invite everybody to play with.
NICK BUTCHER: And we're not showing it right here,
but this app is [INAUDIBLE] responsive.
So if you try it on all manner of different size and shape
devices, they use this very flexible staggered grid layout,
which they kind of change between different columns
and so on, just to maintain the same aspect ratio,
but to fill up the space beautifully.
So while they do maintain great use of white space and so on,
they really just fill up available room
to make the most on other devices.
I guess it's stretched experience.
ABHILASH KUDUVALLI: Have they open-sourced?
NICK BUTCHER: They've open-sourced
that staggered grid view as well.
MARCO PAGLIA: If I remember correctly, even the dialogues,
they bring a nice surprise to the experience.
They don't simply pop.
They don't simply fade in the middle of the screen.
They actually come from the back,
from the bottom of the screen.
It just creates more of a metaphor about where
these dialogues are coming from.
And it's definitely a nice touch.
MIKE DENNY: Definitely.
So this has been a look at the Winter 2013 Beautiful Design
Collection.
We hope you enjoyed watching it.
And until next time, I'm Mike Denny.
NICK BUTCHER: Bye from me, Nick Butcher.
MARCO PAGLIA: Bye.
This is Marco.
See you next time.
ABHILASH KUDUVALLI: See you.
It's Abhilash.
ROMAN NURIK: And see you guys later from New York.
It's Roman.