Android Design in Action: Fitness Apps and Modern UIs


Uploaded by androiddevelopers on 20.11.2012

Transcript:

ROMAN NURIK: Hello, and welcome once again to "Android
Design in Action." As always, I'm your host, Roman Nurik.
ADAM KOCH: Hey guys, Adam Koch.
NICK BUTCHER: And here in London, Nick Butcher.
ROMAN NURIK: And today, we're going to talk about--
what are we going to talk about?
We're going to talk about fitness apps,
personal fitness apps.
Actually this is one of Nick's favorite categories, so he'll
be doing lots and lots of talking today about Endomondo,
which is the great app that we'll be highlighting today.
And then after we cover fitness apps, and
specifically, actually, some tablet stuff about fitness
apps, we'll jump into modern UIs and, more specifically,
some patterns that constitute modern UIs beyond just what
you've seen on the design guide.
So with that, let's jump in with Endomondo.
So I'm going to hand it over right to--
oh, we've got some flickering going on.
Should we try to--?
Let's see if we can just unplug this and
plug it back in.
NICK BUTCHER: Are you channelling the spirit of "The
App Clinic" from last week?
ROMAN NURIK: Yes.
Still happening.
ADAM KOCH: This is a Y-Cast restart.
Yeah, should we restart?
OK.
Let's restart.
We'll get back to you in one second, folks.

All right, so I think we're back.
And hopefully the flickering has stopped.
I think that's a little bit of the demo gods that haunted the
app clinic for so long giving us a little
taste of their medicine.
But anyway, with Endomondo, I guess we should start with
Nick, since Nick, this is one your favorite apps.
Do you want to talk about in Endomondo?
NICK BUTCHER: Yeah, this is one of my most frequently used
apps, I would say.
I do a little bit of triatholon in my spare time
away from Android development.
So I use this application to track my training.
And I'm a bit of a stats nerd about it.
So if you've used a fitness app, it offers the common
functionality of tracking your workouts, using TPS, and
logging it, and so on and so forth.
But one of my favorite aspects is that they've done a really
nice job of following the Android UI guidelines and also
integrating some fun stuff like contact badges and so on
that integrate deeply with the Android UI.
So here, the screenshot we're looking at, we can see, for
example, an activity feed, and your local history of the
workouts that you've done.
And I think you can see, they've done a pretty decent
job of following our UI guidelines.
ROMAN NURIK: You can see here--
just to interrupt you, Nick--
this is a very, very pitiful version of history.
I don't actually do running, or cycling, or anything.
That's really Nick's line of work there.
But this is just one example of like what it could look
like after you capture an event, what it looks like.
But obviously, in a real world scenario, you'd see a full
list of things.
Sorry, go on, Nick.
NICK BUTCHER: That is a very sparse list.
Did you have a comment you wanted to make about the Tap
to Refresh pattern we're seeing here?
ADAM KOCH: Yeah, yeah, so I actually want to throw it out
to you guys, like, what are your thoughts on the sort of
Pull to Refresh or Tap to Refresh kind of pattern?
Personally, I actually like seeing the refresh icon in the
Action bar, which is over to an indeterminate spinner,
while the refresh is going, but I don't know.
What do you guys think?
NICK BUTCHER: So just explain the pattern, as is, because
it's not clear from the screen shot.
It's kind of a variation on the Pull to Refresh pattern.
So here on the right, you can Roman's activity would
actually be flushed to the top until you Pull it Down.
And then it reveals an extra option to Tap to Refresh.
So in my opinion, this isn't working terribly well because
Pull to Refresh, I guess has some convenience, that it's
just one gesture.
Whereas this is, like, a gesture and then a tap.
So you may as well just have the Refresh button.
For me, I prefer, like you said, Adam, the Refresh button
in the Action bar, which turns into an
indeterminate progress--
mostly because, in Android, lists aren't springy.
I can see this is the pattern from Tweety, on iOS.
And it works pretty well on that platform because each
list has this kind of springy characteristic to it.
And so it works really well to overextended it
to kind of do something.
Whereas Android, you don't have that.
The expectation is to have some kind of force field, some
kind of indication that you've reached the end of the list.
So to then reveal an extra option doesn't fit with the
mental [? model ?] for me.
ROMAN NURIK: Yeah, I definitely agree.
I think that if you use something like Tap to Refresh,
or I guess, Pull to Refresh, really, our recommendation has
been, if you use it, then use it in addition to something
like a Refresh button in the Action bar,
or even in the overflow.
If refresh is automatic, or if it's something that users
aren't really going to use all the time, then putting it into
the overflow is totally acceptable.
ADAM KOCH: Yeah, I think, in this case, there's plenty of
room to show an actual Action item there.
Sometimes it may not be possible.
You'll have to put it in the overflow menu.
So maybe Pull to Refresh might be more obviously to users
then, I guess.
But in this case.
I personally would think it would be a good addition.
NICK BUTCHER: OK, should we push on, then?
So these two screens are the history and kind of the
activity stream and the news feed.
If we go ahead to next, there, some of the cool functionality
it has, which I really like, is the
ability to find routes--
so routes that other users have created, which is awesome
if you're traveling.
So if I come out to California and visit the Mountain View
mothership, I've used this functionality to find running
routes in an unfamiliar area, which is fantastic.
ADAM KOCH: Nick, do you mean roots or routes there?
NICK BUTCHER: [LAUGH]
I'm pretty sure I mean "roots."
ADAM KOCH: [LAUGH]
OK, just checking.
NICK BUTCHER: Yeah, and as well as just seeing the route
itself, you can have this concept of a champion, you can
try and beat someone's time, or that kind of
stuff, all fun stuff.
So these are fun features we want to put out and highlight
from the phone app.
So as Roman said, I'm a heavy user of the app--
a couple times a day, normally.
So I've been pretty happy with using the application.
But what I really feel like it's lacking
is some tablet features.
So if we look at what the functionality of the
application offers on the website, there's actually some
really, really useful functionality, which I feel
would be perfect to pull into the tablet application.
So here, for example, is the base workout screen, which you
can use to track your workouts.
And I find this really motivating because you get
this month view, which shows tiny little avatars of the
activities you've done.
And for me, this is one of the things that keeps me coming
back, and keeps me using the application.
Like, if I miss a couple of days-- and there's no way you
can come back and fill in those squares--
I love it when you browse back and see a fully populated
month and see how consistent your training's been.
ROMAN NURIK: Nick, you're a workout-aholic,
just looking at this.
I mean, more than one item of exercise per day, that's kind
of impressive.
NICK BUTCHER: Well, I kind of commute to work on my bike,
which is cheating, maybe.
There we go.

Yeah, so I think this is a really important piece of
information which I thought would be super handy, to pull
on the larger real estate that you get on a tablet.
And going on to the next screen, I think the other
thing we wanted to talk about was some stats that
you can pull out.
Like I said, I'm a bit of a stats nerd, so I love being
able to pour over my workouts and seeing, you know, am I
improving, have I done more mileage, have I done faster
average times, all that stuff.
So I feel like there's a real opportunity to pull out some
of this information when you have more room.
When we talk about tablets, no one is suggesting that you're
going to go running with a Nexus 10 strapped to your arm
or in your back pocket.
That's ridiculous.
ADAM KOCH: Maybe a Nexus 7, though.
NICK BUTCHER: Even a Nexus 7.
[INAUDIBLE]
pulled up a good point, actually, I hadn't really
considered is-- kind of sat in a gym, on an exercise bike,
for example.
So you're using your tablet to watch a movie or catch up on
the latest Android development on YouTube.
But you might want to be a flick over to a
tablet-optimized interface on your workout app to capture
that awesome workout you've just done.
But for me, I think the biggest things I want to do be
able to do is kind of consume the news feed, see how I'm
doing, pour over my stats, and also plan ahead, like look at
the different routes that are available.
So this is the major aspects that we've tried to
incorporate into a re-imagining of the
application.
ROMAN NURIK: And one thing I want to just point out--
there's this really small part of this website, I guess, in
one of the panes on the side, that shows you, I guess, the
individual types of workouts that you've done as well as
for how long you did them this month, as well as how many
calories you've burned.
And I feel like that kind of summary information is fairly
interesting to see on a month-to-month basis.
So having that readily available, I think, also would
be something that's interesting in a tablet or a
larger-screen UI.
NICK BUTCHER: Cool.
ROMAN NURIK: I think there was one more, oh no.
We don't, OK.
So we took a look at Endomondo, and, actually, I
talked to Nick about how he uses the app and what he would
want from a tablet experience.
And we took a look at what it could look like on a tablet.
And specifically, more of a consumption experience,
providing more of a consumption flow.
You're sitting on your couch, and you're planning what to do
for the rest of the week--
you kind of want to just see what your current stats are.
As well as, like Nick said, if you happen to arrive in
Mountain View visiting the mothership, I guess, what are
the nearby routes, and how to browse them in
a very visual way?
So we took a bunch of these things and we decided to
create something that's like a really nice dashboard.
And not a dashboard in the sense that it's just kind of
showing you navigational options, like the dashboard
pattern where you'd see like four or six icons that would
show a new piece of content.
This is really like a content-forward dashboard that
shows you different aspects of the app, different aspects of
the service, all on one screen.
So we focused on, I guess, the information hierarchy here is
really like--
your current workouts.
That's the primary pane here.
It's the center pane.
And then I guess the second most important item on the
screen is the social activity, whether somebody commented on
one of your events, or if somebody posted that they've
just ran near a route near you, or
"root" near you, I guess.
You want to see these things in a nice, easy-to-consume
feed in the right.
And what we've done is, we've basically taken the existing
feed from those handset screens and we've kind of
enriched the individual content items.
So each piece of content here, you'll notice, has more than
just a piece of text.
It has the time.
It has clickable objects, like, you can touch on Han to
see details on Han, a full profile page for Han.
And then if it's a route that you may be interested in,
maybe you expand the route into this kind of like a
token, or content expando that's in there.
The other thing I wanted to point out is that, to take
action, in the current app on handsets, you
can comment on something.
There's this kind of comment button next to each list item.
But there's no way to like anything.
I think liking or +1-ing or such, is kind of a lighter way
to interact--
to say, oh yeah, this is great, congratulations.
So just offering commenting versus liking seemed kind of--
NICK BUTCHER: I think the app has that, actually.
ROMAN NURIK: Oh, OK, oops.
NICK BUTCHER: It's not entirely clear from the UI
because the UI is just a plus and a common bubble, but if
you click that, it gives you the option to like a comment.
ROMAN NURIK: Got it.
So what we did here, is, instead, we used a different
affordance, basically, the overflow affordance to
indicate that, hey, there are actions, there are multiple
actions you can take on this.
And obviously, you should be able to long press to select,
to take action--
like multiple posts.
But here, to take action on a single item, you can either
long press to show the contextual Action bar, or just
touch this overflow to show that there are multiple items,
or multiple actions there.
And this is very similar to what Google Now does.
So in Google Now, you have a bunch of cards.
To look at settings for a card or to take action on cards,
along with action buttons at the bottom, you can actually
see this overflow next to each card.
And then, lastly, we've done this kind of unique
presentation of nearby routes.
So let's say this app has information about the top
three or four routes near you that you
haven't starred or favorited.
This is a method of bubbling up content.
It's a constant discovery mechanism.
So you'd be able to swipe left and right between the
different nearby routes, showing a little bit of data
about how long they are, what percentage of users like them,
and then what's the best time on that.
And this is all data that's already accessible in the app,
as far as I know.
So this is a 10 inch landscape.
Actually, there's one thing I missed.
On the left here, you have this kind of summary
information, like this month, these are the activities
you've done, this is how many calories you've burned, this
is how much time you spent working out.
Anything else you wanted to add, Nick?
NICK BUTCHER: Controversial use of the bold and light
pattern that is being a little bit of a love it or hate on
the new 4.2 lock screen.
ROMAN NURIK: Yeah, and there's actually a combination of a
condensed here, so there's condensed
and light, I believe.
There's bold, light, and condensed versions of Roboto,
so there's lots of typography going on throughout these
[? mugs. ?]
NICK BUTCHER: My general feeling is, I love it.
Like, I really like the three major sections that you've
broken it up into.
So when you had a 10 inch UI, a 10 inch tablet with space
enough to display this thing.
So you get this instant view of what's going on, you get
these three major topics that I'm really interested in
looking at, from the first thing.
I'd love to be able to tap through some of these
statistics on the left, and I can I imagine seeing some of
those graphs, which are available on the website,
being available on the device as well.
That'd be wonderful.
But yeah, I think you've done a nice job of bubbling up the
things I really care about.
ROMAN NURIK: And it's important to note that this
dashboard is very interactive.
It's content-forward, and the content is manipulable.
So if you want to touch into snowboarding, to see all the
different stats for your snowboarding for this month,
you can do that.
You should be able to touch that.
The other thing I'll mention is that this app had more than
just these three sections.
So what I've done here is, I've offered an Action bar
spinner to show you other parts of the app.
So if you want to jump into other sections, for example--
not settings, because that should be in the action
overflow-- but maybe like, I don't know, if you actually
want to start capturing data on a tablet, maybe that's
something that you should be able to do from the spinner.
NICK BUTCHER: Yeah, I think it's really important to
stress that, that this is the same application as we just
saw on the phone.
I think it's completely OK to have a completely different
dashboard, a completely different home screen, when
you're running in an entirely different context.
It's the same information that we're going to present through
the application.
It's just a completely different visual treatment or
priority, as it were.
ROMAN NURIK: So in the interest of time, let's skip
through a few of these other screens.
So this is basically the portrait version.
And what we've done is, we've really tried to think, what
does this screen look like in multiple orientations as well
as on multiple sizes?
It's not just a 10 inch landscape
tablet world out there.
There's portrait devices, there are 7 inch devices, and
they're probably going to vary in size and screen resolution.
So this is just an example of what a 10 inch portrait
mock-up can look like.
What we've basically done is, we've taken a linear approach
to laying out this content.
So the hierarchy is still maintained.
The very top most item is the most
important thing, your calendar.
The second item, the second row in the screen, is this
horizontally pannable social feed.
And the presentation here, I'll admit that it's not
really refined.
There's definitely a lot of work to be done here, but,
it's just one way you can start to think about this.
And then that Nearby Routes section at the
bottom is still there.
So it's kind of taking up the same amount of space as it
normally would.
But again, all these sections are fairly flexible.

Actually, let me just talk about that in a bit.
Let's look at the 7 inch layout.
And this is where I want to mention that that top section,
that calendar, it's flexible.
You can potentially show another row of days at the
bottom or the top.
In this case, you're seeing another row from February.
And then you should be able to scroll up and down to change
the current month.
And then you can rearrange the content from the left to the
bottom, this summary section.
And the most important part of the screen, I guess, is that,
on a 7 inch UI, you don't necessarily have all that
space as you do on a 10 inch UI.
So one of the things that you can do for these
dashboard-type screens is to switch over into tabs.
And they should be horizontally swipeable.
So since there's no real horizontal interaction here,
it should be fairly straightforward to allow
swiping on the entire screen contents to switch between
your workouts, your news feed, and your routes.
And those should all be laid out vertically.
NICK BUTCHER: I just want to call out as well that it's
absolutely fine to use this margin point.
I really like the way you've done that in the 7 inch
landscape, for example.
Some people feel like you have to absolutely fill every inch
of space on the screen.
And that's just not the case.
I mean, if you couldn't stretch this calendar to be so
much wider-- that it would start to feel like the wrong
aspect ratio.
It'd feel ungainly.
And it's absolutely fine to introduce a margin point here
and to just give enough room for it to breathe.
ROMAN NURIK: Yeah, and it's definitely a little more
comfortable, on a lot of tablet UIs, to have some extra
breathing room on the sides.
I forgot who it was that mentioned this.
There was a great post that talked about this.
It was specifically around typography--
especially when you're laying out type, it's not only about
the measure, the amount of words per line or your
characters per line, but it really eases the strain on the
eye to have nice, generous padding when you have lots of
heavy content, especially text.
So don't be afraid of too much space.
Worry more about too little space.
I think that too little space is more dangerous.
ADAM KOCH: Yeah, and also, where the
space is on the screen.
You don't want to have things on the outer edges of the
screen, like some list views which might automatically
stretch out from a phone UI.
ROMAN NURIK: Yeah, you definitely want to have a
great distribution.
You want to stand back from the screen, and be able to see
a nice mosaic of content--
not just stuff thrown into the left edge.
NICK BUTCHER: Yeah, have a squint at it and see where the
weight of the content lies.
ROMAN NURIK: So I think that was it for-- and oh,
nevermind, we have some lock screen mock-ups from Nick.
Nick, do you want to talk about
the lock screen mock-ups?
NICK BUTCHER: Yep, this is my number one request.
Endomondo guys, please make this.
I love the app, but it needs this.
Lock screen widgets are finally here, and I think this
is a perfect use case for it.
So we just quickly mocked up what it could look like.
So here I am, out on a run, and right there, with my
sweaty hands, I don't have to unlock the device just to see
how fast I'm going, how far I've
traveled, or to take action.
So I've just mocked up here, just showing three of the
major pieces of information when you have the collapsed
view of the lock screen widget.
It's telling my distance, pace, and total time.
And then, if you were to swipe down to expand out the lock
screen widget, you would get the following view,
[INAUDIBLE]
take action as well.
So you can pause, stop, or resume, if you've already
paused the workout straight from here.
So you don't have to--
you're out of breath, you're quickly trying to stop the
time so that you don't miss your PV or whatever.
So I think this is a really fun use case
for lock screen widgets.
ROMAN NURIK: And just to point out, I really like what you've
done here, Nick, with the use of white.
So you'll notice here that everything is either white, a
shade of white, or it's transparent white, or
transparent entirely.
And the reason we can do this is that, since you're on the
lock screen, it always dims the background.
So even if the background was pure white, the dimming would
actually make any white text or iconography on top of the
lock screen still very much legible.
So you definitely have the opportunity to use single
color, monochrome icons and UI elements on this screen.
And I really like what you've done with taking the Play the
Stop buttons from the app, which, if you look at the app,
they are actually green, and they're stylized.
And taking that and adapting it to what the lock screen
looks like, which is really just white on transparent.
NICK BUTCHER: Yeah, it can be scary, as a designer, as you
don't have any control of these.
There's wallpaper, obviously, so you
don't know the backdrop.
So yeah, exactly that, I didn't want to have some crazy
clashing color-- if you're going to have a green button,
it wouldn't really work.
So I just went for a really clean white to go over.
I think it's about 45% opacity black over the top of your
wallpaper, to dim it down, to achieve this effect.
ROMAN NURIK: Awesome.
OK, and the last screen is what it would look like if
you're actually, I guess, in the paused state or a pause
[INAUDIBLE].
NICK BUTCHER: Oh, the resume state, yeah.
So it gives you the option to pause.
ROMAN NURIK: OK, so with that, let's jump into--
we have about seven minutes left.
Unfortunately, well, maybe sub-fortunately or
unfortunately, we don't really have much, or zero, design
news today.
So we'll just talk about some UI patterns that are beyond
just the ones that you've seen in the design guide.
So we've been talking about Action bars, and responsive
design, and using typography a lot.
So you guys have been probably fairly well exposed to these
types of UI patterns, especially horizontal swipe,
swipe to dismiss.
We did some mock-ups in weeks past that
included those UI patterns.
So let's look at some of the less commonly known patterns.
And these aren't necessarily official patterns.
They're really just community patterns-- things that the
community have been using and things that modern UIs should
definitely take advantage of if it makes sense.
NICK BUTCHER: And by community, we mean the
incredibly productive Mr. Nurik has made most of these.
So you're very humble, but thank you, Roman.
ADAM KOCH: Single-man community.
ROMAN NURIK: So the code behind these, I've definitely
written up a bunch of the code snippets to show how to
implement this, but they're really following some of the
design practices from Android apps, from, I guess, first
party apps, from system apps, as well as from the community.
But yes, we do have code samples for all of these.
So if you have questions on how do you actually get to
implement these, then let us know after the show.
So first, let's talk about done and discard.
We've featured this in the past.
Basically, it removes the Action bar entirely and
replaces it with a very similar-looking Done and
Discard bar.
So in really simple screens, where you're just editing a
form, like filling out some simple information or making
some changes to a contact, for example, you could have Save,
and Cancel, and Up, and Back.
But one of the alternatives is, really, to just show this
very simple, straightforward Done and Discard, or Done and
Cancel bar at the top.
I guess, do you guys have any other comments on this?
I mean, we've talked about it in the past.
NICK BUTCHER: Yeah, we talked about it.
I like it a lot because it's compete unambiguous as to
what's going to happen.
I feel it stays true to what the Action bar offers, but
this visual treatment just makes it super clear what's
going to happen.
ROMAN NURIK: Yeah, and there's an alternative where the Done
button appears in the top left, and then Discard is
something like in the action overflow.
And that's more useful if you have other actions that you
want to show besides just Done and
Discard or Done and Cancel.
Or if you really don't expect or don't
want people to cancel.
Like if you're saving a contact, chances are, you're
going to make the change.
NICK BUTCHER: Yeah, that's a good point.
For example, take a look at, in this system, in the people
[? are looking at ?] editing or creating a contact, and I
think, also, the same for creating a
calendar event, right?
And they'll give you examples of this.
ADAM KOCH: Yeah, I was just going to say that that other
form sort of makes it more obvious what, say, hitting the
back button might do.
It would obviously save the content in that case.
ROMAN NURIK: OK, so Done and Discard, we recommend this
for, again, simple editing forms--
screens that you're really just editing a piece of
content, not something that's terribly complex.
Then Pin and Progress.
And this is something that I'll be very briefly cover
because it's kind of less often used.
And ideally, you save everything to your device.
You cache everything and cache opportunistically.
But in cases where you have movies or large files, where
it's clear that the action of caching or saving to your
device is pretty heavy weight, you may want to give the user
an explicit way to save or to pin content from the cloud
onto your device.
And so this is basically a little UI element, this little
Pin button, it's kind of like a check box, where, if it's
checked, then this should be pinned.
And then in the background, it shows the
progress of the pinning.
So if it's like a 300 meg download, and the app has
downloaded 200 megs, then this pie chart should be somewhere
about 2/3 of the way full.
So very, very simple little UI widget that you can use
throughout your apps if you're dealing with very, very heavy
content pulled from the cloud.
NICK BUTCHER: So I really like this element as well because
some people go down a really explicit route of saying, am I
in offline mode, am I in online mode, where I'm going
to stream or pin?
And I think that's the wrong way to go.
I think you should really have a single UI and then just hint
to the user whether or not it's available offline.
And picking up and following the cues that the Play store,
and the music app which comes on most devices, [? views ?]
is going to be a good way to represent that.
ROMAN NURIK: OK, so we have about two minutes left.
Let's fly through some of these others.
Does anybody want to talk about Undo
bars, or inline Undo?
Who wasn't to do it?
Adam.
ADAM KOCH: I feel like Nick likes this one, especially the
inline one.
NICK BUTCHER: So there's a great section the design
guidelines talking about when to prompt for confirmation and
when to kind of offer undo.
And so I'd work through that flow chart, but the essence is
that prompting for confirmation for everything is
kind of like a road block.
You can't really perform many actions very quickly.
So preference to that is, if you have a way to recover,
then to offer this kind of undo action.
So yeah, as the name implies, this offers a way to recover
from an operation you've just done, like
archiving and email.
It lets you undo to restore it back into your inbox.
And, as Adam says, this work, I feel, really, really well in
conjunction with the Swipe to Dismiss pattern, where, when
you swipe an item out of the list, say, it gets replaced
with an inline Undo button which lets you bring it back
in from the side.
I think that works really nicely.
Take a look at the latest version of the Gmail app on
Android 4.2 for an example of that.
ADAM KOCH: Yeah, I think if anyone's actually used one of
these, you breathe a big sigh of relief.
Like, I deleted something, I don't know where it went, and
then typing Undo to quickly bring it back is a great
experience.
ROMAN NURIK: OK, let's go to the next pattern.
And this is a pattern, I guess, we've--
Nick and myself-- we've dubbed this Quick Return.
There's no real, official name for it.
But the idea is that--
this is Google Now.
It's a screenshot of Google Now.
This is the idea that you want to have something that's
persistent, that's always available, something like in
Google Now, like the Search bar.
But you don't necessarily want to take up some of that
precious vertical real estate.
So what you can do is, that bar can scroll off the top of
the screen as you start scrolling down.
But as the user starts scrolling up, ever so
slightly, that bar, wherever you may be in the scroll area,
that bar slowly starts inching back.
And then, as you kind of start scrolling further, the bar
becomes fully visible.
And it almost gives the impression that it's floating
above the rest of the content, whether by using a drop shadow
or whatever.
It's really kind of pinned to the top without actually
always being on screen.
So it's readily available, but not always visible.
It's kind of this nice duality there.
Let's jump to another UI pattern.
This is Tokenized text fields.
And I realize we're running a little short on time, so we've
got to fly through this.
The idea here is that, rather than typing out email
addresses and dealing with lots of free form text, be
smart about it.
And if you see something that is a piece of rich content,
like it actually resolves to some object, replace it in the
text field so that the user can interact with it like it's
a real object and not just a bunch of character of text.
NICK BUTCHER: I'm going to have to go, guys, I'm getting
kicked out.
ROMAN NURIK: You're getting kicked out?
All right, see you, Nick.
I think that was the last-- oh no, we have one more.
The last one is Bezel swipe.
This is Nick's favorite UI pattern.
Basically, when you have horizontally scrollable or
interactive content in the core layout of your screens,
you obviously can't really use that for switching between
tabs or exposing things like side [? jars ?] or navigation
[? jars ?].
So the idea here is that you use the Bezel, the leftmost
and rightmost about 16 dps of the screen, where if you
initiate your swipe from there, it's
treated as a Bezel swipe.
So you're almost like pulling the content from off the edge.
And this is what Chrome does, Chrome frames it.
ADAM KOCH: That's a good example, yeah.
ROMAN NURIK: And actually, this is something that the new
lock screen does as well, as far as I know.
So yeah, so this is another great pattern for always
making horizontal content accessible using swipe, but
also having horizontal
interaction within your screens.
I think that's the last one.
So we're a little over on time.
But I guess, thanks again for joining us on
Android Design in Action.
As always, I'm Roman.
ADAM KOCH: See you guys, Adam Koch, and Nick Butcher, who
just left us from London.
ROMAN NURIK: Yeah, so we'll see you, not next week, but
probably in a few weeks.
So see you guys, have a great break.
[MUSIC PLAYING]