Every user action has an associated cost, and the key to many sites’ conversion lies within minimizing this cost, whether it means minimizing “clicks” or simply requiring less from the user.

By and large, it comes down to efficiency and accomplishing a task in as painless of a way as possible. USAA’s Deposit@Mobile is a great example of how a company can improve customer experience & perception by simplifying the tedious process of depositing a check.

In my opinion, Endless Scroll is a technically simple idea that greatly reduces friction in every day activities.

Current Trends

Endless Scrolling has been discussed before, but has seen limited adoption despite Google Reader’s seamless implementation:

Seeing how many, many, many sites offer a constant stream of new content, pagination often interrupts the flow. Granted, many sites (Google) require paginated content to distinguish valuable content from less desirable.

User Experience

Besides streamlining the experience for the user, there are potential negatives to be mitigated:

• Any content below main content may be “bumped” for newer content. The footer may never be accessible if it lies below new content.
• Context of content (such as the date or event-related to content) may be lost.
• Toggling this behavior would require user interaction, which defeats the purpose of automating the “Next Page” event entirely.
• “Progressing” through content goes away entirely, as pagination clearly defines where the user is in terms of progress (”Page 23 of 61″).

Many of these potential problems have already been solved in Google Reader’s implementation by doing the following:

• “Frame” the content container so that main page components: header, navigation, footer, etc. are still accessible no matter how far the user scrolls.
• Clearly define the context of the content, such as the date, author, or category.
• Message the user on how much progress has been made: “23 of 467 Articles Loaded“.

Conclusion

For now, it seems Endless Scroll is best as an “opt-in” option for the user, whether by bookmarklet or other means. If the behavior of the user is almost always to continue on to more content then Endless Scroll can prove beneficial.

Resources

I recently posted a De-Pagify jQuery Plugin (demo) as an aid in implementing Endless Scroll.

See the article: Making a Case For Endless Scrolling.

You can find this plugin at http://plugins.jquery.com/project/de-pagify or view latest code & documentation is available at http://github.com/ericclemmons/de-pagify.

Demo

View Demo

Usage

Typical usage will follow the pattern:

jQuery(link).depagify(options);

Options

Where link matches the “Next Page” link and options can override any of the following:

• container: (defaults to body) Where content is appended and where remote content comes from

• filter: (defaults to null) Selector or function to filter remote content

• trigger: (defaults to 0.90) Float, integer, string or function to determine when to load remote content. The default is 0.90, which is 90%. You can use 167, for example, to load content when the user scrolls within 167px of the bottom of the page. Also, you can specify a selector (such as #footer) to load content when the #footer element scrolls into view. Finally, you can write your own function that returns true whenever you’d like load the next page’s content.

• request: Callback when content is being requested. Useful for cleaning up the page or providing UI feedback.

• success: Callback when content is appended. Useful for cleaning up new content or messaging the user.

• effect: (defaults to $(this).show()) Function to transition newly loaded content. (New content is wrapped by $('<div />).hide())

Recipes

Here are a couple popular, ready-to-go bookmarklets you can inject into everyday websites. Keep in mind you may need to either inject jQuery with a bookmarklet (link) and the De-pagify bookmarklet.

• Digg.com (source)
• FMyLife.com (source)

Examples

To play around with de-pagify, you should probably get the jQuerify Bookmarklet which will inject jQuery into the page.

Secondly, take advantage of the De-Pagify Bookmarklet

Example 1: FMyLife.com

First & foremost, we can simply enable de-pagify via:

jQuery('.pagination:last a:last').depagify({
    container: '#wrapper',
});

Simply put, .pagination:last a:last will grab the last anchor tag in the last .pagination element on the page. All new content will be pulled from the remote #wrapper element and appended to the current #wrapper element.

But let’s say we want to only load content when the footer comes into view, and we’d like a smoother animation instead of showing results immediately:

jQuery('.pagination:last a:last').depagify({
    trigger: '#footer',
    container: '#wrapper',
    effect: function() {
        jQuery(this).fadeIn('slow');
    }
});

When new content is inserted in the page, it is wrapped in a plain <div> to simplify DOM manipulation. This <div> is bound to this in the effect callback.

So, we have a pretty nice, smooth experience now. However, say you want to remove the page lists (1, 2, 3, Next, Prev, etc.) and the ads to ensure a more consistent experience:

jQuery('.pagination:last a:last').depagify({
    trigger: '#footer',
    container: '#wrapper',
    effect: function() {
        jQuery(this).fadeIn('slow');
    },
    request: function(options) {
        jQuery('.pagination', options.container).remove();
    },
    success: function(event, options) {
        jQuery('#ad_leaderboard', options.container).remove();
    }
});

The code is self-explanatory. When we send off the request, we remove the .pagination element, as it is not needed anymore. Similarly, when the new content is inserted all ads are removed. Both events could take place entirely in the success callback, but for this example I separated the two.

Conclusion

If you can help in any way, please fork this project or provide feedback.

Demo

View Source

Introduction

Designing for code-reuse is one of the most important acquired skills for a developer. Unfortunately, Javascript widgets tend to contain large amounts of embedded markup and styles. I blame this primarily on lackluster development & deployment of client-side code, as well as the fact that very few Javascript libraries are truly enterprise-ready .

In this tutorial, you’ll see some best-practices found in the Dojo Toolkit for name-spacing widgets and structuring resources.

1 Requirements

We want a growl widget that:

• Will look good
• Will stack with other notifications
• Will disappear after a period of time
• Will close immediately of the user clicks it
• Will not disappear if the user hovers over it

2 Marking it up

The markup needed for the widget alone is simplistic; however, since we’re using dojo templating, we need to add in just a little bit more code:

First, we’re tying mouse events onMouseOver, onMouseOut and onClick to the widget functions _hoverOver, _hoverOut and close, respectively.

Second, we’re replacing our placeholder text with a template tag which will be replaced with the variable message (more on this later).

3 Styling the markup

Since the markup is separate from the presentation, modifying the look-and-feel is a cinch.

4 Scripting the widget

5 Calling the widget

Include Dojo and the script in your page:

<script src="/scripts/dojo/dojo.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" charset="utf-8">
    // Tell dojo where to find the "demo" namespace
    dojo.registerModulePath("demo", "/scripts/demo");

    // Require the notification script for this page
    dojo.require("demo.ui.Error");
</script>

Now simply instantiate the class:

new demo.ui.Error({
    message: "Howdy there!"
});

6 Resources

Here’s everything you need to get started:

• Dojo Toolkit
• demo.error.ui.Error.js (download)
• demo.error.ui.templates.Error.html (download)
• demo.error.ui.resources.Error.css (download)
• Example (download)

One thing I’ve learned is that most good developers/designers strive for a streamlined, cohesive work-flow.

Being a fan of TextMate, I feel more comfortable composing blog posts in my native environment.

If you’re in the same boat, try out the Blogging TextMate Bundle which supports most major blogging platforms via XML-RPC.

I you have errors fetching blog posts then be sure to remove any posts that are marked as Draft. Alternatively, you can simply include Status: draft at the top of your template in TextMate.