Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
Search results and product category pages often need a way to divide up information into manageable chunks, as presenting thousands of results on a single page would take forever to load and overwhelm the user.
Vocabulary
Filters: options that narrow down a list of items to a manageable number that satisfies specified user criteria
Infinite Scroll: a technique that loads content continuously as the user scrolls down the page, eliminating the need for pagination
EXAMPLES
Further Reading
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
Search results and product category
pages often need a way to divide up
0:00
information into manageable chunks,
0:05
as presenting thousands of
results on a single page would
0:07
take forever to load and
overwhelm the user.
0:10
For example, from Etsy's homepage,
if I navigate to Pet Clothing & Shoes.
0:15
I receive over 285,000 results.
0:22
I can refine my results by
choosing a suggested category
0:25
such as Pet Hats & Wigs.
0:30
4,400 results is a bit
more manageable, but
0:32
still far more than a user
can digest at once.
0:36
Let's take a look at different
ways to make a large set of
0:40
results like this more
approachable.
0:43
Etsy provides a set of filters on
the left side of the screen that allows
0:45
users to narrow down the results to
a manageable number that satisfies
0:50
their specified criteria.
0:55
If I'm interested in
only handmade pet hats
0:58
and wigs under $25,
that offer free shipping,
1:03
I can apply those three filters and
reduce my results to 1,900.
1:12
Note that I can remove a filter by
clicking the X above my list of results.
1:17
Mobile filtering is a bit trickier
since there isn't room on the
1:24
small screen for a sidebar.
1:29
Etsy's mobile app is more search
oriented than the desktop site.
1:31
So I'll try searching for dog wigs.
1:35
And when my results arrive,
1:38
I can trigger my list of filters
by tapping the filter icon.
1:40
Finding the same filters takes
a bit more thinking here.
1:45
I found the price and
shipping filters pretty easily.
1:49
But where is the handmade filter?
1:53
Oh, it's under item type.
1:58
One thing Etsy hasn't offered is filters
specific to my shopping category.
2:03
On the desktop, notice that while I can
narrow down by color or by occasion,
2:09
I can't filter out other animals and
just focus on hats and wigs for my dog.
2:14
This provides a weaker experience
than shopping at Wayfair.
2:20
While shopping for
kids' rugs on Wayfair,
2:25
I see filter categories like
rug shape and pile height,
2:27
while TV Stands offers a category
called max TV screen size.
2:32
Customized filters like this
are more work to implement, but
2:37
they produce more specific results and
inspire more confidence in the user.
2:41
Let's filter Wayfair's TV stands
down to a manageable set of results.
2:47
I'll choose a 60-inch TV,
2:52
a max price of $200, and
2:57
products that are currently in stock
3:01
which reduces my results to 452.
3:06
Scrolling down to the bottom of these
results, we'll see a pagination
3:11
pattern that should be familiar to anyone
who has performed a Google search.
3:17
I'm currently on page one, and
there are ten pages total.
3:23
Wayfair allows me to increase my items
per page to 96 or decrease to 24.
3:28
Pagination patterns on product
category pages work best when coupled
3:36
with sorting options, which are found
back at the top of my results.
3:41
While Wayfair puts recommended TV
stands first by default, I can switch to
3:49
viewing the products with highest
customer ratings first, or sort by price.
3:54
I've included readings on both filtering
and pagination in the Teacher's Notes.
4:01
As an alternative to pagination,
4:07
many social media sites instead
employ an infinite scroll pattern.
4:09
I'm looking up dog wigs in
Pinterest's mobile app.
4:14
And you'll notice that the interface
patterns covered in this video
4:18
are missing here.
4:21
There's no pagination,
no sorting options, no filters.
4:23
In addition, it's impossible to
reach the bottom of the page.
4:28
As I scroll down, the app
keeps loading more results.
4:31
Infinite scrolling can be
a highly addictive pattern.
4:36
And apps like Pinterest with
an endless supply of user-generated
4:39
content use infinite scrolling
to create a sense of discovery.
4:43
If you don't like this first
set of results, no worries.
4:48
Just scroll down and
find out what's next.
4:51
Infinite scrolling also
arguably requires
4:55
the least amount of
thinking from the user.
4:58
It's possible to navigate
Instagram, for example,
5:01
without ever tapping the interface.
5:04
Just scroll down and
enjoy the pictures.
5:07
Infinite scrolling does not make
a great e-commerce pattern, however,
5:12
as documented by
an article on the pros and
5:16
cons of infinite scrolling
found in the Teacher's Notes.
5:19
Continually adding more resources
as the user scrolls down can
5:23
really slow loading time.
Plus, not having
5:27
distinct pages makes it impossible
for the user to remember
5:31
the location of their favorite
product or bookmark it for later.
5:35
Many large sites also keep a collection
of important links in the footer.
5:41
But footers are absent from
infinite scrolling interfaces
5:46
since users never
reach the bottom.
5:49
Speaking of footers,
that's the topic of the next video,
5:53
the final video of this stage.
5:56
I'll see you there.
5:58
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up