Android Design in Action: Camera Apps


Uploaded by androiddevelopers on 25.09.2012

Transcript:
[MUSIC PLAYING]
ROMAN NURIK: Hello, and welcome to Android Design in
Action, the third episode of this awesome show.
I'm Roman Nurik, your host.
I'm broadcasting live from New York City.
And we're joined to my right by Nick Butcher, coming in
live from London.
NICK BUTCHER: Hello.
And welcome back from your holiday, Roman.
I hope you enjoyed the shore.
ROMAN NURIK: Thank you.
Thank you, Nick.
It was quite an awesome holiday.
We actually went to San Diego, which was nice.
And I caught up on the show that you and
Adam did last week.
It was quite good.
Very good job.
NICK BUTCHER: Thank you.
ROMAN NURIK: So those of you that this is I guess your
first time watching, Android Design in Action is a show
where we basically look at some of the apps that were
previously reviewed in the Friday App Clinic broadcast
from Mountain View.
And we take a look at them in more detail visually, kind of
more from a design standpoint.
And we also re-imagine them, give them a
makeover if you will.
So today, we're going to look at a few camera apps,
specifically Camera Zoom FX and Glimmr.
So let's just get right into it and start with our first
app, Camera Zoom FX.
So Camera Zoom FX is basically a camera replacement that
gives you tons and tons of additional features.
It gives you special effects, things like overlays, things
like borders, hipster filters.
If you can see here, there's that FX button.
And it also gives you a bunch of customizable settings for
your camera like zoom and flash and things like that.
It also lets you customize the type of camera you use.
So you can use--
or the type of shutter, I guess.
You could use a single shot.
You could use kind of a time lapse.
You could use an interval or a countdown, things like that.
So we had a couple of comments on this app, a couple of
visual comments.
And I'll start it.
And Nick will jump in as well.
I guess the first couple of comments that I had visually
are basically there's a lot of controls on the screen.
And you can see that there's some controls on the left and
some controls on the right.
And there doesn't seem to be a strong order or purpose for
the placement of these controls.
The other thing you can't really see here, but a lot of
the assets were blurry.
And they weren't optimized for XHDPI devices.
And this is something that we see pretty often.
And it's something that's very easy to fix normally.
And there's really also a mixed bag of styling.
There's these faux-3D skeuomorphic
elements on the right.
There's these gradient custom 3D elements on the top right.
And then on the left, you have flatter icons.
So the styling was really interspersed.
There's different kinds of styles throughout.
So that was one thing that we wanted to look into changing.
And you'll see in the next couple of screens as we review
those that there are also different styles for the
different pop-ups and dialogs that come up.
Also, you'll notice that there's the--
actually, Nick, do you want to say anything about these three
little dots on the top right?
NICK BUTCHER: The button of shame.
ROMAN NURIK: The button of shame.
NICK BUTCHER: Yeah, so this is for developers who haven't yet
optimized their application to run on devices with software
navigation keys.
And so you get this emulated button.
And it's kind of ugly, and kind of hard to hit, and
doesn't really offer the best experience for your users.
ROMAN NURIK: Yeah.
And any other thoughts on Camera Zoom FX, Nick, or
should we jump into the redesign?
NICK BUTCHER: Yeah, I think the two major things for me
was the inconsistent styling, which wasn't really the
Android Holo type theme that you would expect perhaps,
coupled with just some clarity about what the iconography
meant and how to actually use the app.
We found that if you just look at the screen, it isn't too
intuitive how to go about it.
So let's see what we do with it.
ROMAN NURIK: OK.
So let's look at the redesign.
And you can see here that most of the placement, I guess, the
general placement, having controls on the left and the
right of the screen, we kept.
But we did do a couple things differently.
And let me talk through all those individual points.
So the first thing is that we wanted to simplify the mental
model for users.
We basically put camera and camera-related
settings on the right.
So all on the right, you see things like focus, change the
camera from front to back, take a photo,
settings, and then zoom.
And then on the left, we just put effects.
So everything that is kind of the special sauce of this app,
the effects and the cool things you can do to your
photos, we put on the left.
So it simplifies the model for users.
The other thing that we did, and you'll see this later on,
is that we combined the settings here, this shutter
type setting, with other camera settings that were, I
think, under this button.
We combined that into a single affordance here.
And we'll see an example of that in a bit.
The other thing I wanted to point out is that we made the
actual shutter button larger.
And this is actually coming from feedback that Ian
mentioned in the App Clinic last week.
Basically, if you place something very close to a
system button like the Home button, users are very likely
to hit that button accidentally.
And so here, what we did was we made the camera button
larger both horizontally and vertically so the tap target
is much more obvious.
We also put a lights out mode so that you hide the Home
button, the Back button, and the Recent button so that it
doesn't crowd your vision.
And another thing I'll mention is that we used more standard
iconography throughout, and a standard style.
We used a Holo dark style on a semi-transparent action bar.
So you'll see here that a lot of these icons
are more common icons.
I do want to point out that some of these icons are
actually from androidicons.com by Guenther Beyer.
And we mentioned Guenther's work on the first
episode of the show.
So a lot of these icons are from there as well.
So thanks, Guenther.
The last thing I want to mention is I guess about--
actually, there's a caveat here.
You'll notice that there's these not really action bars.
There are these control bars on the left and the right And
they're semi-transparent.
Now, if you've developed a camera app before, you may
think, oh, it's not always the case that I can get a
full-screen picture, a full-screen view.
So in those cases when you don't have a full-screen view,
there are a couple of options.
You can do letter boxing.
You can also choose to make either the left or the right
control bar fully black instead of semi-transparent.
And there's lots of other options that you could do.
And I think in a very fancy case, you could even start
mirroring the edges of the screen or mirroring the edges
of the preview around the borders, things like that.
OK, so that's the design at a glance.
Nick, do you have any comments on the
difference between the two?
NICK BUTCHER: Yeah, I instantly loved the
improvements on the shutter button because you've managed
to marry the visual identity of the application.
And so if you go to this application's listing on the
Play Store, it has these colorful elements, which
you've picked out in the shutter button
really, really nicely.
And I'm also a big fan of using the overlay style, the
semi-transparent button bars as well because it makes you
feel like the picture is getting the whole
window, which is--
it's a camera app.
This is what it's all about, taking photos.
So I love the way that we've extended that photo to fill
the edges where possible.
So that's two of my favorite elements.
ROMAN NURIK: Yeah, and like I mentioned before, one of the
hardest things is getting a photo to fill.
I actually don't know about Ice Cream Sandwich or Jelly
Bean, if we have this.
But one option is, if you can, maybe even crop the image that
you don't see the top and the bottom.
There's lots of different options.
But that's just, as somebody that's worked on a camera
before, it's definitely something that comes up.
It is difficult to do.
But if you can do it, your app can look really great.
So let's move on to the next screen.
In this next screen, you'll notice that we moved some of
these deeper, nested effects pop-ups.
Again, we moved the effects from the right to the left to
simplify the model for users.
We moved this panel to the left.
And so when you select this Edit control, you see
basically this secondary set of controls to its right.
And in the original app, there's actually a third set.
So you could imagine having three sets here.
And at that point, you're really thinking more about the
controls and finding the thing you want than the photo.
So maybe potentially overlaying on top of the
photo may be OK.
But we didn't go too much in depth there because at that
point, it's really up to the developer what
they want to do.
And I just want to, in the interest of time, switch over
to this screen.
And this is where you basically
select a shutter type.
So you can go from a normal to a timer to--
I actually don't know what a collage does--
stable shot.
Lots of different shutter types, and
that's really awesome.
This is a pretty unique feature that it has all these
different types.
But again, we decided to move that into settings.
So basically, you touch Settings, and then, touch
Normal Shutter Type and select which one you want.
You could probably even improve that flow faster by
having a special widget at the top, maybe one that
horizontally scrolls.
But that's just one way to do things like that.
And the reason we did this was to really just simplify,
again, really simplify this fairly complex app so that any
types of settings related to camera go into one place.
Nick, any parting thoughts for Cameras Zoom FX?
NICK BUTCHER: Yeah, I love what you've done with this.
I think it's a very powerful app that lets you do a lot of
different things with images.
But having its custom UI means it's quite hard to take in all
those different options that you can do.
So I think using things like the standard design language,
the Holo icons and standard controls like spinners, really
makes it much quicker to pause and understand what's going on
in the app and really get down to the functionality of what
you want to use.
ROMAN NURIK: Yep.
OK, so let's move on to the next app.
And the next app is Glimmr.
So I'll let Nick go ahead and jump into
his thoughts on Glimmr.
ROMAN NURIK: So basically, the app Glimmr is an application
for letting you access photos on Flickr, the
photo-sharing website.
It's quite a new app on the market.
And some people might be surprised to see us addressing
it on Android Design in Action because, overall, I actually
really like it.
It's a really nice app.
It's using a lot of the Holo design language, things like
horizontal swiping and so on are present.
But as with any Android design project, there's one aspect
which you have to consider, which I don't think they've
really addressed too well, and that is designing for all
different device varieties out there.
So I've actually taken this from a different standpoint
than usual.
And we've run this on a 10-inch device on a tablet and
looked at how it comes out and then decided to apply more
Android design philosophy on how we could improve things.
So moving to the third screen here, if you can make it out,
this is the first thing you're presented with when the user
installs the application.
It's a log-on screen.
It's quite sparse, minimally, extremely sparse.
It just says, "Welcome to Glimmr," and a Log-On button.
And I think this is a real missed opportunity.
When a user installs your application, they don't always
know exactly what it does or how high quality is.
And you've got a very short amount of
time to impress them.
In fact, if the first thing you show them is a sparse
screen with a button forcing them to log in, it's almost
like you're throwing your hand upward and
showing a stop sign.
And I'm sure there'll be a drop off here where a number
of users just don't even press it there and carry on, which
would be a shame, because they'll be missing out on a
great application.
So what we've done here is we--
if you want to go to the redesign.
ROMAN NURIK: Yup.
NICK BUTCHER: We've made content come to the fore and
offered a different experience when you load in.
So Flickr is about photos, right?
It's all about sharing photos.
So the first thing you see when you launch this app, in
my opinion, should be some rich, rich imagery.
Flickr exposes a feed called interestingness, which shows
some great imagery.
So what we've done here is we've pulled out
some images from that.
And this is the first thing you now see.
So instantly, it's engaging.
It speaks to what this app is all about.
It's all about beautiful photographs.
And what's more, it offers some functionality now without
logging in.
So there's a strong call to action there to log in today
with your Flickr account.
But alternatively, you've got a little hint there saying you
can touch a photo.
And this'll take you right into the core of the app, say,
viewing photos and seeing comments on the photos.
So straight away, we're not logging in.
We're exposing more content to the users.
And also, we hope you'll agree it looks a little bit better
at taking advantage of the extra screen real estate
available to you on this larger device.
ROMAN NURIK: Yeah.
The one thing I want to point out here, Nick, is Nick did
the design for this app.
And one of the things that instantly makes your app look
better-- and we've done this in past episodes of the show--
is just using different weights of Roboto, different
fonts in that family.
So in this case, Nick, you've used Roboto thin, is it?
NICK BUTCHER: Yeah, Roboto Thin and then Regular.
ROMAN NURIK: Yeah, so using Roboto Thin is--
I just want to point out, it's really great for
really large type.
So if you have something like an initial screen that says
"Welcome," or you want to display a nice, big piece of
text, especially on a tablet for like 48, even 64, 72
scale-independent pixel sizes, Roboto Thin is really awesome.
NICK BUTCHER: Cool.
ROMAN NURIK: So let's move on to the next screen.
And this is the screen where--
actually, Nick, you want to talk about it?
It's the Sets screen.
Is that right?
NICK BUTCHER: Yeah.
So once you get into the app, once you've logged in with
your Flickr account, it offers different views on your data.
So you can see your photos, your sets, which is
collections of your photos, folders, if you will, as well
as seeing groups and things from your contacts.
So I've pulled out the Sets screen here because, as you
can see, on the tablet, you get these horizontal,
full-width images which just really don't scale up too well
to a larger device.
So we've look at that.
And we've applied a different kind of layout to really take
advantage of the real estate available to you.
ROMAN NURIK: Yeah, so I've just moved over to the
redesign screen.
I just want to also point out regarding those full-width
widgets, basically any time you have anything that's full
width on a tablet, you have to think
twice about it, basically.
Because that's just a lot of space, not even for lines of
text, but even photos.
Photos are very, very rich.
But when you have such an awkward aspect ratio, like
fixed height in a full-width row, you don't really get as
much out of it.
So yeah, Nick, do you want to talk about the redesign?
NICK BUTCHER: Yes.
There's a few things we've done here.
Firstly, we've switched over to a dark theme as well, as we
showed on the log-on screen.
The thinking here is really that, as we said before, we
want this to be all about the photos, all about the imagery.
And having a darker background really lets those images stand
out, really makes them pop.
So that's the reasoning for switching over to the fully
dark rather than the light theme or the dark action bars
as we saw before.
I've also moved away from the horizontal swiping tabs, the
swipey tabs, because that very long gesture on a tablet
device is a bit hard.
It isn't as intuitive like switching
between pages of content.
And by pulling the tabs out right into the action bar
where we have more space now in this size, it gives you
instant access to switch between these four major views
of your data.
ROMAN NURIK: Yeah.
NICK BUTCHER: So the other thing we've obviously done
there is we've gone to a grid view to make better use of the
real estate and switched it up from vertical
to horizontal scrolling.
So as you can see, the images are going off to the right, so
you can scroll horizontally and see more.
This screen's quite heavy, I guess, influenced by the
standard Android gallery and applications like Google+.
But we really hope we've captured the spirit of Flickr
and married it with a really rich viewing environment.
Some of the minor details that you'll want to call out as
well is we de-emphasized some of the visual information.
I found using the Glimmr application that there was a
lot of information jumping out at you, competing for my
attention from the photos.
So, for example, if you look at the visual treatment of an
individual set here, like a folder, we've made it 90%
almost about the picture.
And then there's a very small callout saying
the name of the set.
And then less important, secondary importance, we
de-emphasized the number of photos in the set.
So we've used this relative size and weight of text and
color to show the relative importance of
the information there.
So I think this really makes the photos stand out.
And then, if you really want to know how many photos, it's
easily accessible.
But it doesn't compete for your attention.
ROMAN NURIK: Two things I just want to call out specifically
that I like about the changes here, Nick, is just in terms
of padding and font treatment or text treatment, you've
given the text, like in this case Waves.
That's the title of the set.
You've given it slightly more padding around the top,
bottom, and especially the left.
And using either 4, 8, or 16 DPS of padding is
usually a good idea.
And I think that just helps clean it up a bit.
In the current version of the app, you'll notice that these
text labels-- and it's very hard to see.
I apologize for that.
But these text labels, they're scrunched over to the side and
squeezed by the top and bottom borders of that
semi-transparent black box.
So giving it some more spacing just helps bring it out ever
so slightly so that it's a little more legible.
So let's look at the last screen.
And this is the photo detail screen.
Basically, when you touch a photo, you
jump into this screen.
And there, it's basically a full-screen photo and gives
you a couple of actions at the top.
Nick, do you want to jump into your analysis?
NICK BUTCHER: Yeah.
You can probably skip on to the next slide as well.
It's quite a simple screen, really.
It's showing you a photo.
But there's a few things which I wanted to change about the
screen, really.
Firstly, I changed over to using an overlay action bar.
I hope it comes out in the screenshot here.
So that's basically, I wanted the screen to be
all about the picture.
I didn't want to border at the top.
I wanted it to feel like the photo was the
most important thing.
If you've used the application as well, you can tap on the
main picture, and it'll hide the action bar.
But it actually has a slightly jarring animation where it
readjusts the size of the image just
doing a layout pass.
And so using an overlay action bar will negate
that issue as well.
The other thing is if you look at the title of the photo,
it's kind of burned onto the photo in the image.
Even if you go into the viewing mode where you hide
the action bar, this title is still going to hide the image.
So I've changed that and removed the Glimmr name from
the action bar.
Because I think by this point, you're using the app, you've
got the icon.
You know which application you're in.
And just replaced the title with the photo title there.
ROMAN NURIK: I think providing that sense of place of where
you are, that's really what that part of the action bar is
for, to tell you not only where you can go and what you
can do, but where you are.
And so the action bar does have a built-in title and
subtitle feature.
But in this case, Nick has chosen to use a custom title
area that highlights that it's a certain photo by the author
of the photo.
So let's move on.
Sorry, go on.
NICK BUTCHER: The only last minor thing is I cleaned up
the iconography in the action bar as well.
I feel like the functions it's offering here, like
favoriting, sharing, is all quite common iconography.
So I felt like it cleaned it up having it as just icon
rather than icon and text because you still have the
long press to get a tool tip as well if you don't quite
understand what's going on.
But I just felt like it removed all those distractions
away from the photo and just simplified it.
ROMAN NURIK: Yeah, absolutely.
So let's look at the other facet of this screen--
comments.
Do you want to talk about that, Nick?
NICK BUTCHER: Yeah.
Lastly, tapping on the comments button or the
information button lets these pop-ups which overlay the
photo obscuring it.
And I decided just to give that a
little bit of a treatment.
I wanted to carry on that theme that
content is king here.
It's all about the photograph.
So I went for an overlay style again.
So I hope it comes out.
This is supposed to be a semi-transparent pop-up box
that comes up.
And it's almost like a toggle mode.
So you can see here when you hit the comment button, this
panel will pop up.
And the idea here is that will stay up.
So as you keep on horizontally swiping to the next photos in
the set, that'll stay up, and it'll just switch over.
Similarly, if you hit the Info icon next to it, the idea is
it'll occupy the same space.
You could have the fun animation of it, perhaps
rotating around, showing you some
information about the photo.
And what we've done here is I feel like having this overlay
information rather than that obscuring pop-up, it really
takes better advantage of the screen real estate available
on the tablet because you can still see a large amount of
the image, which is what this is all about, and then get
your comments experience as well.
ROMAN NURIK: Yeah, awesome.
I especially like just the treatment of
comments and text.
So basically, within the comment, you have the author,
the comment author.
And there's lots of different things you can do to make text
seem clickable or touchable or interactive.
Basically, having it stand out, giving it some color is
one sign, one indication.
But another thing you can do is you could potentially use
underlines.
You could also just have, if you choose, instead of having
the quick contacts, you can have the profile icon actually
jump you there as well if you decide that quick contacts
isn't for you.
NICK BUTCHER: If the author's watching, this is also a
subtle hint that this application, it already in the
background checks for new photos
from your Flickr friends.
I've love for them to implement a contact sync
adapter so that it joins up between contacts and the
Flickr profile so that you can use these quick contact badges
to quickly pivot from your other applications into their
Flickr profile and so on and so forth.
I love it when applications integrate like that.
ROMAN NURIK: Yeah, basically any time you have any sort of
social app, you should do things like contacts
integration.
You should do things like social stream API integration.
That really helps you integrate even
further into the OS.
So let's move on from the redesign of Glimmr to a new
section of Android Design in Action, Android Design News.
And you guys did cover this last week.
But we do want to help promote some of the awesome work
that's been done in the community.
And so this is a section that we're hoping to do potentially
every week for the show.
And so let's start with Android Design News.
And the first bit of news--
actually, Nick, do you want to start with the
first bit of news?
NICK BUTCHER: Yeah, so I just wanted to highlight an
excellent library of assets which Cyril Motier of Green
Droid fame has opened sourced to the community.
He's made some map markers for making map pins, which are
very true in nature to Google Maps style.
So these don't actually ship with our Maps SDK, so these
are some great assets to getting you bootstrapped and
customizing from there.
So thanks very much, Cyril, for sharing these.
ROMAN NURIK: Yeah, absolutely, thank you, Cyril.
The next one is from Smashing Magazine.
And Smashing Magazine, for those of you who aren't aware,
it's a magazine that's dedicated to teaching the
world basically about different aspects of design
and also implementation.
So if you're a web developer or an Android developer or web
designer or an Android designer, the Smashing
Magazine is a great blog to follow.
They often highlight some of the best stuff that's going on
in the industry.
In this case, what they've done is they've highlighted
some mobile sketching templates.
And they've actually released mobile sketching templates for
Android, iOS, Windows.
I believe it's also tablet and phone.
So if you're interested in doing some sort of real-world
sketching with real pen or real paper, pencil and paper,
then this is definitely something you should go ahead
and download.
NICK BUTCHER: That's what I used when I was doing the
sketches of Glimmr.
ROMAN NURIK: Nice, awesome.
Next is a similar kit from Taylor Ling, who's one of the
awesome community folks that's creating free, downloadable
assets for the rest of us.
It's a GUI sketching kit, basically, very similar to the
previous kit.
But it's from Taylor.
And thoughts, Nick?
NICK BUTCHER: Yeah, I think this is nice.
I found the photo in Smashing Magazine maybe slightly
heavyweight.
And I found myself--
it was clearer using Taylor's ones there.
They're not quite so heavy.
So your sketch actually stands out over the frame, rather
than the Smashing one.
So take a look at them both and see which
ones work for you.
ROMAN NURIK: Awesome, OK.
In other news, Android Niceties--
is that how you pronounce it, niceties?
I think it's niceties.
NICK BUTCHER: Yeah.
ROMAN NURIK: So Android Niceties, which is a blog, I
guess a Tumblr, blog, slash--
it's a media outlet, I suppose--
that highlights awesome design work in the world of Android,
celebrates its first birthday.
I think this blog highlights some of the most awesome stuff
that's coming out of the community.
You should all try to follow it if you're interested in
seeing examples of some of this stuff in action.
NICK BUTCHER: Yeah.
Happy Birthday, Haberdash.
I'm probably murdering their name.
It's probably easier to say your name on Twitter.
So keep up the good work.
We love you, Rob.
ROMAN NURIK: Yeah, absolutely.
And I think this is lastly.
Yeah, lastly, Nick, do you want to talk about Marie's
awesome redesign of Rich's app?
NICK BUTCHER: Yeah.
I think inspired by that some of the comments from the App
Clinic and some of Roman's redesigns from last week,
Marie has joined in the spirit of the redesign movement and
has applied the Holo treatments to the Ultimate
Stopwatch application by our colleague Rich Hyndman.
So she shared all the assets and everything.
So it's a great example of taking a before and after
shot, like we've done.
So do check it out at the link.
ROMAN NURIK: Yeah, I especially love the work that
she's done with taking something like a stopwatch and
making it tablet friendly.
One of the things that folks sometimes have trouble with is
imagining, is my app really useful on a tablet?
Does it make any sense on a tablet?
And in general, the answer is yes, because it's just--
when a user has both a tablet and a phone, they'll expect
that when they jump to their tablet, the version of the
Google Play Store on their device that they see on a
tablet is basically going to be the same
thing on the phone.
So if they happen to love your app on the phone and it's just
not available on a tablet, or it doesn't look very good, or
it's not really optimized for a tablet, they're going to
think twice about using your app next time.
They may use a competitor's app on a tablet.
So in this case, Marie's just taken a step in taking
something that really is more like a square
thing, like a stopwatch.
A clock is really a square thing.
What do you put on the sides of it?
There's a lot of white space.
And she's taken that and merged different parts of the
phone app into a single screen so that you have a dashboard
of your different stopwatches.
NICK BUTCHER: She also is thoroughly aware of the
Fragments APIs.
It's a great way of showing how to do designs for the
Fragment way of thinking as well.
So check it out.
ROMAN NURIK: OK, so that's all we have for the show today.
Tune in next week where we will cover, I believe, travel
planning apps.
We'll have to see what the guys in the App Clinic go
through, which apps they review.
So we'll take a crack at some of those and review them, or
actually redesign some of the screens from those apps.
So thanks for tuning in.
As always, I'm Roman Nurik.
And with me here today was Nick Butcher from London.
And thanks, and hope to see you next week.
NICK BUTCHER: Bye!
[MUSIC PLAYING]