Testing for the user’s experience

Testing your product isn’t only about user interface – where a user gets confused, and so on. It’s also about uncovering niggly little problems like this:

They aren’t the only ones. Here’s Amazon, which has free super-saver delivery in the US for orders over $25:

This is an opportunity for an online store to delight users by saying, “You haven’t quite met the minimum spend for free delivery, but what the hell – we’ll give it to you anyway.” The sale goes through, users were pleased that you were nice to them, and they’re more inclined to come back next time.

How to use pagination on your website

Splitting content up into pages is pretty common on the web – you might see it in articles, comments, search results, or other lists of data. Want to use pagination? Let’s take a look at the options available to you.

Option one: links to new page

Having separate web pages for each page of content is original flavour.

  • Pros: Gives you N pageviews instead on one (if you’re worried about that metric), works on non-JS browsers
  • Cons: Slow, as a whole new pageload is required

Here’s an example from Tom’s Hardware. This shows how many pages exist, and also what’s on each (so you can just skip to the conclusions page, for example.)

Option two: one page, AJAX changes the view

Here, all of the content is loaded in the initial pageview, but the pagination buttons switch what’s displayed to the user.

  • Pros: Faster than a new pageview
  • Cons: More complex to code (if you’re rolling your own)

Here’s an example from YouTube, but you’ll also find this all over the web on most large sites. Start watching the video, and click the page numbers at the bottom to get more comments. You don’t get another pageload – not only would that be slow, it would interrupt the 80s goodness you’re hearing.

Comments on YouTube

When designing these, there’s a problem. If your list of stuff is kinda short – great. But if you have a long list, you scroll down to the bottom, click the page 2 button … and you’re at the bottom of the second page, not the top. To put it another way, you’re reading item 1, item 2 … item 10, then click Page 2, and instead of looking at item 11, you’re looking at item 20.

There are some solutions to this – Disqus, which powers sites like Engadget, collapses the whole comments section and re-expands it so you’re looking at the top. Steam does some batshit-crazy scrolling of the page and list to get you back to the top.

Option three: Don’t use pagination

If you’re feeling bold, you can just let the whole page load with every list item.

  • Pros: Easy to code, easy to understand
  • Cons: Unworkably large pageloads for very long lists (e.g. user generated comments)

A hybrid solution is using a MORE link that appends the next page to the current one. The nice part is that the list now goes from item 1 to item 10, then item 11 to item 20, and so on – the list order is easy to interpret.

  • Pros: Easy to understand
  • Cons: Harder to create references to data (e.g. item X is on page N is now an invalid reference), your list can look weirdly long compared to the rest of the page

Quora pagination

You can see examples of this on Quora and other sites.

Which one should I use?

First – if you don’t need pagination, don’t use it. Nothing is as easy as having the whole page in front of you. Consider what your pageload times will be without it, both on desktop and mobile. If it’s too heavy – either right now, or in the future when a thousand people have created comments – consider the hybrid solution. Can you append items to the current list? Remember that from the user’s point of view, they are reading down a page of text – make it as easy as possible for them to continue that reading.

Making interface animation useful

Many interfaces on the web contain some kind of animation. We’ve had Flash for a long time, and with jQuery and HTML5 it’s become even easier to add animation.

Should we do it?

Just because we can do a thing, it does not necessarily follow that we must do that thing.

People hold these two views about interface animations:

  1. Take the animations off! They are slow and I want to concentrate on function – this crap just gets in the way!
  2. I will put in animations because I can. L33t

There is a third way, which is this – make your animations useful. I’ll explain by showing an example of a site that lights the way, and a site that ballsed it up.

This site lights the way

bandize.com

Behold, Bandize.

As you click through the navigation links – Show / Tours, Accounting, Contacts and so on – the content in the lower box sweeps linearly. If you go from link 1 to link 3, you see the content from link 2 sweeping by quickly. The list of links is your map, and the content box below is your zoom into that map.

The animations directly describe how your control is related to what you’re seeing, and that’s good.

This site ballsed it up

widgetbox.com

Behold, widgetbox.

This is a really similar content discovery style – a set of links (the four grey panels to the right) that control a panel (content to the left).

But this time, there are a few errors.

  • Firstly, path from navigation links to content doesn’t match the animations. The content animation sweeps linearly along to the right, same as Bandize – but the navigation links are actually arranged in a zigzag. Try it – it’s confusing as heck.
  • The grey panels activate on hover rather than click, which makes it too easy to navigate by mistake rather than intention.
  • There are two more ways of navigating through content (I circled these in orange above). One, a play / pause control that’s almost invisible, and second, iPhone style dots (that actually do map correctly with the content animation – they’re in a line.) Both of these elements are clutter.

Conclusion

Using animations is easier than ever, but be careful. Don’t add them for their own sake – make sure they are helping the user understand what’s happening and why.