Zerillian Engineering

Irradiated with cheeky programmer fervor!

AJAX Loading Done Right (and Wrong)

| Comments

Oh man. This really bothers me. Some of the time, it’s just not well-implemented. And when it is, I always appreciate it.

Note: For non-technical people, AJAX loading is a term for what browsers do when they load more content without needing to load another page. A good example is Facebook news feeds. I’ll use it interchangeably with terms such as dynamic loading or auto loading.

A lot of websites just love to keep streaming content into your browser, sometimes as you’re scrolling along. Done properly, this is a useful annoyance-relieving tool. When botched, AJAX loading is an obtuse pain in the ass. In this post, I’ll look into mostly good implementations to show you the reasons these work pretty well. Usually.

Let me provide a real-life analogy. Click/tap on any image in this article for a full-size version.

That’s an important notice about checkin times. Should probably read that. It’s just suction-cupped to the sliding doors. But I can’t quite read it from back here.

I could still go get up close and try to read it, but I tried and stood out of the way of the sensors and the doors closed again. This is basically no different from an improper implementation of dynamic content loading in social sites. So this is what I think of all that.

Firstly, you’re in trouble if you think people always want to see more. I think it can be more intuitive. Assume people want to see less and that they will ask for more. Quick case study: Vimeo.

When you log in to Vimeo, you’ll see a feed of videos added to the channels you follow in a nice little list there. It shows about ten items to start with. At the bottom, there’s a link that says “Load more videos”. Once you’ve clicked that, it turns on AJAX loading of more entries. Toggling auto loading AND limiting the information inflow? Atta boy.

"Toggling auto loading AND limiting the information inflow? Atta boy."

GOOD JOB, VIMEO.

Try being conservative. I’ve heard a lot of complaints about these loading methods taking up too much space, but I don’t think anyone’s ever complained about not being flooded with information. Give us the choice, please.

Sometimes, you can’t stop it. There’s no choice. You have to keep scrolling forever, until you run out of things to scroll by. Or your fingers fall off, or the friction on your scroll wheel makes it catch fire. Case Study: Facebook.

Facebook will always show you more. There are some handy links at the bottom of Facebook pages (like the developer links or the Help and Privacy links), but it’s unlikely that you’d ever see them for more than a split second. The feed is pushing interface elements out of the way. That’s a tad annoying. I mean, why even put them down there?

"AJAX loading is pushing interface elements out of the way. That's a tad annoying."

CLOSE BUT NO CIGAR, FACEBOOK.

I’ve got one more positive example of sites that keep adding to pages: Myspace. The New Myspace features a radically reconstructed design, with one of the slickest web app UIs I have ever seen. I’m serious, I have never been remotely interested in Myspace until they unveiled the new design. My praise for it is worthy of another post, however.

The horizontal layout of the new Myspace enables nicer persistent navigation elements than your standard sticky nav bars. While scrolling horizontally through social feeds, more items are loaded on the right, where there are no controls or even optionally accessible elements to shove out of the way. Myspace consolidated their important interface element in places that were always visible. Scroll as much as you like, that navigation box isn’t going anywhere. It always floats above other content and remains on the left.

"Scroll as much as you like, that navigation box isn't going anywhere."

WAY TO BREAK THE MOLD, MYSPACE.

To be fair, Facebook has been sticking their blue nav bar to the top for a long time. That does help navigate, but with less granularity and flexibility than Myspace’s collapsable vertical navigation lists.

Lemme bring up another common AJAX loading annoyance, that being live streams of things. It’s sort of the inverted version of what I’ve been describing so far. Streaming updates are big in the social world, and pretty much every social site has them. But Tiwtter tightened the screws a bit for the sake of convenience and efficiency. Twitter just has the little “(n) new Tweets” button that you get to push to refresh your feed. I thought this should be common practice, but it has added purpose for Twitter users. If you’re following a lot of people, you might get a Tweet every five seconds. Hardly enough time to read them all before they get pushed out of the way by newer ones.

So instead you get to read them at your leisure, load more, and read that new chunk of them. MUCH BETTER.

Twitter gets it right because it helps wrangle the kind of data they present. Streams of tweets should be well-controlled. Adding AJAX loading without thought can cause frustrations if you deal with data that’s always trickling in. Like Twitter.

"Control the flow and know how much new information is about to hit."

SMART MOVE, TWITTER.

I’ll do one more case study for a good implementation of streaming updates: Koding, a hip new social coding and developer network. Koding has an activity feed, a prominent one, where it encourages people to share code and ask questions, among other things. When you’ve got your scroll positioned at the very top a little Live Update toggle turns on. This means that as long as you’re right at the top of the list, it will auto-load updates. This is good. Scrolling down even a little, however, will toggle the feature off, so no more updates stream in live and shuffle around something you may be skimming over. It allows you to control the flow of data, and that data is what we want to consume at our own pace, right?

"Being able to toggle AJAX loading helps a lot. Please do this more."

GOOD ON YA, KODING.

By the way, I’m working on a write-up of Koding, so that’ll give you a better idea of how everything fits together.

How about some bad reasons to use it? It certainly depends on the nature of the content you provide. Social sites love it because data is always coming in, and they can’t be certain of how much you’ve seen and what you’ve missed. So why not let you keep rolling until you’ve had your fill? Sensible enough. I picked at Facebook because they still had a footer. Seriously, they are mutually exclusive. Why even have something that just gets bumped all the time?

It also puts a burden on the client. The browser is in charge of managing everything, and if you leave Facebook open for a long time, you might find your browser getting a bit sluggish. It adds a lot of complexity for sometimes marginal gain.

If you’re not careful, it can also break the flow of a reader’s traversal through information. Most AJAX-loading sites don’t pick up where you left off if you click a link and go back. If your site has you jumping in and out of links, like on an infinite-scrolling tumblr blog, it can break. You get capped at the initial end of the page as the browser tries to scroll back down to where you were.

Auto-loading blog posts is typically bad practice, so I think.

Another worry is making your content grey. Generic and blended together. Nondistinct. Pinterest suffers this, and so did Etsy for a while (skip to slide 25.) Infinite scrolling establishes momentum, meaning users get rolling and look at each piece of data for a fraction of a second. It’s hard to tell stuff apart. It’s possible to fly by thousands of items and really only see a handful. It encourages haste, and that leads to minimal engagement.

If your implementation of infinite scrolling pushes away interface elements, fuses elements into a blur of unremarkability, or breaks a clean traversal of references and links, you might need to re-think it. Essentially, support your data and the behavior of your users.

One last case I’ll mention: Google.

Google’s search results don’t auto-load. Web results, anyway. They’re still paginated the old-fashioned way. Why? Because AJAX loading is a feature that only a minuscule proportion of Googlers would ever need. How often does the proper result of a search come up on anything but the first page? For me, almost never. Google is confident enough to assume that you’ll almost never need to zip through long lists of results.

By contrast, users of DuckDuckGo see that search results are auto-loaded as you scroll. This is because, while DDG is pretty good, its results tend to be less relevant than Google. People need to scroll more, so the site supports that behavior.

C’mon, guys. It’s not actually that hard. Make the flow of data support the behavior of your users and the type of content you deliver. Sometimes, just don’t use it. Why is pagination so bad? What ever happened to getting to pick the number of results per page? Really, what was so terrible about that? I think we just got a little caught up with the ability to avoid page reloads.

"Was pagination so terrible?"

Seriously. Is this actually such a horrible thing? I doubt it.

Comments