Fixing the UX of
Infinite Scroll

MinneWebCon 2013

Zachary Johnson — @zacharyjohnson
Zachstronaut LLC — zachstronaut.com

"Tell them what you're gonnna tell them."

1. We'll look at some of Infinite Scroll's UX problems.
2. We'll look at some possible solutions.
3. We'll talk about how this applies more broadly.

Facebook, Twitter

Ok, fine, Infinite Scroll
is not all bad.

• Stickiness and engagement
• One less click, hooray for laziness
• AJAX content loading faster than full page load
• Loading ahead of time, less waiting

UX: Anticipate the user's needs.

UX: Reduce unnecessary choices.

There is one User Story that
Infinite Scroll covers very well.

 Just one.

I scroll down to read more, and hey whatdya know, it's already loaded!

But let me tell you another story...

 [scroll down a bajillion times]
Hey, I'll click this interesting link!

Ok, now I'll just go back
to where I left off...

...or yeah send me back to the beginning. Gee, thanks.

Facebook, Twitter, Pinterest

And then I leave the site.

Frustration is not engaging.

UX: Design for the platform.

(Don't break the back button.)

Great, my browser crashed...

Oops, I didn't mean to close that tab...

...back to the beginning, again? Sure, why not?

Twitter, Pinterest, Boing Boing

You aren't loading...
Why aren't you loading?

Ok, I'll try reloading... Page one? Hooray!

Twitter, Facebook, Pinterest, Brand New Pinterest

UX: Anticipate errors.

Wow, this stuff is amazing!
[scroll scroll coffee donut scroll]
But never ends...

I should get to work.

Lunchtime! Now where was I? Ugh, fine I'll work.

Twitter, Pinterest

UX: Design for busy people.

Also, remember new users and frequent users
have different needs.

Theme: Resume

Supports resume: VHS, DVD, Netflix, ...

Twitter and Facebook are live feeds,
but I've been able to pause live TV for a decade.

Why is there no way to
resume reading later?

High Quality Theories:

1. Punish users who dare leave without reading everything.
2. Conspiracy to bore and frustrate workers on their internet breaks.

Why is there no way to
resume reading later?

Higher Quality Theories:

3. Because there's no URL for where you left off!

Why is there no URL?

Because AJAX.

How to Break My Browser 101:

Put your entire website experience
on a single URL.

Browser URL Is Your App State

URL should represent current:

• View
• UI state
• Content loaded in view

No URL for content?

• No linking
• No bookmarking
• No back/forward button
• No refreshing
• No resuming

We can fix this!

Demo

What dark magick is this?

HTML5 History API

AJAX changes the
current page's content.

History API changes
the current page's URL.

Better Than #Hash

• Change any/all of location except domain
• No /puppies/#/monsters/frankenurls/
  • foo.com/contact/ → foo.com/projects/
  • VS. foo.com/contact/ → foo.com/contact/#/projects/
• Real URL, server can populate directly on reload!

Can I use?

History API was added as part of HTML5 spec.

caniuse.com/#feat=history

IE 10+ (Why you always gotta be like this?)

GitHub: History.js polyfill*

* /hope/you/like/#/polyfills/

The API

Google: MDN History for more docs.

I think I get it!

So fixing Infinite Scroll is as easy as calling history.replaceState() with the URL of the next page being AJAX loaded, right?

Ehhhhh, that's a start...

Demo

/**
 * https://github.com/paulirish/infinite-scroll
 * Infinite Scroll Load Success Callback
 */
function (elements, data, url) {
  if (window.history) {
    // Keep in mind user wants to refresh newest content on homepage.
    // Push the state from the homepage, and replace after that so
    // the user can press their back button once to return home.
    if (window.location.href.match(homePattern)) {
      history.pushState('', '', url);

    } else {
      history.replaceState('', '', url);
    }
  }
}

But what happens if the user
scrolls back up?

Listen to scroll events and replaceState when
we cross "page" boundaries.

Kudos: discourse.org

• Rare example of good infinite scroll!!
• Uses replaceState at post boundaries.

And another thing...

You cannot manipulate history without consequences!

(If a web page goes back in history and steps on a single butterfly...)

Back button returns you to your
previous scroll position, but not your previous content.*

The user will return to just page 5, not pages 1 through 5.

And they'll be scrolled to the bottom of page 5.

* Sometimes Firefox and Safari remember**,
but never Chrome.

** Never works for Twitter or GIS, does work for Pinterest. Redirect issue?

Interesting Idea: Alex Micek

• Uses URLs like /page1-5/
• Back button restores whole range of pages.
• Inefficient for large ranges.
• Not ideal for bookmarking progress.

Bradbury Strikes Again

When we change the content, we can change the URL.

If the user presses Back/Forward, that will also change the URL... but it won't change the content.

Listen for popstate event when
the URL changes.

Make sure the correct content is displayed.

Infinite Scroll UX Problems Are History

(Puntastic!)

Demo

How else can we improve infinite scroll experiences?

Is this the end?

New Pinterest, Twitter, Facebook

UX: Communicate.

I remember I saw that post...

...on page 7.

...last week.

...in February.

I'm not going to scroll back for two months.

Twitter, Pinterest, Facebook

Why can't we do both?

Facebook demonstrates that we can have
infinite scroll + "pagination" navigation.

Even better: integrate with the History API.

Pagination itself is a huge topic.

• Don't have to paginate by page!
• Reverse page numbering = real permalinks!
• Prediction: "View Unread" / "View Unseen" will soon be hugely popular!

This presentation is about more than
Infinite Scroll.

I <3 JavaScript.

JavaScript UI widgets and rich client-side JavaScript
MVC applications are here to stay.

Remember:

We are making JavaScript web apps, viewed in a web browser.

What do web browsers got that
native apps ain't got?

• Back / Forward Buttons
• Refresh Button
• URL / Location Bar
• Links / Bookmarks / Social APIs
• Crash loses all state by default

Embrace the web.

Please don't break people's browsers.

Thanks!

What are your questions?

zachstronaut.com/posts/minnewebcon/2013

Zachary Johnson — @zacharyjohnson
Zachstronaut LLC — zachstronaut.com