Tip:
Highlight text to annotate it
X
ROMAN NURIK: Hello, and welcome once again to "Android
Design in Action." I'm your host Roman Nurik.
NICK BUTCHER: And hi, my name is Nick Butcher.
ROMAN NURIK: And today we're going to be talking about
designing collections.
Collections specifically, I guess we're talk about what we
mean by collections in a second, but collections are
all about lists, and presenting lists of objects
and collections of things, groups of objects.
Anyway let's just jump in.
So like I said collections are really just groups of objects
of I guess things like a list of items in a shopping cart,
or a list of books, things like that.
So today we're going to be talking about a couple things.
I guess we're going to be talking about consumption of
collections as well as mutation of collections.
By consumption of collections, I really mean things like
being able to view a collection obviously, being
able to search through it, filter through it, things like
that, as well as things like responsive design for
collections, and Nick will do a bit about that.
And then also, we're going to talk about mutations of
collections, specifically ways in which you can allow users
to add items, remove items from a collection, reorder
them as well as take action on certain items in a collection.
All right.
So I know that was a super fast intro.
Before we jump into all these specific details, we just want
to look at one thing first is basic presentation.
So throughout the rest of these slides, throughout the
rest of today's episode, we're going to be looking at very
specific details but from a very high level.
This is stuff that we obviously already talked about
in the past, but we're going to be looking at collections
from a number of different viewpoints.
Obviously, you know you can use a list to present a
collection of objects and grid to present a list of objects
or a collection of objects as well as something like a
ViewPager, like swipe between different items within a
collection.
We're going to be focusing on the first two here.
We're not going to spending too much time on the
ViewPager, the swiping between items.
So just kind of keep that in mind, I guess.
Before we jump in, Nick do you want to add anything to that
super fast intro?
NICK BUTCHER: No.
As you said, we're not going to talk about what a list is,
what a grid is.
We're more kind of go through the options you have on
Android for working with these collections,
doing things to them.
ROMAN NURIK: Cool.
All right.
So let's jump in to collection consumption.
Nick, do you want to talk about collection consumption?
NICK BUTCHER: Yes.
Absolutely.
So here we've kind of called this section distillation.
So this is when you're acting upon items where in the
collection kind of refinements and so forth.
And so we pulled up three examples here on the slide,
the first of which is a quick way to kind of section and
navigate around content with a collection.
And so some standard ways of doing that on Android, we've
pulled out working from left to right, first off we have
this combination of headers with an index fast scroll bar.
So in this example here, we're using the People app.
They're your list of your people, and
contacts, and so forth.
So you can see that each of the letter of the alphabet has
a section, and this instance is using a pass that we call
sticky headers.
So you can see here that e has stuck to the top and will stay
in place until it's scrolled out of view by the next
section here after that.
Combine that with a quick scroll from as a fast way to
navigate these kind of long lists of quite structured data
that work quite well if your data is a good match of that.
It doesn't work so well if your data doesn't have such a
kind of rigid and expected structure.
So it depends on your data needs whether
that will all work.
The next kind of distillation method, which is called on
Android we're using this kind of view change.
It's using one of the facilities of the action bar
which allows you to kind of flip the
representation of the data.
So in this example, we're using the Gallery application,
which let's you view your collection of photos as either
a grid of photos or you can get this cool kind of zoomed
out film strip view where you can see them one main photo
mainly at a time, we'll have to cut more peeking in on each
side and quickly fling between them.
So yeah.
Here we're using the action bars spinner all have
drop-down control in order to provide this kind of switch of
views or flip a view type.
And the last kind of distillation action that I'm
going to talk about is sorting.
So in this example here on the right from a foreign rep side
of ADIA, we're using an action bar button in order to reveal
a sub menu to do some sort.
So if you see the kind of the three lines action buttons,
the standard iconography on Android for sorting, pressing
that reveals a sub menu which lets you pick how you want the
data sorted.
So pretty simple stuff.
These are the common ways on Android in which you can do
these kind of distillation-type behaviors.
ROMAN NURIK: Yeah.
And one more thing I wanted to mention is that another way to
do the view change is to have an Action Bar button that lets
you toggle the view, but actually I find that what
Gallery does here is actually kind of neat.
It kind of expresses both the title of the current screen as
well as the type of view all in the top-left kind of View
Details area, which is this kind of a neat
way to expose that.
And then any time you press the spinner and make a change,
only the subtitle I guess changes.
The top title camera doesn't change which is pretty cool.
NICK BUTCHER: Definitely.
ROMAN NURIK: All right.
Moving on.
NICK BUTCHER: So some more types of distillation
we have here is--
and these are kind of slightly different to the previous
types in that these distillation actions were
actually apped upon the items so it will refine or show less
items rather than just flipping to another
representation really So it's more kind of
like filtering behavior.
So the first off column 1 used the kind of standard searching
behavior in order to just filter through the items
already shown on screens.
So in our example, we're going back to the People application
again where you can start searching for a contact.
So this works really well for large data sets where if you
had to pick from a list, the drop-ins, it might be too
large or too kind of nonspecific, so search can
work quite well there.
The next up is a simple kind of filter switch where you're
changing kind of on discrete filterable things.
So in our example here, we're using pocket which let's you
select and store different kinds of media for later
consumption.
And they use this kind of corpus switch filter to kind
of filter down just to kind of articles, videos, images, I'm
looking at media type, so that's a pretty common one.
And again, that's implemented as an action
from the action bar.
So pressing the action reveals a sub menu.
And in this particular visual design pocket, I've chosen to
use the kind of the right pointing down on right kind of
arrow to kind of display either there are other options
here, which is kind of optional.
We see it similar to sorting behavior in that you don't
necessarily need to have that drop-down option.
ROMAN NURIK: And another area where this is used, this kind
of bottom-right triangles would be ShareActionProviders.
So if you have a custom or I guess if you use the
ShareActionProvider or the share pack as it's sometimes
known as, and you press the button, it actually shows kind
of an anchored list as well.
So it's a very similar presentation, so it's quite
often coupled together.
NICK BUTCHER: Yeah.
And it's got quite the support in the platform of [INAUDIBLE]
so it's easy to implement this kind of stuff using sub menus.
And the last one which is my favorite ones is using this
right side d in order to provide
some filtering behavior.
So again, this screen shot is from an earlier episode of
"Android Design in Action" where we went quite in depth
about its topic.
But I'm a big fan of this because it has a lot of the
benefits of the drawer.
And left-hand drawer will have a navigation as it can for
actions on the right-hand side.
So some of those benefits are very kind of as it appears,
kind of in Chrome level, so it's above the content in a
way, which is great for filtering in my opinion.
Because you can see they're acting at a level above the
content rather than inline with the content.
And what's more if your data supports it, you can imagine
changing these filtering settings and seeing the kind
of content behind the update live, the number of results is
displayed, producing, and so forth, which that kind of
instant response is a great thing to provide.
So in this instance, we as with the navigation drawer,
you have an affordance in the action bar, so here we have a
filter icon.
But this would also be accessible by a kind of an
edge swipe, a X swipe, a Bezel swipe from the side, on,
giving real quick and instant access to
the filtering options.
ROMAN NURIK: So one quick note,
actually two quick notes.
The first is if you want more details on the specific
design, look at the past episode titled "GDG Oslo." I
think we also covered brand consistency in that episode,
but this is from that episode.
And the second thing was, a live example of the actual
interaction could be found in the Google+ app, the way in
which they do notifications.
They use this type of interaction for notifications,
but it's perfectly suitable for other types of things, for
example, filtering.
Generally, not great for navigation, for core
navigation.
That's really more for the navigation jar, the left side
of the screen, I guess.
But for filtering, for distillation of content in a
collection is a great option.
NICK BUTCHER: Absolutely.
ROMAN NURIK: Let's move on to responsive layout.
NICK BUTCHER: Yeah.
So when we're talking about collections, we have to kind
of have this extra dimension that I had over the fact that
they're going to be displayed on all
sizes and shaped devices.
So something like a list view, for example, might work great
on a small device, but it's not going to scale up terribly
well to a larger device especially when you think
about say 10-inch tablets in landscape orientation, lists
can be a pretty bad way of displaying information because
you end up with these excessively lot-wide list
items with lots of white space and so forth.
So the first pretty simple thing you can do is switching
up from say using the list in a smaller device up to
something like a grid view in the larger device.
So problematic, this is very simple to do in Android.
Both of these list and grid components kind of have that
common base so it's very easy to do.
You just provided different layouts, say over this size
web view, this representation of my item rather than this
list type one uses grid type one.
And this can work especially well if you have very kind of
visual, like large images or thumbnails, which you can use
to form these kind of like grid items.
So this is one simple way in which you can use the space
better to present your collection.
If you want to go into details about this pattern as well,
the last Google, Roman and I gave a talk and we've
documented some code on how you might go about
implementing this.
The next thing you might consider doing is breaking out
into this kind of like staggered representation.
So this is kind of like the step up from going
from lists to grids.
This allows you to create a more dynamic kind of more
appealing representation of your collection.
It allows you to kind of recognize that not every item
in your group might be similar weight.
So in this example here, we're showing some kind of news
story, if the story is particularly relevant,
particularly pertinent to the user, you might take this
opportunity to break out of the standard rhythm and take
up say a couple of cells and so forth.
And this is another kind of way of just re-utilizing the
space, and that's available to you when you go
on to larger devices.
ROMAN NURIK: Moving on.
NICK BUTCHER: Moving on.
You can use a combination of these [INAUDIBLE]
all together and as you kind of get more available
space to play with.
And one great example of this is the third-party Out of
Pocket, which I think we've mentioned on the show earlier
before, which is a really great job of adapting to the
amount of space available to it.
So starting on the left from a small device, they use a
standard list-driven navigation to kind of show a
collection of items.
But as they get more room, they kind of break it out into
sharing grid view and then on even larger devices, they
switch up to a stack of grid view.
So as you can see here, this avoids those problems of
having these awkwardly-wide cells.
You can imagine if that list view was just stretched all
the way across that tablet, it would look pretty uninspiring.
And instead, if they see it as an opportunity to make the
content kind of stand out and use it to highlight stories,
which might be particularly interesting to these.
So it's kind of great use of the opportunity.
ROMAN NURIK: Yep.
So this is just a great example of really kind of
having the content, kind of having, I guess, constraints
on your content, making sure that images are a certain
aspect ratio, making sure that the content never, or the body
text never exceeds certain number of characters per line
and kind of starting with those constraints and
designing outward from there.
NICK BUTCHER: Yes.
As you were touching on here, I'm just going to slide this
to show that when you're thinking about displaying your
collections on this kind of variety devices, you kind of
have to let go of a little bit of the kind of strict control
of the layout.
And one technique that works really well-- go on to the
next slide-- is to use this kind of
center cropping technique.
So this is a technique which will help you with your images
to make them scale from wider to smaller devices and
sacrificing some kind of complete control over the
pixel dimensions, but just saying maintain this correct
aspect ratio and pick the right kind of segment of the
image in order to display it in the amount of space
available to cell item there.
So you use the center cropping technique and really help you
to build these cell contents of the individual
items in the group.
ROMAN NURIK: Yeah.
This works really well for like landscape photography or
images like these strips of bacon here.
Doesn't work so well when you have people's faces or other
things that have important or other photos that have
important content around the fringes.
I think we may have touched on this in past episodes, but it
is definitely a very, very important technique to use.
NICK BUTCHER: Of course there's still ways to do that
with that kind of imagery.
You might just have to do a pass at it first and store
some data about where the center is rather than being
the physical center of the image.
It might be you detect where the faces are on the server or
something like that, and when you deliver the image down,
you pass in some information.
So it let's you do the center crop technique but without
using the actual center, using a focal point instead.
ROMAN NURIK: Absolutely.
Or use the face detection, definitely a good technique.
A little harder, a little more difficult to implement for
developers since there's no kind of like random or
arbitrary center crop.
It's just like kind of the center of the photo or it kind
of centers around the photo, but definitely some of that
can be done.
It's not incredibly difficult, but it can be done.
NICK BUTCHER: Cool.
And so one of the techniques that Google is moving towards
is what we like to call this kind of inside out design.
It's a kind of more of a change in mindset than
anything else.
It's thinking about your content first, thinking about
what the information you're trying to display, what your
building blocks are and building outwards from there,
rather than starting with a grid, starting with a
Photoshop with a canvas of a certain size and then trying
to sort your information into it.
It's kind of going the other way around.
So in a lot of Google design language, we're moving towards
these carts or these blocks of content, these kind of
individual blocks of content and
building from there outwards.
So we think about content, and we're thinking it can have
different representation.
So it might have a big cart here at one certain
size it might be.
It might have different sizes it can be in like maybe small,
or tiny carts.
It might have different landscapes it can be in.
But all of these are just thinking about this is my
piece of content and here are some ways in which it can
express itself, it can draw itself, it
can represent itself.
And then once you can have those building blocks, you can
then build outwards and then see how they slot together.
So starting from the individual one, you can place
it into a canvas on the screen and then by using just simple
proximity rather than kind of bounding boxes or kind of
support in Chrome, you can just build them up into these
clusters of items.
You can build up your grouping, your clustering of
items just by placing them next to each other.
And then you can introduce this variety of the different
representations.
So you might use different orientations, different size
carts to denote something might be more important.
So this item on the left might be most relevant to me, and it
can take a different rhythm than the rest of the items and
use that to kind of express why the information is
important to me.
And the concept here really is to build this up into these
canvases, which is like a collection of items where the
canvas is more of a conceptual thing rather than being kind
of bounded to how much screen really is on device.
But it's more like an ideally, this is the group of items
which want to be displayed next to each other.
So then when it comes to actually time to kind of show
this on device, the device might show a portion of this
cluster at once to might be this is the kind of portion of
items and I will be able to then pass horizontally swiped
to move along and see more of the cluster available to me.
Or in a larger device, I might be able to take all of this
conceptual cluster of items, and see them
all at once on screen.
So as I say here, it's kind of like starting with the
smallest building blocks but starting with your information
first and building outwards rather than starting your grid
and trying to fit information in.
So one example of looking at from the Play Store of how to
represent a movie might be, hey, here's a few ways in
which we know we can represent the information that's
important to this movie like the poster, a title, a price,
a description, a reason why it's interesting to you.
And you build these different building blocks, these
different sizes of which you can express itself.
And then the device at run time just kind of picks the
right representation to show this cluster of information.
And it might be able to show only one thing
on screen at a time.
It might be able to put it next to this mode of stuff and
build up this cluster of information.
But you at least start from these building blocks, these
conceptual building blocks.
And that was just kind of like a rapid run
through this approach.
If you want to learn more, we did a whole show looking at
this kind of stuff when we talked to some of the
designers who worked on the Google Play applications.
So do go back and check out that show if you want to hear
some more about how we at Google have been using this
kind of inside out design principle to design our
collections.
ROMAN NURIK: Excellent.
All right.
So with that, let's move on to mutating collections.
So there's a couple of different ways to mutate
collections.
What we mean by mutating is allowing the user to make
changes to the collections.
And we're going to try to speed through this since we
have very little time left.
But the first is the very basics of adding or removing
content to or from a collection.
So how can you do this?
The first pretty obvious way is this example in the People
app, you simply have an action bar item that allows you to
add something.
In this case, you're allowing the user to add a group of
contacts or add a new group that's going to have no
contacts for now.
And we'll talk about that in a second with
some details there.
Another more kind of potentially interesting way of
doing this, more useful way of doing this, more contextual
way of doing this is to actually place the affordance
to add new content in line.
So here in Google Play Music, you'll notice the Create New
Station button is in line with the actual stations.
And even better example is here in Google Keep, which
will actually use quite a bit throughout the next few
screenshots.
You'll notice here that in the to-do list or in this kind of
a checklist, the next item, the item that you are going to
be adding next, is kind of this faded out almost semi
transparent item indicating that it's not there.
It's almost like a ghost of an item.
It's not there but click here or touch here and start typing
your content, and it will become a real item.
So it's almost kind of hinting that to create a new item,
here is where you start entering your information.
So this is a very kind of good technique for allowing users
to add content in line with the rest of the items in the
collection.
Another very good technique for this is to
use the empty state.
So the empty state is something we talked about in
last week's episode on onboarding, but basically the
empty state is when you have no content in a collection.
And we find that is one of the biggest missed opportunities
across apps on Google Play is that when there's new content,
the app either says, there's no content, or sorry there's
no content, or just a loading spin or something.
That's a great opportunity to actually let the user fix that
problem, actually let them populate that collection, let
them fix the problem of the empty state.
So in here in Google Keep, if you have no reminders, the
center of the screen actually has this nice, big affordance,
this nice, big touch target to create a new reminder.
Touching that actually takes you to the
create a reminder flow.
So those are some basic ways to add items to the
collection.
NICK BUTCHER: And I think quite often people when think
about adding items they think that's an action, adding is an
action, and therefore, up here I know what action is going in
action bar.
But I think that can often be kind of a missed opportunity.
I think these inline options can often avail convey more
context with them.
I mean, this Google Keep one in particular, you can know
exactly what it's going to app there, what's
going to happen there.
It kind of conveys a lot more information than just having a
simple button in the action bar.
I could do a lot more.
ROMAN NURIK: Exactly.
And the key there is context and direct manipulation.
It really kind of helps satisfy that design principle.
All right.
So sorry, folks.
I think we're having some technical difficulties, but
now let's jump back into it.
So one thing I wanted to mention when talking about
adding items specifically exposing an action in the
action bar for that, is you should try to, when possible,
show the actual icon representing the object type
as well as a plus overlay or plus suffix as
it's labeled here.
And this is really kind of a platform convention.
It helps establish context for what exactly you're adding.
Cases where you don't really have a great iconic
representation of the content, you could just show a plus,
but for sure, it's preferred to show the plus as a suffix
again to establish context.
All right.
So let's move on to removing items.
So there are number of different ways to allow users
to remove or delete items from a collection.
The first is using this kind of contextual action overflow
that you would place inside of your object.
And what happens is when the user presses these three
little vertical dots, and actually the touch region
should probably be expanded to be about 48 dip, the bottom
right 48 dip of a screen, if they touch that overflow,
they'll get in anchored pop up menu of actions they could
take on that object.
So in this case, I'm looking at a station on Google Play
Music, and if I press these three vertical dots, I get
this delete action.
So that's one way to delete something.
Another way is to trigger the contextual action bar.
So here this is Gallery.
If you long press one of these photos and then you can also
press other items that are adjacent to select those as
well, you actually see the contextual action bar up here
at the top of the screen, and then you can choose to delete
those objects.
So these two things, the contextual action bar and this
contextual action overflow, I guess, these are also useful
for other things, but deletion or removing an item from the
collections is one very common way to do that.
Now, another way to remove items is to use something
called swipe to dismiss or swipe to remove, and this
works best in kind of like a vertical list or horizontal
list of objects where if the user starts swiping left or
right in a vertical list or up or down in a horizontal list,
the object is removed from the collection.
The nice thing here is that as part of this interaction, as
part of this gesture, you can also kind of have the adjacent
items slide in or animated in to fill up the gap that was
left by the item that was moved to help kind of convey
the concept that this thing has been kind of removed from
this set of objects.
NICK BUTCHER: And I think this kind of swipe to remove
pattern is a very visceral, direct manipulation pattern,
so rather than operating machinery like pressing a
button to remove something.
I'm actually like grabbing the [INAUDIBLE] and
getting rid of it.
And it's kind of really satisfying.
ROMAN NURIK: Yep.
Exactly.
NICK BUTCHER: It's also quite prevalent in our system as
well, so like notification is the recent stack, use it.
A bunch of basics used for Android, so it's pretty
well-understood gesture as well.
ROMAN NURIK: All right.
So let's move on.
There's a bit more to say on the contextual action bar, but
we'll talk about it in a bit.
So beyond just simply allowing users to add or remove items
to or from a collection, one of the things you may want to
do is allow them to reorder things, reorder objects.
An example of this could be personalizing kind of the
order of navigation sections that you care about or
something as simple as reordering a set of
tasks in a task list.
So let's talk about some of the ways in which you can
allow users to do that.
The first is to use something called like a drag grip.
So you want to send these first two examples on the left
of your Google Keep.
On the right, you have Google Play Music.
There's these three horizontal little lines, and it's kind of
a smaller version of the burger menu icon or the
navigation drawer icon, so we kind of like to call it a
slider if you get the joke.
So this drag grip is basically these three horizontal lines
that are vertically centered within the object that you're
showing, and it's on the left-hand side.
So if the user presses or touches in that area, the
object kind of is picked up momentarily, and the user can
kind of drag up and down to reorder it.
So on the left, you'd reorder a set of tasks.
On the right here, you would potentially reorder items
within a play queue, for example.
And Nick brought up this earlier, kind of important
point around how this works with the navigation jar.
One of the features of the navigation jar is that if you
touch anywhere, if you're on a screen with a navigation jar,
if you touch on the left side of the screen, on the left 16
dip or so of the screen, the navigation jar kind of peaks
in to indicate that it's there.
And you'll notice actually that with these drag grips,
they're also on the left side of the screen.
So those are kind of two overlapping touch regions.
So generally, if you have a navigation jar and also want
to expose reordering with this kind of drag grip approach,
you'll probably either want to re-think what's most important
is offering the jar there most important or the drag grip or
just place the drag grip on the right side or somewhere
else within the item.
So that's a very important point.
Another thing to note is that this touch region is actually
very small, and since this is a fairly important kind of
gesture, fairly important action, you may want to
actually virtually extend the touch region
to be about 48 dips.
So while it looks like it's about 16 or 20 dips wide, you
may want to use something called a touch delegate to
allow users to touch anywhere within the left 48 dips of the
screen to allow reordering or dragging.
So that's the drag grip and we'll talk about presentation
of drag grip in a second.
But another way to do this and actually this is another
example from Google Keep, another way to allow users to
reorder is to allow them to touch and hold to kind of pick
up the object, very similar to how you would trigger the
contextual action bar.
But then once you touch and hold and start moving your
finger around, the object starts dragging around, so you
see the ghost image of the object underneath the finger
and then you see kind of a destination rectangle kind of
move around to indicate where the object will land
when you let go.
So this is again slightly more direct manipulation like.
It kind of fits that principle quite a bit more.
But it's slightly less discoverable since it doesn't
have an on-screen affordance.
NICK BUTCHER: Another thing you just said, before we move
on, is it's important to indicate when you enter this
mode as well.
So you need to do examples.
Once you start the drag action so when you touch on the
slider menu or when you long press on the item in Keep,
they visually react to it.
So in Keep, you see a kind of ghost semi transparent, and it
actually kind of moves, I think, about 16 dips up and
right or up and left.
It's physically like you've picked it up almost.
And I just indicate that this is what you're acting upon, so
it it's good to react straight to it.
ROMAN NURIK: Yeah.
Absolutely.
One thing I wanted to point out here is that there's
actually two visual presentations for the drag
grip, the first is this slider that we call the little three
horizontal lines, a slightly more common yet older style is
this kind of tire track where basically you have these
little kind of boxes, two columns of boxes or squares
aligned to the left of the screen.
And the interaction is just the exact same thing.
You basically kind of touch to pick up and start dragging up
and down, but the visual
presentation is slightly different.
So this is slightly older style.
This is a slightly newer style.
Both are certainly valid approaches.
All right.
So let's move on to acting on items.
So this is kind of the big one here.
This is actually kind of a summary of a
couple of these things.
So acting on items, what we mean here is, generally, an
object in a collection has a single main, a
touch target itself.
When you touch on it, you show the details for the object or
kind of take the primary action.
Now, what if you have secondary actions, other
things you can do to that object?
And we touched on a couple of these already but, the first
is to offer an action overflow or a contextual action
overflow, I guess.
So you would have these three vertical dots.
Like we said before, you touch the overflow affordance, and
then you see a pop-up menu.
So this works well with the secondary actions like delete.
Also things like if you're in Google Play and you're looking
at an app, you can press the three vertical dots to
immediately start installing that app, also things like
edit or whatever you want, any other things, share as well.
The contextual action bar is certainly kind of the more
standard, more common approach to doing this.
So what you do here is, you select an object by long
pressing it and then the context of the screen changes.
So your action bar changes into this contextual mode and
then you can take action from there.
For example, here you can long press to pick up a note in
Google Keep and then change its color sort of a reminder,
or archive it.
You'll notice that here in Google Keep you can long
press, like I said before, long press to pick it up.
If you don't move your finger around, it just selects it and
lets you take action.
If you start moving your finger, it will actually start
dragging it.
So these two are very, I guess they work
in tandem, if possible.
NICK BUTCHER: And one of my favorite things about the
contextual action bar is it's a very easy way to act on
multiple items at once.
So you can imagine in the Gallery example there, if you
long pressed on an individual photo, it would offer one
selection of actions, which is applicable to a single item.
But if you just quickly tap on three extras, you have a group
force of exit.
You can very quickly access them, very quickly share them,
and delete them, whatever it is you want to do much quicker
than I'm going to have to go into an item and perform an
action, come back up to the group, then go do again.
So the contextual bar is very powerful in that way.
ROMAN NURIK: One other note I wanted to make here is that
rather than taking the action first and then selecting which
objects you want to take action on, like it is very
common in other platforms, on Android it's really kind of
select first then take action.
The nice thing about this is that it's very much direct
manipulation minded, right?
I mean, you start with the content, you start with the
object, and then you perform the action.
The other nice thing about the contextual action bar here is
actually you can offer things like Select All really easily.
So once you long press the Select, you can offer like a
spinner in the action bar offering the user to Select
All or Deselect or things like that.
All right.
Moving on since we're running super short on time.
Another very popular way of offering a secondary action is
to offer something in line with the list item running
along the right side of the screen.
So here you'll notice that with this individual object,
another action you could take is make changes to it, change
its settings.
And this is offered as a Settings icon all in the right
side of the screen.
You'll notice that there's a little divider here, and this
serves the purpose of indicating that there are two
distinct touch regions.
So if I touch here, one thing will happen.
If I touch here, something else will happen.
Another think you should keep in mind when presenting this
type of UI is that you should make sure that the entire
right side of the screen or right side of this item is
dedicated to that secondary action.
So if I touch above the icon or below the Settings icon,
you should still trigger the settings action.
And that's really to kind of simplify the number of touch
regions or simplify the touch regions on the screen and to
prevent human error with touches.
NICK BUTCHER: And those are kind of echoed by the touch
highlight, so that if you were to touch on the main item, the
entire line will light up to kind of like underscore the
fact this is the main action, and if you touch on the
secondary reaction, just the area up to the
divider will light up.
ROMAN NURIK: Yep.
One last thing I wanted to point out here is another good
example of this since you know this entire episode has been
driven by examples, we wanted to see these
techniques used in action.
Another really good example of this is in the contact details
screen, you manage your phone probably has contacts app on
your Nexus device probably the People app.
When you're looking at contact details, if you look at a list
of phone numbers for a specific contact, you'll
notice that each of those phone numbers has an
additional secondary action on the right to send a text
message to that number.
So the primary touch target, the phone number itself, will
try to place a call to that number.
But then if you touch on the right-hand side, there's
little text message icon that will actually take the users
to the composed text message screen.
So lots of different ways to offer
additional actions on objects.
So I think that about does it for collections.
So we talked about a couple things today.
We talked about specifically kind of how you can offer
filtering, searching, sorting through collections, I guess
the consumption side as well as how to present collections
in a very responsive way.
And then we talked about a mutation of collections,
adding/removing items, reordering them, as well as
taking action on items within a site of objects.
So that's about it for today.
With that, I'm your host, Roman Nurik.
NICK BUTCHER: And bye from me, Nick Butcher.
ROMAN NURIK: Thanks for joining, guys.