Tip:
Highlight text to annotate it
X
ROMAN NURIK: We're hoping there's audio this time.
Anyway, hello, once again.
Welcome to Android Design in Action.
Your host, Roman Nurik.
ADAM KOCH: Hey guys, my name's Adam Koch.
NICK BUTCHER: And hi, my name's Nick Butcher.
ROMAN NURIK: So today's episode is
going to be about presenting images.
We're going to share a bunch of tips and tricks
on how to present kind of images in a delightful way
inside your apps.
A lot of the things that we'll talk about today
have been covered in past episodes.
But we felt that it was good to have kind of a recap episode
as well as talk about some minor new things.
Not necessarily new in Android, but kind
of new things you should be thinking about
related to showing photos and thumbnails inside your apps.
So without further ado, should we get started?
And Nick, do you want to introduce the Design Principle?
NICK BUTCHER: Absolutely.
The images are such an important part
of your user interface that they're specifically called out
in Android's Design Principles which
say that pictures are faster than words.
And that you should use them to get people's attention
and be more efficient.
So there's a much quicker way to express your information
in your user interface by using imagery.
If you have screen full of images
versus a screen full of text and labels and so forth,
one is going to be instantly a lot quicker
to kind of understand, to kind of grok
what's going on, than the other.
So you should really make use of them while you can.
And the other thing I think is very important about this kind
of principle is that a lot of these kind of devices
out there these days, phones and tablets
and so forth, really kind of beautiful high resolution
screens.
So it's a real missed opportunity
not to provide really useful, crisp imagery
wherever you can to enrich your user interfaces.
So shall we push on?
So one of the most important things
when thinking about using imagery in your application
is very minor.
Designing for Android is designing for scale,
designing for a variety of devices out there.
So what that means is, when you're
thinking about your images and you're
thinking about how they're going to display in your user
interface.
You need to build in a level of flexibility in there
so that your user interface can work
on a variety of different screen sizes and shapes
and that your imagery can stand up to that and still look good.
So this is a technique that we've covered a couple of times
on the show, so I'll go quite quickly over it.
But one technique that works very well
is to respect the aspect ratio of the image you want
to show but to be a little bit more
flexible about the exact balance in which you show.
And one way you can do this is using a center crop technique.
So what this will do is, depending
on how much space you have available to show the image,
it'll kind of blow it up or crop off the sides
and so forth in order to maintain the aspect ratio
but to fit in the amount of space available to the image.
It's a very important technique to kind of embrace.
And I think as we've said before, this technique works
really, really well if you have images which
don't have a particular focal point.
So for example if you have this picture of some bacon, which
we always seem to come back to here on ADiA,
then it works particularly well for this kind of content.
If you have people's faces you might risk kind of cropping off
something you might consider the focal point of the picture,
so just bear that in mind.
ROMAN NURIK: Cool.
Should we move on?
NICK BUTCHER: Next step we're going
to talk about have different ways
that you can kind of decorate or change
the imagery which you're looking at.
And the first thing we're going to [INAUDIBLE]
here is using different masks.
So Android has a kind of particular look
and feel when it comes to shapes.
So for example, you don't see many kind of pill shapes
or rounded rectangle shapes.
But what you will see is lots of simple geometric shapes,
like squares, circles and so forth. [INAUDIBLE] maybe?
I don't know.
One technique you can use with your images
in order to break out of a rhythm and make them pop,
in order to kind of set them out of new content
somehow is using different kind of decorations,
like a circular mask in this instance,
in order to kind of make it stand out.
ROMAN NURIK: The nice thing about circular masks
for avatar photos, too, is that it's a bit softer.
I guess in general circles are a bit softer than squares
or other things like that.
And it's kind of nice to unify or to tie this visual element,
the circle, to the idea of a person.
So not necessarily circles, it could
be other things, but kind of making sure
that throughout your app any time you
show a type, a single type of object,
that there's visual consistency.
And using a circle mask is one of the ways
in which you can achieve that.
NICK BUTCHER: And moving on, here
is an example from the Path application
which combines that idea of using a circle
mask with providing kind of a slight white border and a drop
shadow onto it.
Just in order to set it apart from the content,
give it a little bit of content protection
if you're not sure what the color of an image
is going to be-- it's user provided-- you can stop that
from contrasting with the background elements,
for example.
And make it stand out as well, giving it
a little bit of visual effect.
ROMAN NURIK: Should we move on to text overlays?
So any time you show images-- and actually this
is the something we'll talk about in a bit
with full bleed imagery-- but basically anytime
you show images and you want to show captions
next to those images, there's a couple ways to do that.
So first of all, obviously you could have the photo
and you can show captions below it, if you have the space.
But one of the ways in which you can kind of maximize
the use of space, also I guess maximize the effectiveness
of the photo or of the image, is to make the image take up
as much space as possible and overlay any sort of metadata
or titles or captions or things like that on top of the image.
So here's just a couple of examples of that in action, I
guess.
So this is from the ADiA app, the Android Design In Action
app from Andreas.
And you could see that the images take up
as much space is possible.
There aren't big white gaps in between them
and then having text inside those gaps.
This is purely kind of letting the image take
as much as possible and using the space on top the image
as a space for the metadata.
So here's another example.
This is the circa app.
The circa app is a recently published news app.
And here they also have the news article, or the news thumbnail,
take up almost half the entire screen, maybe even
a little more.
And then the title is just kind of an overlay.
And here are just a couple of other examples from Google Play
Music and the People app.
The reason we wanted to point these out
is that these are a couple different examples,
but they each use a different form of background protection.
And background protection is basically the idea
that if you just overlay text of whichever color, black, white,
whatever-- if you just overlay text over an image,
very frequently the image itself is
going to contrast too highly with the text.
And the text won't be very readable, won't
be very legible.
So background protection is something
that you place in the background or some effect
that you provide that makes the text legible.
So here's an example in the ADiA app,
there's a kind of a dark black drop
or rather a black gradient.
And that's a very, very common form.
Here in the top right there is the people app,
and instead of a gradient they just use
kind of a semi-transparent black rectangle.
That's another common way of doing things.
And then here in the Google Play Music app
the action bar is also using a gradient
for background protection.
So whatever the background is, whatever this photo is,
even if it's just pure white you'll
still be able to read the title here and see the controls.
So the one thing I did want to talk about
is the way circa does it is actually very interesting.
It does a combination of a slight drop
shadow on the text, which alone is usually
enough to make it legible.
But it also applies this blurring effect.
And the actual execution here, I think,
could be a little better.
There could be kind of a faded blur or something like that.
There's kind of a sharp edge between the blurred
and not blurred image.
But the idea is that they're blurring the background
to provide as much contrast on the text.
So any time you see edges, for example,
in this photo of a turtle-- that hard edge
between the turtle and the hand--
that's actually visual distraction.
In this case, when you're just focusing on the image,
that's a good thing.
You want to focus on the different details in the image.
But here, where you just want kind
of a more vague sense of the image,
but you really want to focus on the text,
they kind of blur out the background,
make those edges much, much blurrier.
And make the text much easier to read.
So a couple of different ways to overlay text
or overly metadata on top of your photos
to maximize the amount of space dedicated to images.
NICK BUTCHER: Another great aspect
of using these kind of overlay labels
is that it lets you kind of say that this whole item is
the interface.
It's kind of the idea of putting your content first,
and that anything is kind of within it, contained within it.
So it's like saying on the People app,
on the example where you have them calling the contact,
this is the thing that you can click on.
This is the person.
This is the kind of data item I can interact with.
And there isn't another label off slightly somewhere
to the side, so you have to kind of expand out
of the area to click on [INAUDIBLE]
or whatever it might be.
It's completely contained.
So this overlay layer will help you
to build this kind of data-centric kind of UI.
ROMAN NURIK: It's really-- the image is the touch target,
right?
It's almost like if you look at modern UIs versus past UIs,
really the content is the Chrome.
The content is the interactive target.
And you have here-- when you let the image be
the target I think you end up with a much more rich UI.
OK.
Should we move on?
Let's move on to full bleeds.
So this falls-- this is kind of related to text overlays.
Kind of in a similar manner, we have some similar screen shots.
But here the idea is that you want to-- sorry,
we keep hearing IM noises.
Anyway, here the idea is that you
want the image to take as much physical space as possible.
You want it to take as much real estate as possible.
You want your UI, basically, to be as immersive as possible.
So here's an example of that where
basically rather than having the image start
at the bottom of the action bar, and maybe kind of pushing
the rest of this content down in Google Play Music,
they actually decided that, hey, why can't the image be
part of the action bar?
So here they used kind of a translucent action bar
with again that backup protection
and let the image go as high up as possible.
And so here is basically the concept
of maximum space for content, maximum space for images.
When you have multiple images, like in the case of thumbnails,
what that means is you want to minimize
the gaps between images.
You want to minimize the space between them.
And so here's again an example of the People app,
where the space between each image
is only about one or two dips.
And the idea here is that if you had larger space, if you
had larger gaps, whether they be white or black--
it would be extra visual distraction.
It would potentially help further the visual hierarchy,
but the hierarchy here is well established already.
And so extra space there would be just kind of static space
that's not being used.
That's not really assisting in presenting this content.
So I think that the fact there are small gaps here,
I think it services this content really well.
And then two quick other examples.
Here's another example of a flip board.
Again, with very minimal space between photos,
between thumbnails.
And then here's another example of going completely full bleed,
where basically the entire screen is a photo.
And it's not a static photo.
This is kind of an important distinction to make.
It's not just a static photo that
is the same for every time you launch the app.
It is a piece of content and it's still very, very dynamic.
So the idea is here is that they spent as much space
as possible showing the content and then overlaid things
on top of it in a background protected kind of way-- the app
branding as well as some of the kind of things
that you could look at once you've opened the magazine.
So that's full bleed imagery.
Should we move on to touch feedback?
ADAM KOCH: Yes, so, touch feedback.
If you've been watching our other episodes
we tend to mention this quite frequently.
And one of the reasons for that is we actually
see many apps that don't actually
implement touch feedback.
One of the areas where people often forget
is image touch targets or touch targets
that are made up largely of images.
And so one of the problems with touch feedback
where the touch target is largely made up of an image
is that you can't really engage the touch feedback
on the background like you normally could, with
say text or something like that.
So for touchable areas that are largely made up an image,
you should really use a sort of semi-transparent overlay
that covers the full touchable area.
In terms of the color that you should use,
it should really match well with whatever your highlight
color is or your accent color is for your application.
And the focused and checked state
should really be about 50% of the pressed state
in terms of capacity.
Actually, let's just jump across here
and quickly look at some examples.
So the two on the left are sort of no-nos.
You can see the very left example here.
It's highlighting the background and I actually
increased the borders a little bit
here so you could even see it.
So to the points that Roman was talking
about just before, the full bleed imagery and the text
overlays, often you won't even have any background
to highlight in these cases.
So that's just not really going to work where the image makes
up the majority of the touch target.
The second no-no example here is not having any transparency.
So not only does this not look that great,
but you can actually see some of the content
that you're touching behind.
And here's an example of just sort of a good way
to do touch feedback on a particular image.
Another couple of examples, the press state and check state--
and actually this is a little tricky to see here,
simply because the opacity is 50%.
Let's see if we can zoom in a bit.
You can see it's slightly darker here than it is here.
But it's a little tricky to see.
So here's a few good examples of touch feedback
where the image is the majority of the touch target.
So on the left here we have Google Play-- oops.
On the left here we have Google Play Music.
And you can see here they're highlighting the entire card.
And they're also using the accent color,
the sort of orange accent color that's
sort of matches with Google Play Music.
The second example here is in Google Play,
the app store itself.
And this is one of the collections, the beautiful apps
collection.
So you can see here the cards are actually larger.
And again, the entire card is being highlighted here
to indicate the touchable region.
And you can see here the text is not overlaid.
The description of the application
actually falls below the main image.
But the entire touch target is being highlighted.
And then the last example here is the Google I/O 2013
application.
And you can see the avatars that we
were talking about before with the rounded circle.
And in this case, just the circle of the image
is being highlighted.
NICK BUTCHER: And as you were saying before,
I think this is an excellent opportunity
to really embed your branding in there.
So I think Google Play Music is doing a great job there
with extending its orange branding into the touch states.
Holo design language is in no way descriptive about color.
And you should really see this as an opportunity break away
from that default Holo blue and really
kind of bring your own branding to the table.
ADAM KOCH: Yeah, definitely.
All right, should we move on to focus?
NICK BUTCHER: Yeah, absolutely.
So while images are beautiful and great for grabbing
attention, sometimes that's not exactly what you want.
And you want to be able to emphasize other information
or kind of mute that information somehow.
Some good examples of doing that, that we've picked out
to showcases today-- the first one is from the Currents app,
a Google app for kind of reading newsfeeds.
So on the left you can see there's
a newsfeed with kind of nice big beautiful pictures,
and kind of a title and strapline and so on.
But once you've actually read that story
and you kind of come back up to the list view,
they do something quite interesting.
They actually completely grayscale the image
and they mute the text as well.
So it fades away visually, because I've
kind of processed that.
I don't need to go back to that.
And it makes it really easy to kind of pick up
where you left off or see what you've read
and what you haven't read.
So this is a great example of having both visual images
and then subduing them when you want them to not
grab the attention so much.
And just a second example, example
just to show you its versatility,
is actually when I was taking a screenshot of the Currents app,
I noticed that the screen shot notification
in the notification bar does the same thing.
And so the notification bar-- you're
going to be rubbing shoulders with all kinds
of different content, most of it going
to be presented by the system.
It's going to have a uniform look and feel.
So if you were to use kind of a full bleed, very kind
of colorful image there, it might look really out of place.
And it might be kind of a jarring experience.
It might not look like a notification.
So they do a nice job of desaturating the image there,
so it fits in better with its surroundings
and you can focus on what's important,
which is the touched target and the secondary action to check.
ROMAN NURIK: Should we move on to the next one?
NICK BUTCHER: A slight variation on this
is combining that desaturation with the touch feedback
that Adam was talking about.
Sometimes if you just apply a kind
of semi-transparent highlight over the top of an image,
you can get unexpected results with colors bleeding through
and so forth, especially if it's user generated content
and you don't know what it's going to be.
To provide more control to this, you
can actually combine these techniques
and on touch, desaturate out the image
and then overlay your touch feedback
to give a slightly more controlled appearance.
So in this example, I didn't include--
the natural state is kind of a maps image
that had grays, blues, yellows.
But we kind of muted those colors
and just add the touch target to have a slightly more controlled
effect.
ROMAN NURIK: Yeah, I think Google Play
Music is another example.
Orange doesn't really overlay well with some other colors.
So desaturating and then applying the orange, almost
like applying-- I think it's a hue layer in Photoshop,
just kind of manually changing the hue
of every color in the image.
That can kind of make it a more even look to the photo.
NICK BUTCHER: And the next example
of providing focus in the application
is using blur effects.
So similar to the Circa example you saw earlier,
I think that this is a Yahoo! weather application.
Which is kind of trying to run in to mostly
in the same screen.
So on the first thing, it wants to give as much prominence
to this beautiful imagery, which its sources can flicker out,
showing just how rainy London is.
But then when you want to show more information
on the screen, when you scroll up to show the forecast
and so forth, you want to mute that information.
So they do a great job of applying the blur effect there
to kind of really re-emphasize the content's changed.
So the content is now prominent rather than the imagery.
So this is a great technique.
ROMAN NURIK: Should we move on?
NICK BUTCHER: Yeah, the last kind of focus
that we want to talk about is just
really applying a dimming effect.
So you can use this to the great effect just
to kind of show an imagery, and then
as you scroll some text over the top,
in this example from Grand St., it then just
applies this kind of fade mask on top of it
in order to give some background protection to the text
and bring the text to the forefront for your attention
as well.
This can be really simply achieved by developers
just by setting the hint flag on an image as well.
[INAUDIBLE]
ADAM KOCH: Let's talk a little bit about placeholders.
So I think most apps actually do get this right, for the most
part, but any image that loads in your UI that
has any sort of load time, any load time at all,
should really have some sort of placeholder there.
I was playing with an app the other day that
had no placeholders, and I was just blindly
scrolling through a list not knowing what was happening.
So it really gives a good visual indication to the user
that something is going to load there
once it gets around to loading.
Ideally you should try and tailor the placeholder
to the final image, if you can.
If you have any sort of additional information
about the image, maybe the dimensions, the colors,
things like that.
ROMAN NURIK: Even like a low res cached version of the image.
ADAM KOCH: Low res cached version--
and I'll show you a couple of examples
on the next slides about that.
And then finally when the image actually
finishes loading a sort of subtle animation
to transition to the final image is definitely recommended.
Normally that just means a fade in or a cross fade.
You could do something a little more fancy,
but I would just urge you not to go too fancy.
Really, it should be quite subtle.
And then on the development side,
you should just make sure that image or that animation
doesn't run every time the list view scrolls up and down.
Getting kicked out, Nick?
[LAUGHTER]
ADAM KOCH: The way that the list view
works, it does recycle views.
So you've got to make sure that the animation isn't running
constantly every time that the list
view is scrolling up and down.
So let's have a look at some examples quickly.
So this is the Google Play app again.
And you can see here-- it's actually
hard to get these screenshots, because it does load
pretty quickly.
I had to go in the airplane mode.
Because of the sort of card-based UI of Google Play,
you don't even need sort of an additional placeholder image
here.
The card already conveys that something's
going to load in that space.
So it's a pretty nice example of sort
of baking it into the existing UI.
This is the system gallery application.
It's kind of hard to notice here,
but actually they use the dimensions
of the image that will load to sort of show that.
I guess Nick's having some room issues.
ROMAN NURIK: OK, so Nick will join us again.
ADAM KOCH: He'll rejoin us shortly.
What was I saying?
Yes, so-- as I said, it's kind of hard to see here,
but the dimensions of the placeholder image
actually match the dimensions of the final image.
So if you have a long panorama or something it'll be thinner.
And if you have a sort of portrait photo,
it'll be taller.
ROMAN NURIK: It's almost kind of like you're
at an airport, when the airplane is landing.
It's almost like the landing strip for the airplane.
It's kind of guiding it.
It's not really guiding the airplane-- well, in that case
it's guiding the airplane.
But here it's guiding the user.
It's saying, the thing that will load will be here.
It's almost like the helipad, I guess.
ADAM KOCH: And obviously it's not always possible to do this.
But where you can, where you have the extra information,
it's definitely a nice enhancement.
ROMAN NURIK: Seems like Nick has joined again.
Is that right?
ADAM KOCH: I don't know.
ROMAN NURIK: There he is.
ADAM KOCH: And then this placeholder
example we really like.
It's the Pinterest application.
And I'm actually not sure exactly what they're doing.
It looks like some sort of, I guess, average
of the colors in the final image that will load,
something along those lines anyway.
Not only do they show the sort of dimensions
of the image in the placeholder, but they also
approximate the color of the image that's
going to eventually load.
So, again, it was kind of hard to get these screen shots.
And you'll see the scroll is a little offset from each other.
But you can see here that the images sort of roughly
match up across these two screenshots.
ROMAN NURIK: Yeah, it's great.
This is one extra database field, right?
Just one extra database field that's
computed on the server side.
It just says, take the image, maybe average
the pixels in some way, and store that hex color
in this database row.
And with that you get this massive improvement
in the experience.
And Nick is gone again.
ADAM KOCH: We'll just keep moving on
and hopefully Nick can join us again.
The next topic is fullscreen galleries.
The biggest advice here is you should really
be using lights-out mode.
And then hiding the system UI, any sort of app
UI you may have, and the action bar, all at the same time.
Generally that's engaged in one of two ways.
Normally tapping anywhere on the screen
will sort of engage lights-out mode.
And then tapping back will bring back all the Chrome.
And then normally there's a timeout of some sort
as well, like maybe three, four, five seconds of inactivity
of the user not touching anything
and the Chrome will also just fade out.
Lights-out mode will be engaged.
The other thing you should always make sure to do
is support the standard gestures,
so pinch open and close to zoom in and out.
Keep doing moves, Nick.
NICK BUTCHER: Yeah, I think because we're running late.
ROMAN NURIK: This is what happens when we do shows live.
ADAM KOCH: And then double touching
to zoom in and zoom out again.
And you should always use the standards sort
of paging physics as well as the standard overscroll glow that
appears when you reach the edge of the gallery.
And then I guess on the development side
that normally means just using the standard ViewPager
class from the Support Library.
For photos, there's a class called PhotoView
by Chris Banes, who's on our team based in London,
that you can also use on the development side.
The last point is really-- in this particular case,
touch feedback is not really required.
Simply because the entire screen is really the touch target.
It doesn't really make sense to highlight the entire screen.
And also the UI really will respond instantly
to the user's touch, anyway, because the lights-out mode
will be engaged and disengaged immediately.
Any other comments, guys?
ROMAN NURIK: No, looks good.
NICK BUTCHER: One of my bugbears on this
is people who don't implement the pinch physics right.
So things like, when you have two fingers down doing a pinch,
you should still be able to pan around.
So I would just say, use one of these standard libraries
like PhotoView, because they do it all right.
They tend to have the right UX.
ROMAN NURIK: Actually, I'll talk at the very end
when we talk about graphs, I'll share a piece of sample code
that actually helps to do that as well.
ADAM KOCH: Quick, very quick ample
of lights-out mode being used.
Actually, bit of inception here.
We can show the gallery engaging and disengaging lights-out mode
here, right now, with the slides that we're using.
And on the development side, there's
actually a template that you can use called FullScreenActivity
that is part of Android Studio, and is it still part of--
ROMAN NURIK: Yeah, it's part of Eclipse.
ADAM KOCH: --Still part of Eclipse.
You can actually go and create all the code
that will get the exact right behavior
for engaging the full screen view.
The last thing I wanted to quickly mention
is transition animations.
So this is an example from tumblr,
and if you're viewing posts in screen on the left
and then you tap one on of the images,
that image will actually zoom out to be full screen.
And then when you tap, it actually zooms back again.
And this is quite nice.
So you're not breaking the user's flow.
On the development side, is there
is a class you can use called ActivityOptions.
This is mostly useful though, when moving between activities,
rather than staying within the same activity.
But it can sort of help assist you
build that animation between, say,
a grid of photos transitioning to a full screen
view of gallery photos.
ROMAN NURIK: And if you want to do this not between activities
but between different views for the developers out there,
there's actually a training class,
developer.android.com/training.
One of the training classes on animation
specifically shows you how to do these kind of zoom ups
and zoom outs animations.
All right.
So I think we were super long on time.
So I'm going to quickly just jump
into a bonus topic, which is graphs.
So graphs aren't really images.
They 're really more interactive images, if you will.
But we wanted to just show a couple
of quick examples of graphs done right.
First I want to mention that in general, these
are going to be interactive graphs.
So it's almost like an interactive image.
I think any time you look at interactivity, or zooming,
or anything like that, the Gallery
app-- the System Gallery app is generally
a very good example of that.
So you see multiple fingers going on.
Double touch works, and so on.
So I just want to show a couple quick examples
of graphs in use.
So the first is this interactive chart demo.
And this is available in the Android training classes.
So here you'll notice that you can
do the same thing you can with a full screen photo view.
You could zoom.
You can double touch to zoom in.
And then the other nice thing is that you
get edge effects, right?
So if you're looking to do something
like a graph, or basically an interactive, information-based
image of some kind, this is kind of a good starting point.
Another quick example is the Quotes app.
And we've covered this one before.
It's by the developer Michael Pardo.
I think the publisher name is slightly different.
But if you look at one of the graphs,
they actually do things a little differently.
They have this zoom bar, whatever you want to call it,
I guess.
And they have these little handles.
And you'll notice that these handles are actually
using the same visuals as text selection handles on Android,
so it's very, very clear what they do.
I think they're actually inverted.
They should probably be facing the opposite direction.
But it is still kind of cool that you can kind of do this.
And then as you touch and scroll across,
you see the specific values of those points.
So those are just two quick examples.
If you want to take a look at the sample code for developers
for how to do an interactive chart thing, here's the code.
There it is.
All right, so with that we quickly
want to do a shout out to Mike Denny who has just
joined the Android Developer Relations team as an Android
design advocate.
ADAM KOCH: Woo hoo.
ROMAN NURIK: He's going to be be based out of Mountain View.
Welcome, Mike.
He'll probably be joining us on future episodes
of Android Design in Action.
And yeah, I think this is probably a link to his
announcement post on Google+.
Please, all welcome Mike.
All right, I think that's it for our episode
after a rough start.
As always, I am your host, Roman Nurik.
ADAM KOCH: See you guys, Adam Koch.
NICK BUTCHER: Bye from Nick Butcher.
ROMAN NURIK: Bye from Nick Butcher
across three different conference rooms, right?
NICK BUTCHER: Yeah, you've had a little tour of the Google
London offices today.
Thanks for staying with me.
ADAM KOCH: See you guys.
NICK BUTCHER: See you guys when next time.