The Friday App Review: Recipes


Uploaded by androiddevelopers on 03.08.2012

Transcript:
>>Reto Meier: Good afternoon, everyone, and welcome to the Friday App Review. My name
is Reto Meier. I'm joined by Fred Chung.
>>Fred Chung: Good afternoon.
>>Meier: We're going to take a look at some apps today. We asked you guys for some suggestions
for recipe apps, and you did not give us any. Which means one of two things: either you
guys don't like recipe apps, or there aren't any recipe apps.
>>Chung: There was such an overwhelming crowd.
>>Meier: Yes. [laughs] You just couldn't pick from amongst the very many good ones.
>>Chung: There are just too many.
>>Meier: Apparently so. So what we're going to do this week instead is have a look at
some of our favorites. Fred's got a couple of food related apps. Which ones are you going
to take a look at today?
>>Chung: Yeah. We're going to have a look at My Food and BigOven.
>>Meier: Excellent. The reason I was asking you guys for recipe apps was because I didn't
know of any goods ones. So rather than spend time looking at apps I've never looked at
before, I'm going to take a look at some of my favorite apps, in terms of apps that I
use a lot of. And that's Series Guide, IMDb, and, if we get time, I'm going to take a look
at TripIt as well. Now, before we get started, I just want to
clarify a little bit about what we're trying to achieve here at the Friday App Review.
Unlike a lot of the review shows that you may have seen, we're not really focused on
giving a fair and balanced evaluation of what are some great apps that we think you guys
should be installing. We're part of a developer relations team here at Android. Our focus
is really on trying to help developers build better apps. So to do that, whenever we look
at these apps, we're really trying to dissect them, take them apart, see what they're doing
right, see what they're doing wrong, and really try and create a learning experience so that
other app developers can learn from the mistakes and successes of these other apps.
Really, the app review doesn't make a lot of sense as a title, so we're actually going
to change the name of our show live on air. So from this point on, we're going to become
the Friday App Clinic. Now, in order to maintain that new branding, I have some props. I'm
going to just get off camera and get my props. [shuffling noises]
>>Chung: Reto's going to come back soon. [laughs]
>>Meier: [laughs] Don't panic. [more shuffling] And Daniel, if our producer off camera can
also switch our title, so that we can become the Friday App Clinic, that would be fantastic.
>>Chung: We have double to size of our production team.
>>Meier: [laughs] That's right. Twice as many producers.
>>Off-camera engineer: Oh, did you remember to tell your off-camera engineer to include
your new title in his title set?
>>Meier: Yes. [laughs] One moment. That's all right, we have all the time in the world.
I have my--
>>Off-camera engineer: You have an hour.
>>Meier: I have an hour.
>>Off-camera engineer: Actually, more like 45 minutes.
>>Chung: We have 45 minutes. That's close to an hour.
>>Meier: 45 minutes?! Oh, then we should get this shit sorted out. All right. We have our
doctor Droids. I have my lab coat.
>>Chung: You have a lab coat. Where's mine?
>>Meier: You have to bring your own coat.
>>Chung: I have to order it.
>>Meier: Yeah. I mean, come on, man!
>>Chung: That's what that box was for.
>>Meier: Absolutely. You need to order your own equipment.
>>Chung: Just pretend this is a white--
>>Meier: This is a white coat. Absolutely.
>>Chung: Can you color correct it?
>>Meier: Color correct it. Yeah, you should have worn at least a green shirt, so we can
make due.
>>Chung: Next time, maybe.
>>Meier: That's right. That's right. I snuck this up on Fred here, as well. This is his
first clinic too. So I can be the official clinician. [laughs] And Fred can continue
to be a reviewer. So let's get started. Let's have a look at
one of your apps. Let's start with--. Where would you like to start?
>>Chung: Yeah. I'm excited to stick to something that is related to recipes. Both of these
apps, as I mentioned earlier, my Food and BigOven-- if we could switch to the tablet,
please. Both of these apps try to tackle the problem where you're trying to figure out
what's for dinner. Then you have to figure out what kind of dishes you would like to
get. After the preparation stage, you can translate the types of ingredients into some
sort of shopping list. These two apps try to solve this problem. They try to do it a
little bit differently. Why don't we have a look at my Food? As soon
as this app is launched, it's pretty self-explanatory. It's got three high level menu items that
you can pick from: shopping list, recipes, and meal planner. All of these, very prominently
displayed, which is nice, which makes it very easy for users to comprehend. You would go
into recipe first, but before diving into the content of recipe, I like to highlight
that when I tap on any of these targets, there's no touch feedback. I would, like what we've
been asking developers to do. When you come up with graphics icons, be sure to have different,
have them represented in different states to represent the natural state, focus state,
and pressed state.
>>Meier: That's really important, particularly for accessibility. If you want blind users
to be able to use your app, or even just people who are using accessibility type features
to make it more easy, then having those touch target selectors is really important.
>>Chung: Before going to any of these, let's have a quick look at the menu. There's help,
settings, the items that, the usual suspects, basically, things that you would expect to
see under the overflow menu.
>>Meier: Absolutely. I want to point out, as well here, that looking at this main screen
here as well, you can see that we've actually got an action bar, which is good. But in this
case, I think actually it would make a lot of sense to have an action bar which was perhaps
translucent, because you've got this whole screen effect here where it's this immersive
thing, completely custom controls. The action bar almost looks a little bit plunked on top.
Perhaps changing the color of your action bar to match the background or have a translucent
action bar would be an interesting design choice.
>>Chung: I actually like the suggestion on translucent. Let's have a look at the recipe
screens. As you can see, in this drop down box, there are different types of occasions
like starter, sides, dinner, whatever. There are different categories that you can choose
from. It prepopulates it with a bunch of delicious dishes.
>>Meier: [laughs] Absolutely.
>>Chung: You can swipe food, the selection of dishes. These are the top level recipe
items. What you can do is look at the various ingredients and the steps involved in the
preparation of the dish. What I would suggest is that when you have a tablet, the most probable
use case is someone using your app in a kitchen. I might be sitting three to four feet away
from the tablet. The font size as it stands is a little bit too small.
>>Meier: Yeah, it is, it's a little small.
>>Chung: I'm having a hard time in reading the text.
>>Meier: Exactly. What you want to really have is so that you can set up the tablet
on your kitchen bench, probably a little further away from the food--
>>Chung: Definitely.
>>Meier: --and sources of heat [laughs] than you would want otherwise. You really want
to be able to see this text from a good five to ten feet away, assuming you have a bigger
kitchen than me.
>>Chung: Have a look at the overflow menu. I wish they had an option where you can increase
the font size, but it, at least, I can't find it from here. What's interesting is that for
each step, you can go in and edit it. Sometimes people like to deviate.
>>Meier: That's nice. Absolutely. There's not a recipe that I use that I haven't modified
slightly.
>>Chung: Exactly.
>>Meier: You know what else would be really nice here, I don't know if there's any support
for it, but to have the ability to add pictures for each step. I find that's really useful
if I know if it looks the way it's supposed to, if I've done things the right way. Like
when they say "brown it", how brown is it supposed to be? Those sorts of things would
be really nice. A picture of the finished product and also a picture of each step.
>>Chung: Great suggestion. You can capture it for motivation.
>>Meier: Absolutely. This is what I would do: I would do the recipe and I would take
a photo of each step so I was able to see the process of going through. And potentially,
even the ability to add a video. If I record the whole thing of how it all went.
I see we've got Roman on screen. What do you think, Roman? If you've had a chance to look
at this app, what are your thoughts from the UI perspective?
>>Roman Nurik: I haven't had a chance to take a full look, but just from looking at what
you guys are showing now, the same common problems that we see everywhere are showing
up in this app. And they're not really problems, it's just I think probably the lack of a tablet-optimized
UI inside a tablet. One thing I wanted to mention was just on the very home screen,
I guess the top level screen, that has that massive dashboard, I just wanted to make a
shout out for, I guess, against dashboards and using dashboards, especially on tablets.
There are lots and lots of different ways you can show a top level screen. Some of those
ways are actually listed in our design guidelines under the app structure pattern. I definitely
recommend taking a look there to see how you can get away from a dashboard. You don't necessarily
have to completely remove the dashboard, but one thing you could do is potentially include
content break there, so when you're showing the big icons, the big buttons, to get into
the section, show the preview of the content that you're about to see when you tap into
that section. It's just one of the things that--
>>Chung: Some pictures, right. Some pictures of the dishes that you're trying to prepare.
That's great. Let's go back to recipes. As I was testing this application, I tried to
add a new dish. At first, I thought, this "Add" button represented it, but instead--
>>Meier: That's a step within the existing recipe.
>>Chung: Right, right. But instead, what I was looking for is hidden in the overflow
menu.
>>Meier: Oh, I see.
>>Chung: "New recipes." So I think it would be great to expose this feature on the action
bar if there's space.
>>Meier: Yeah, definitely. I think there is plenty of space in the action bar for that.
"Add recipes" seems like it would be one of the main features of what you want to do within
an app like this. Absolutely.
>>Chung: Let's have a quick look at "shopping list." You can have various shopping lists
associated with the recipes that we looked at. Let's say you've decided on what to cook
for dinner. Then you can quickly transfer the list of items into your shopping list.
I think it's a good use case where at home, the user might be using a tablet to come up
with the list of recipes, and then, based on the list of recipes, you come up with a
shopping list. Then if you support something like syncing with the Cloud, when you take
your Android device out, you can have the shopping list with you at the grocery store,
where it can mark off various items.
>>Meier: Do you know if this has the ability to sync? Like, are you signing in at any point?
If I have my tablet, which lives in my kitchen, or at least in my living room and kitchen,
to be able to do recipes, can I sync that up with my phone so I have my shopping list
with me?
>>Chung: I think there was, but I can't recall. But assuming it does, I think it would be
a good use case.
>>Meier: Definitely. Nice. That would be my wish list. I think, for me, to just go ahead
and start using this would be pictures, lots of pictures. Food, eating, and preparing food:
a big part of that is visual. Being able to see what the cauliflower cheese soup looks
like is going to make it much more likely for me to actually create it. Certainly, whenever
I'm using cookbooks and recipes, seeing that picture of what it's going to end up like
is a big thing for me.
>>Chung: Definitely. I will also say that for this kind of app, where initially, there's
a bunch of data entry involved, you might want to think of ways to make it easier for
users, because I imagine if it becomes too cumbersome to enter a lot of text, you will
experience a lot of drop offs. You may think of ways to maybe support upscanning for barcodes
and stuff like that that would make it a lot easier for users to use it. Or, alternatively,
you can have a lot more prepopulated items for people to just pick and choose from an
existing list. That would make the user experience better.
>>Meier: Yeah. In fact, thinking this through, that's probably the way I would start to use
this. Right now at home, I have this big folder with recipes which I've pulled out of newspapers
and photocopied from people and printed out emails. I'm probably not going to want to
enter all of that in straight away. My first step would just be to photograph each one.
Just give it a title and then scan in the picture. Then I can always go through and
actually populate the fields separately, later.
>>Chung: We're getting the app.
>>Meier: We're getting the app.
>>Chung: There's the sign.
>>Meier: We have 35 seconds left to go.
>>Chung: We have a new prop here.
>>Meier: We have a gong, too. We want to run out the time just so we can have the gong
go. It's very important. [laughs] I think we should actually just wait 22 seconds--
>>Chung: Yeah, let's do it.
>>Meier: --until it goes off, but let's see. We've got the categories here. We've got everything
else. It's actually looking pretty good. Why don't you gong us out, Ian?
>>Chung: Awesome. All right. That's our signal.
>>Meier: I really hope that that was audible.
>>Ian Ni-Lewis: Look, it just came off.
>>Chung: Wow, how did that happen?
>>Meier: [laughs]
>>Chung: Oh, great. All in all, it's a great start. It looks like the development team
is a pretty small team.
>>Meier: Absolutely. If guys are watching, if you hear about this, then do reach out
to us, and we'll try and help to give you that extra feedback to help really make this
into our go-to recipe app.
>>Chung: Definitely.
>>Meier: Now, I don't want to cut Fred off here, but I didn't really think this through,
because I haven't had lunch, and looking at recipes is making me hungry. So let's switch
across and have a look at one of these other apps.
>>Chung: Sure.
>>Meier: That work for you? All right. Let's restart our time. I will try to be a little
more conscious of time.
>>Chung: Which one do we want to look at?
>>Meier: I want to have a look at Series Guide. This is an app I use quite a lot of. I think
it was actually Roman who put me on to this. You a Series Guide user as well, Roman?
>>Nurik: I am, I absolutely am. I think this app is one of my favorites for tracking episodes
and TV shows.
>>Chung: Awesome. Let's switch to the tablet.
>>Meier: Cool. Yeah, let's have a look at the tablet view. One--. These are some of
my favorite apps. I'm going to be particularly, not harsh, but I'm going to have a pretty
high bar for some of the comments that I have here for them.
One of the big kicks that I'm on at the moment is trying to create apps that present a magical
experience. Apps that you're not really thinking about them running on a phone, you're not
thinking about the internet connection, you're not thinking about anything other than the
functionality that they provide. That's the basis around which I'm going to be providing
some of this feedback. If you look on the getting started guide right
here, we're asked to choose our primary content language. We have the ability to connect to
a social network associated with it, and an option to send developer usage statistics.
This is all fair enough, but the problem with it is it's straight away. I open the app and
I'm presented with all of this text, all of these choices. Generally speaking, I find
it much better if you just load up the app and it straightaway dumps you into whatever
it is that the app is supposed to do. So I would suggest to the developers here to actually
see if you can remove all of this on startup so that you're just able to get straight into
the gear. I'm a little concerned about what I'm hearing over my shoulder, but we'll continue.
[laughs]
>>Nurik: The other thing I want to mention is when you just get into an app, usually,
you're presented--. Or, in apps that are just list views or just where the primary content
pane is basically empty because you haven't done anything in the app yet, there's no need
to present a dialog. Just present any sort of introductory material like "stuff that
you do happens here" right in line. There's a big opportunity to use the empty view. When
your list view has no items in it, use the empty view to be more visual. Do so right
in line in the content [indistinct] dialog if you're going to do it at all.
>>Meier: Yeah, I totally agree. In fact, if we dismiss this here, we get exactly that.
We get this massive pane of emptiness, which just says, "No shows here." Now, what we're
supposed to do is start adding in the shows that we are interested in watching. You do
that by hitting the "plus" button, which makes total sense. And then we can start searching
for shows. Now, what you'll also notice, that here you've got this "trending" tab, which
shows you a bunch of shows which other people have been looking for. Now, there's a bunch
of these that I actually do want to track. Now, I don't know, what do you think, Roman?
For me, I would love to see basically that intro screen being all of the trending shows,
which I can then just go in and add right off the bat. That's the way you get started,
is by seeing a whole bunch of suggestions based on what other people have been adding,
and have that ability to just go, "Yeah, Breaking Bad, plus. Game of Thrones, plus. Dexter,
plus."
>>Chung: Make it easier to add--
>>Nurik: Absolutely.
>>Meier: And then straight away, you understand what it is that the show is offering. So again,
here we have this big dialog explaining what the show is, giving us the synopsis and the
ability to add. Now, that's useful, and I would certainly like to have that as a plus,
but in the instance here, I'd even more so prefer just a bunch of "plus" buttons along
this outer edge so that I can just say, "Well, I know what Breaking Bad is. I've been watching
it for the past five years. I just want to add it without having to read about it."
>>Chung: The pop up [indistinct]
>>Meier: Exactly.
>>Nurik: Interesting. The other thing is that the way this is listed, the way shows are
listed it this app, is they're basically listed as a list. Vertical list of things. Whereas
with really media-friendly stuff like content, or, I guess, media-rich content presenting,
the grid is generally just better. Leaves you more space to show nice big photos. If
you even overlay the titles over the photos so that everything, almost every pixel in
the screen is covered by content, that's generally better than presenting just a list of thumbnail
on the left and text on the right.
>>Chung: Small thumbnail. There are one day of defeat that they're getting from if they
have bigger assets.
>>Meier: They do, they absolutely do. In fact, it's one of the strengths of this app.
>>Chung: If you do, take advantage of it.
>>Meier: Let's go back to the main menu. I've added a bunch of shows, and you can see straight
away that they're already presenting something better here. Once you go to the shows that
you've already included, you get the back route view which Roman was talking about.
But even here, I'd say there's an opportunity here to use that space more, to use bigger
assets, so this becomes a really visual experience. Having the images associated with the shows
is, I think, a really powerful thing. I would consider making that a much bigger part of
each grid item. Very much along the lines of what Roman was suggesting.
The point here is that it's telling us when our next episode of all of these shows are
coming up. We have a bunch of options that we can choose too. If you go into settings,
we have this wall of settings which allow us to do things like--. And they show episodes
which have already been on before, which reduces my list, which makes me sad. [laughs] But
you can see exactly what's coming. And then you can go into each of the shows, Game of
Thrones, and then you get all the details, the director's guest stars, what episodes
are on or coming. You can see here, in the background, you've got the big graphic, right?
>>Chung: Yeah.
>>Nurik: Yeah.
>>Meier: Not coming across as well as that one.
>>Chung: What does "check in" do? Just real quick.
>>Meier: "Check in", I think, if you're logged into Trakt, or possibly not, it lets you basically
have that social aspect, where you're checking into the show.
>>Chung: Oh, interesting. I was looking at this feature right here--
>>Meier: If you're watching it, you check in as part of that. Have you actually used
that at all, Roman?
>>Nurik: No, I don't use the check in as much. I know this is a growing, more popular interaction,
to actually check into shows as they come on, but I haven't used them myself. It is
a very popular thing with services like GetGlue and I believe Trakt as well, but I haven't
used it.
>>Meier: Yeah. I guess it's around that whole second screen experience idea, where you're
socializing while you're watching TV. I struggle with it because I very seldom watch TV live.
I'm always time shifting it and watching it at least an hour or so later.
>>Chung: Yeah, like the Olympics.
>>Meier: [laughs] Well, the Olympics is not by choice. But this is not the forum for me
to rant, because I don't have enough time to explain exactly how I feel about the NBC
cover job of the Olympics.
>>Chung: I was just pointing out that similarity.
>>Meier: [laughs] Absolutely. Yeah. The other thing which I have to say about this app--.
Like I say, Roman suggested this to me. I use it a lot now. But one of the things I
struggled with when I first started the app is that it wasn't immediately obvious to me
how everything worked. The plus icon being "add show," it wasn't immediately obvious
to me that that's what it was going to do. I didn't necessarily understand the work flow.
So I think that's something which would be really great to be simplified and better explained.
I think giving me that list of suggestions right off the bat is going to help. But help
me through the work flow, make it more obvious what I need to do at each point, and that
will make it easier for me to use all the features.
>>Chung: In the action bar, they have a mix of text and icons for the action items. Maybe
they can--. This is actually combined, activity with a clock icon and a search icon.
>>Meier: Yeah. It does have the tiny little vertical separators. Actually, no. There's
a missing vertical separator between "plus" and "activity", which is really confusing.
It looks like it's the same thing.
>>Chung: It wasn't apparent to me that the clock icon actually represents it's tied to
the activity text.
>>Meier: Search-- Okay, so it's the right search icon. I mean, generally speaking, they've
done things well. But I'd also be really cautious about things like your settings menu where
there are a lot of things here. Advanced and everything else. You may consider--. This
is actually using the old preference activities rather than the new preference fragments.
There are a few options that you have here to actually separate things into categories,
make it a little bit easier to dissect. I'd want to have things like advanced and more
almost off in a separate category so it's not confusing the rest of it. Because this
is a little bit intimidating. You've been using it longer than I have, Roman. Do you
have any particular suggestions that you'd like to point out about what they do well
or what they could do a little bit better?
>>Nurik: Yeah. I think when this app just came out, it was using the default demon.
A lot of my comments are visual, so this would be visual feedback. But before, I guess a
couple months ago, this app was using the default stock hollow theme. Everything was
hollow, blue and everything. That was good. I think that, obviously, you do want to modify,
you do want to brand it a little bit. In this case, I feel like the branding is-- that neon
purple-- it doesn't really mesh all that well with the rest of the hollow UI, the hollow
style. For example, all the window backgrounds are using the default hollow gradient from
black to a dark gray Then the neon purple on top of that doesn't seem to really mesh
well. What I would do is I would probably go through and clean up some of the UI. I
feel like there are some parts that are really remnants of the default hollow style. Just
make sure to either customize more, dark and branded, custom UI isn't as great as it could
be. It's definitely better than a lot of the other apps that we've seen, but that could
be improved. Another thing is--. This is very specific,
but when you get into an episode of a show, there's actions at the top right, like "search"
and "favorite" and "share", and then there's actions right in the middle of the screen.
One of the--
>>Meier: Yeah. "Check in", etc.
[buzzing sound]
>>Nurik: Yeah. I find that little strange. I think it violates one of the core rules
of putting things near the corners, near the edges. It's a little easier to find, a little
easier to discover, unless the in line actions are really obvious. In this case, I feel like
they're buried under the content. One thing that I do really often is mark a show as watched.
I feel like it's buried in a sea of text. That's one thing that I would try to do. If
you do have actions that are in line, make sure that they're more visible, that they're
more prominent, that they stand out apart from the content that surrounds it, because
otherwise, it may not be obvious, it may be difficult to locate.
>>Meier: Cool. Yeah, I totally agree. I think for a lot of those, it would make sense to
just have them in the action bar. Because as you said, they're primary actions. Having
watched a show. Our gong has gone off, so we're going to have to move on. But I think
that's some interesting advice. I think the key things here is that visually, I think
they could do a lot more with what they've got. More images, more grids, more density
of color and imagery. And similarly, as well, I think, just to give a couple of examples
from what Roman was saying, and hopefully he'll agree, I think in terms of customized
branding, if you have a look at an app like-- GeekBeat does a really good job of that. They
have their own custom color schemes, which is throughout the entire app, and it's consistent.
Tasks and Tasks Free are a good example of an app which you're actually using very much
the standard paradigms.
>>Ni-Lewis: Hey guys. Producer Ian here. We just wanted to mention that one of our viewers
took a look at the page for my Food, and it turns out that they have-- Actually, you know
what? You guys should be looking at the camera. There we go. Now we can talk directly to each
other. Hi, Reto and Fred!
>>Meier: Hi, Ian.
>>Chung: Hey, we haven't seen you for a while. Where are you calling from?
>>Ni-Lewis: Nice. Yeah. I'm calling from right over here. Whoo! Anyway, I suppose that's
a really neat comment, which was that actually, you guys mentioned something about it was
a little bit sparse, not too many graphics, stuff like that. It turns out there was a
user request for a sparse interface and the dev responded really quickly to that and made
that. It sounds like maybe it should have been an option rather than a default, though.
>>Meier: It sounds like some of that--. It actually brings up a really interesting point,
particularly if you're creating an app which is quite popular. It's going to be impossible
to satisfy all of your users. Me and Fred can sit here and have exactly the opposite
opinions about the same app. And certainly, once you get more than a couple of thousand
downloads, you're going to have the same problem. One thing you can do there is use analytics
a lot to figure out how people are actually using your app. You can do things like institute
options where you have "show images, don't show images" and find out which people are
using more. Try and build your user interface around that. Definitely something you want
to consider is, before doing those radical changes, is to think about how people are
using the app, and give them the option to pick one or the other before deciding which
is the best approach.
>>Chung: Right. Or, if you have resources, think about doing things like AB testing to
see which one--
>>Meier: Absolutely.
>>Chung: --users react to better. That's great. And also, it's good to see that you're reacting
to user comments as well.
>>Meier: Yeah. Absolutely, absolutely. Cool. All right. Let's have a look at your next
app.
>>Chung: The next app is called BigOven. It's, like I said before, it's another app that
consists of a lot of recipes where it tries to give you some ideas on what's for dinner,
what's for lunch, and stuff like that. You're able to identify the items and create shopping
lists based on the recipes.
>>Meier: Nice. I like the fact that they've got a tablet layout right off the bat. This
is making me happy.
>>Chung: They have a tablet layout, two pane layouts with a big logo here. What stands
out initially is that I see two search functions here. You have a duplication of features on
the very same screen, so you can think of maybe eliminating one. Maybe there's a specific
reason why you decided to include both. It's not--. But it feels duplicate. Duplicated
feature. Let's do a search on something.
>>Meier: What's your favorite recipe?
>>Chung: Something that has to do with beef.
>>Meier: Beef? [laughs] You're not a real developer. If you were a real Android developer,
it would have been bacon.
>>Chung: Test. There you go. So it shows you, whoa. A bunch of pictures. These are user
generated contents with star ratings. You can--. Let's say go. Pick one, beef and chili
with beans. Loading recipes to the latency.
>>Meier: I was going to say, if we just drop back once, this is a really good example of
an app which is using that visualness to really draw you in. You've just got this wall of
beef, which could be quite intimidating. But in this case, it's just making me really hungry.
I do notice that it tends to be a little bit slow in terms of, particularly this loading
the recipe. Bringing the images in here slowly, that's reasonable, although it feels like,
based on the speed here, it feels like we're pulling down images much bigger than the thumbnail
being displayed. If you're pulling them down from a server and then shrinking them, try
and have those shrunken assets on the server so you're just pulling down as little as possible.
And things like this. The loading more recipes: try and pre-cache a little more aggressively.
You should have at least a scroll's worth of data queued up so that you don't feel that
lag.
>>Chung: All right. When you go back--
>>Meier: This is unacceptable. You really need to find ways to cache your images. You
will, for memory reasons, likely still have to dump them out of your cache in terms of
your memory cache and display them, but it shouldn't take this long to put them back
in.
>>Chung: Yeah. If you want to know specific technical tips on how to do it, we have a
training class on Android training that specifically talks about loading bitmaps and caching and
stuff like that. Check it out.
>>Nurik: Actually, I think Adam Kash from Martina's clinic adds some updates to that.
And another thing I wanted to point out is that in the Google IO application, which is
now open-sourced, a bunch of new stuff related to image caching is there as well. You can
rip stuff right out of there. I believe we're updating the Android training article on that
as well.
>>Meier: Awesome. All right, let's get back into the beef and chili with beans.
>>Chung: Beef and chili. See the loading latency. I think there's--
>>Meier: It's a little slow, right?
>>Chung: Yeah, it's pretty slow.
>>Meier: When I was talking beforehand about creating a magical app, that's a big part
of it for me. Every time you see the loading dialog or a blank thing which needs to be
populated or fill up, it breaks the magic. It ruins that suspension to disbelief. You
remember that, "Oh, this app needs to connect to an internet source and pull down this data
and populate this view." I don't want to be made aware of any of that, I just want it
to magically happen as though this were some crazy magic box of the future which had every
recipe in the world somehow contained within it. This looks nice. The UI here is definitely--
>>Chung: Yeah, it's pretty clean. Well, I like to repeat the feedback that we gave.
>>Meier: Yeah. Bigger text.
>>Chung: Bigger text. But I think this particular app, there's an option where you can increase
the font size, which is great. There are different tabs, like "recipe", "reviews", and "photos"--
>>Meier: Excellent. Of photos.
>>Chung: --of various-- And again, latency, I don't know what's going on here. We have
a pretty fast network here. [laughs]
>>Meier: [laughs] You definitely want to be downloading those photos. I rather suspect
that the photos are bigger than they need to be. You're pulling--. And I noticed, also,
they all came in at once here. Again, it's the same sort of ideas of making sure you
download more than you, download progressively and make sure that you're optimizing those
downloads to pull down as little as you need.
>>Nurik: Actually, can I make a comment here on the UI?
>>Chung: Certainly.
>>Meier: Of course.
>>Nurik: There is one thing I wanted to mention. This is just happening over and over again.
I feel like every app we look at on the tablet has this issue. White space. There's just--.
It's a much better use of white space than lots of the other apps we've seen, but still.
It could be improved. Like you guys mentioned, increase in font sizes, things like that,
will help. One trick that I find useful when trying to optimize my white space is to take
a screenshot of my app as is and start shrinking it down gradually. Shrink it down to about
25%, to even 10% of its original size and look at that. If you can still pick out your
white space from the text, and if it doesn't look even, if it doesn't seem like there's
a natural balance in the negative space and the actual text and content, then you probably
have a white space problem. Try to think of how you can better fill out the white space,
but don't pack in text into the white space. White space is still important. But make sure
that it's balanced. That's just one trick. Shrink it down and see if there's something
that seems wrong in that shrunken version.
>>Meier: I had a question, actually, related to that. If you have a look at this main search
results page, where you have all of these things. I like that there's lots of images
there. We do still have those gaps between. I know that one of the UI trends that I've
seen a lot of lately is basically removing all of those borders and having basically
zero margins between images.
>>Chung: Wall of pictures.
>>Meier: Yeah. Is that something you think would work well here?
>>Nurik: Yeah, I think that can definitely work well in a lot of cases. In this case,
since the background is white, I personally find that having this zero pixel border, text
overlaid on top of images, works really well if the rest of the background--. I guess the
theme of the app is hollow dark, or just a darker theme. Otherwise, the white will really
stand out. Actually, one thing that this app may want to consider doing is trying that.
Trying that wall of images with very little space in between and having the text overlaid
on top of the images. But then try to switch the theme so that the left pane is not so
bright. The contrast will be way too high if you have that kind of wall of images and
don't change the background.
>>Meier: That's a good point. That's the other thing I was going to suggest as well. As Fred
pointed out, I'm not sure if we can empty the screen. This is how we get to when we
open up the app. Again, the whole point of a recipe app is to make me hungry, make me
want to cook stuff. It seems to me like this would be a great opportunity to put something
here in this big empty space, right from the beginning. The most popular apps--. Or, sorry,
the most popular recipes, or your favorite recipes, or featured recipes, random recipes,
basically anything. Because you have a random recipe button, right?
>>Chung: Why don't you just default it?
>>Meier: Exactly. Well, no, it's an actual--
>>Chung: Or maybe a big picture--
>>Meier: Yeah. Or have a recipe or have a bunch of random recipes. But something which
is going to inspire you, so that as soon as you open this up, you're like, "Oh, yeah,
actually, that looks like something I might like to create."
>>Nurik: It's almost like within zero clicks--. Assume you get featured on Google Play, you
installed the app, and you press the open button. Without doing anything else, the user
should think, "Wow, I'm definitely keeping this app."
>>Meier: Exactly. Exactly right. Maybe "recent raters" is perfect. Yes. This is what I would
start with. These are the recipes that most people have been raving about. If I open the
app straight--. It was featured on Google Play, I hit install, open, boom, and this
is what I saw? Suddenly, I have much more incentive than just from seeing this big logo.
I can be like, "Oh, those Oreo bowls look phenomenal." [laughs] Straight away, it's
like, "I don't need much for that. I've got cream cheese and Oreos. I'm pretty much already
sold." Straight away, you're scrolling through things. And again, getting really hungry.
Which is, again, why we want to make sure that you don't have this long load time of
each recipe clicking in. I just want to be able to scroll through this list and see anything
which looks awesome, and be like, "Oh wow, I totally need to make skewered honey balsamic
vinegar kebabs." Wow, I need to stop. [laughs]
>>Nurik: A commenter on HBC 2000 also mentions this app might be a little more attractive
if they used the light hollow theme on the action bar instead of the dark
>>Meier: That's true. The consistency there is definitely an issue.
>>Chung: They have the default blue line here.
>>Meier: [laughs] With the red straight underneath.
>>Chung: The red line is part of their brand. You can definitely theme a little bit.
>>Meier: Hmm. Exactly. Given that you do have this strong color branding, you may want to
consider using, changing the color of your action bar to match the recipe color branding.
That's definitely something you can do. But I'm intrigued by Roman's idea of switching
the whole theme around to something dark and then emphasizing the images more.
>>Chung: Definitely.
>>Meier: I'd also point out that the actual text star that they're using there is a serif
font, which works really well if you're reading a book or something like that, but it doesn't
work quite as well on computer screens, and particularly when you're reading it from a
distance. You'll notice most presentations tend to use a sans-serif font like an Arial
or a Helvetica or something like that. And again, you may be browsing it sitting down
on your couch, but you're going to be using it in a kitchen on a stand, again, from a
distance. So again, it's great that they let you bump up the text size. I would probably
prefer here, either an option or just a default, to be a sans-serif.
>>Chung: That's a good point.
>>Nurik: One of the other things I wanted to mention on fonts is-- And this is unfortunate.
[gong sounds] We just, I guess if we just didn't have time or if we didn't plan on it,
but the new font of Android, the new typeface, is Roboto, obviously. There's no serif version
of Roboto, though.
>>Meier: That's interesting.
>>Nurik: Basically, a lot of the improvements, a lot of the core image and design philosophy
of Android is around the typography. So you're missing a lot of that by using Android serif.
Having said that, there's also Roboto Thin and Roboto Light. When you have text that's
larger, let's say in the 30 or the 40 sps, Roboto Light can really give it a sense of
class or elegance. Coupled with increasing the font size, you may want to consider using
the different weights of Roboto. There are several. Actually, as of Jelly Bean, we bundle
very, very many weights of Roboto, so you have more options. Or you can just bundle
the TTF directly here if you can.
>>Meier: Outstanding. Cool. That was our gong in the background, so we're ready to move
on to our next app, which is one of mine. TripIt's hard to demo without having some
trips in there. We've only got a few minutes, so let's have a look at IMDb instead. Based
on the two apps that I've looked at today, you can get a fair idea of how I enjoy to
spend some of my spare time. But I'm a big fan of the IMDb app.
This is a great example of an app which users--. It's very much its own custom branding. This
doesn't look like hollow. It doesn't not look like it either. But it definitely looks like
IMDb. We have this consistent gray gradient branding with the quite distinctive IMDb gold
logo. And again, if we look at what we've been talking about so far with today's apps,
we load this up and straight away, I'm presented with a wall of images. I've got video front
and center and a scrolling marquee. I've got another scrolling marquee down here of awesome-looking
movie posters. Coming soon is the same. This is basically full of imagery. That, I
think, it makes for a really compelling experience, because straight away, you've got things to
look at, you've got things to scroll, you've got things to browse. Overall, I quite like
that. It's not a standard action bar, because it's too high to be a standard action bar.
They've done some interesting things here, like this overflow menu is clearly not a default
of the standard overflow menu, or even a standard pop up menu, which a lot of people use to
simulate that effect. I don't know. To me, it almost works in that
it's got the branding, it's got the gray and the gold, which is obviously the theme they're
going throughout, but the weird rounded corners and the drop shadow strikes me as being a
little off. This is the first time where I click something on the app, and suddenly,
it doesn't quite feel like a native app anymore. What do you think, Roman?
>>Nurik: Yeah, I do want to call out, like you said, the drop shadows, also some of the
gradients, like the title bar or rather the fake action bar has this stark gradient. One
of the things we generally recommend, This is not like a "You must not use gradients
on Android" or anything, but we definitely recommend using fewer visual effects. Things
like drop shadows, things like gradients, things like glosses. They clash with the minimalistic,
cleaner style of hollow. When a user gets their Galaxy Nexus or one of their ICS devices,
they're presented with somewhat minimal UI apps. Apps that give you content and minimize
the number of pixels that are dedicated purely to aesthetics of the Chrome, of the surrounding
elements of the app. Definitely minimizing that and using some of the simpler, minimal
styles would make more sense, I think. Then definitely using the stock action bar and
tweaking the styles. Like you can make that--. If you absolutely needed that bar to be taller,
you could tweak that using styles. You don't have to reimplement the action bar.
>>Meier: In fact, I'd suggest that they probably don't need to make it taller. It just feels
stretched for no really good reason. I like that they've used the standard search widget
here. That's great. These keys here, "movies", "TV", "celebs", that, again, strikes me as
a little odd, because they're not really action so much as navigation cues. As per the Android
stands, I'd expect them to be over on the left-hand side over here, next to the IMDb
logo. Similarly, I expect this to behave like a standard action bar. I'm looking for an
up caret on the left here so that I can return to this, to the main page. The navigation
actually works the way it should, but I'm missing some of those standard queues that
I'm really used to seeing. I'd like to see these as default, regular tabs or something
similar to that, rather than being actions when they're not really actions.
>>Chung: The general pattern goes on the action bar on the left hand side. You have the icon
followed by a navigation control. Put everything else, like the action menu items, on the right-hand
side.
>>Meier: Exactly. Things like "search," they've got in exactly the right place. Having all
this stuff in the overflow menu, again, makes sense. I want to highlight, as well, here,
that they have the ability to sign in. You can have an IMDb account and sign in. Presumably,
things like your watch list, some ratings history, and the ratings you provide are all
then going to be part of it. What a lot of apps do wrong is that they don't
let you use anything until you've signed in. When you install it off Google Play, hit open,
the first thing you're presented with is this sign in screen. That's a real off-putter,
because it's like, "Well, I've not even looked at this app yet. I have no idea what it wants,
and it wants credentials, it wants me to create an account. I want to know what I'm getting
into first." So I love that about this app, in that it lets you experience the full app.
It's not until you want to do something which requires you to sign in that it actually asks
you to do so. It also lets you do so as well here in the overflow menu. That style of presenting
as much as you can, and then having additional features as an incentive to actually sign
in, I think it's a really good pattern.
>>Chung: Great point.
>>Meier: Let's have a look. Otherwise, it works pretty much as you'd expect it to. Let's
have a look at Total Recall, a movie remake which fills me with dread. I'm a huge fan
of Philip K. Dick. The movie implementations are usually pretty questionable. Total Recall,
again, is a movie I really enjoyed when I was younger, but--
>>Off-camera engineer: [Terminator voice] It's not a tumor!
>>Meier: [laughs] That may be the wrong Schwarzenegger movie, but nonetheless. I always wondered
about Schwarzenegger in the lead role of that. Colin Farrell is a better match, but I don't
know. I'm apprehensive, to say the very least, about this remake. In any case, you can see
here, as soon as we navigate in, again, we have a wall of pictures. We have a big image
of the movie poster. We see the top bill cast. They're all here on the left. We have galleries.
These aren't scrollable, so I guess you have to hit "all" to see more of the images. This
is interesting. They've got this pop up dialog. I hate, hate, hate pop up dialogs, particularly
when there's no obvious way to dismiss it. I'm going to guess that the back button does
the job. But I don't know. I feel like this could be done a little bit neater. I like
that--
>>Chung: You could do it in place.
>>Meier: --to be scrollable here. Just let me scroll through.
>>Chung: Yeah, I saw your first inclination on this section of the screen was to scroll.
>>Meier: Yeah, exactly, because they used marquees elsewhere in the app, so I'd like
to be able to just flick through here and see all the cast without having to change
contexts. Same with the gallery. If I click on an image, it actually goes to the artist's
page. That all makes sense.
>>Chung: Let's check out how sharing is done in this app.
>>Meier: Done the right way.
>>Chung: As expected. That's great.
>>Meier: Right icons, that's all nice. As you can see, they've really taken this custom
styling to the final degree. Everything is custom. These dialogs don't look like normal
Android dialogs. They're quite tall. They've got the action, not the action bar, but the
title bar on top. Now, there's nothing wrong with customizing the look and feel of these
sorts of things, but particularly dialogs, which, our general guidance is to use dialogs
only when you're doing a system level thing. That's when you pop up the dialog. It's like
when WiFi is being disabled or if you want user authentication. Something which is more
than just the app, beyond the context of the app, that's really the only time you should
be using dialogs. If you're doing that, then they should look like the system dialogs so
that people know what to expect. Here, What I would say is that rather than saying you
should be using standard dialogs, which would, in fairness, look really weird on top of their
custom UI, is see if you can get out of using dialogs at all. Whether doing things in place
or having a different fragment switch out, some other way of navigating which doesn't
pop something on top of what you're doing. Do you hate dialogs as much as I do?
>>Chung: Not quite.
>>Meier: Not as much?
>>Chung: I agree with your assessment in this particular scenario where if this implementation
wasn't in place, transition would be better. It felt like I was focusing on the right-hand
side of the screen. If the dialog pops, it just breaks the continuity.
>>Meier: What about you, Roman? In the couple of minutes we've got remaining?
>>Nurik: I generally agree. I generally hate dialogs. I, more than anything, hate progress
and loading dialogs.
>>Meier: Oh, yeah, well, they are the devil, clearly.
>>Nurik: [laughs] In this case, I think the dialog is really just a shortcut. I feel like
in a lot of cases when a developer doesn't really have a great idea of what's the best
possible way to present something, a dialog is a shortcut. I've definitely done it myself.
I've definitely just said, "Oh, just make it a dialog." But definitely, a more complete,
a better solution would be just another fragment gliding in, or something of that nature. It's
tough to avoid dialogs always because they're very tempting. But do try to avoid them.
>>Meier: Yeah. That's a really good point. Dialogs do represent, often, a shortcut. It's
a way of being able to, as a developer, when you haven't really thought through all of
the work flows, it's like, "I need to present this information. How can I do that?" A dialog
is the easiest. It's like doing a print line as a debugging--
>>Chung: It's like a catch all.
>>Meier: Exactly. It's like using a toast to know whether or not something's happened.
We all do that as part of our development process. Like, "Oh, the service has kicked
off, so I'm going to do a toast so I can see if it's happened." Then, by the time you actually
go to production, hopefully, you've removed all of those. There's very few times you actually
want to toast. Dialogs should be the same. That's when you really want to bring in a
UX designer or someone like that who can figure out how that information can be best displayed
to your users. I think that pretty much takes us to the end
of our allotted time, if we want to give Dan and Ian any chance of being able to prepare
in time to go on air. Next week, what we've asked you guys to do is to tell us some podcasting
apps. That's what we're looking for, is--. All of our--. We've got all of the Google
IO sessions have been turned into a podcast. Same with all of the Office Hours shows that
we do on Wednesdays. They're all available as podcasts. Really, I want to know: what
do you guys think are the right apps that people should be using to consume these? That's
what we're going to be looking at next week. Hopefully, if you guys suggest some podcasting
apps.
>>Chung: Hopefully we'll get some. Not zero apps
>>Meier: Indeed. I have a few which I use as well, so we will be doing podcasting apps
one way or the other. It's either going to be the ones that we've heard of and use, or
it's going to be the ones that you guys would like to see us talking about. Tune in for
that. The other thing that we have--. This is a
special request. As you can see, we have a gong behind us. As you can see, it is a gong
that has been optimized for a phone. If anyone out there has a gong app, which looks like
a gong, and when you press it [gong sounds]
>>Chung: It sounds like a gong.
>>Meier: It sounds like a gong. We want to hear about it. There's a opportunity here
to either promote your own app or build one specifically for us. It will be up here on
the Friday App Clinic every week. That's the other reminder as well. We have the App Clinic
now, for those of us who missed us at the beginning. Hence the white coat. We're really
all about trying to look at the things which apps are doing well, things which apps are
doing poorly, and try to help you guys and developers understand how you can build apps
which are really great and provide a magical experience. So we're going to sign off. We'll
see you guys next Friday. Thank you for joining us.
>>Chung: All right. See you guys.