Android Design in Action: Fitness Apps and Modern UIs

Android Design in Action: Fitness Apps and Modern UIs


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]

1 comment on “Android Design in Action: Fitness Apps and Modern UIs

  1. Piero Hernan Post author

    Hello, excelent video!. Can you share some piece of code for the modern UI?. Regards from Argentina.

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *