UsabilityPost

When Infinite Scroll Doesn't Work

2013-01-07

Dan Nguyen has an interesting writeup of Dan McKinley’s talk about why the implementation of infinite scroll at Etsy didn’t work. Essentially what happened was that Etsy had spent time implementing an infinite scroll interface (i.e. a list of results that automatically keeps loading more items as you scroll to the bottom of the list) before first testing their assumptions that more search results at a faster rate would boost user engagement. They found that the new interface just didn’t perform. Although the amount of purchases stayed roughly the same, user engagement has gone down — now people weren’t using the search so much.

I don’t think speed and volume are at fault here. I think the reason it didn’t work was because the kind of interaction the user has with the data is much more suited to a paginated interface than an infinite scroll. In the case of something like Etsy, the user is searching for something in particular within the list of results. In the case of something like Twitter, the user is scanning and consuming the flow of information. In the latter case, infinite scroll makes sense because the user is essentially reading or scanning down the list of tweets until they get bored. In the former case the user isn’t just linearly consuming the data, they’re mapping the information in their mind, trying to remember the items they like or think are worth researching further.

What this means is that people will want to go back to the list of search results to check out the items they’ve just seen, comparing them to what else they’ve discovered somewhere else down the list. Having a paginated interface lets the user keep a mental location of the item. They may not necessarily know the exact page number, but they will remember roughly what it was, and the paginated links will let them get there easier. Not only does the infinite scroll break this dynamic, it also makes it difficult to move up and down the list, especially when you return to the page at another time and find yourself back at the top, being forced to scroll down the list once again and wait for the results to load. In this way the infinite scroll interface is actually slower than the paginated one.

McKinley’s original assumptions — that users wanted more search results faster — were actually right, and their tests on each of these metrics individually have verified this (albeit with insignificant gains). A paginated interface that loaded more results faster would have worked a little better than what they had before. What they did wrong was use a new interface pattern in the wrong context, thereby upsetting other browsing mechanisms that people have relied on when using their site. An infinite scroll works well for something like Twitter where you’re linearly consuming an endlessly flowing stream of data without looking for anything in particular, but for search results pages where people are looking for a specific item and where the location of all the items the user has viewed matter, the paginated interface wins out.

Watching Them Struggle

2012-12-06

You’ve probably watched somebody who is not technically savvy trying to operate an interface new to them, likely with little success. Maybe that interface was yours. You’ve spent countless hours cutting that thing down to the basics, refining the copy and making everything crystal clear, and yet, you watch with bewilderment as the user before you struggles and stumbles across the screen, doing everything possible to go in circles around the interface element they actually need, which to you seems blindingly obvious.

As I read through Robert Greene’s new book, Mastery, a realization struck me. In the book, Greene explores the process of becoming a master at a particular skill or profession, which, roughly summarized, involves practicing it for so long that everything involved becomes internalized and cross-linked in your brain, which then allows you to use this experience intuitively, rather than consciously. The master feels what’s right even before they have the words to express it.

This is very much what happens to someone we call computer savvy. Having used a computer for a very long time, all the processes involved in operating it have been internalized, have been learned and transferred into the subconscious mind. Presented with a new device or a new user interface, that experience is tapped into intuitively, which allows that person to make sense of the new interface almost instantly, without conscious thought.

Using a computer or browsing the Web is not considered a skill in the same way as playing a piano or painting is. This frames it differently to all the other professional “skills” and makes it seem like no big deal to those who do it on a regular basis. We talk about merely using software, not operating it. Overly technical software would fall into the skills category, but not the basic consumer apps or websites. Our familiarity with countless varieties of software and hardware makes us blind to just how much more we know and are used to. Since we’ve internalized all the little details and know everything intuitively, we don’t think about them. Indeed, we cannot think about them because just like tying a shoelace we don’t consciously think through the steps of the process, we go through it intuitively.

Of course, the fact that a technically savvy user might figure out a user interface faster is no revelation, what interests me is the extent to which we may be underestimating the effects of being familiar with a variety of user interfaces. We take for granted that we’ve spent years internalizing countless interfaces, learning their every nuance, pattern and variation, to the point that all this experience comes together as a coherent whole and used intuitively, without conscious thought. We take this for granted because we don’t consciously register that we know all of this. New interfaces just appear simple to us, self explanatory even.

All the myriad of tiny little details are there in our subconscious: all the countless varieties of buttons, tabs, links, windows, panes and so on, all wired together and ready to be called whenever we need to tap into this experience. We have a feel for all of that. We don’t know how much is there because unlike learning how to tie a shoelace, we never acquired this experience through a formal process — i.e. consciously noting that now you’re going to learn something — we’ve got it through daily use.

This is what makes the experience of watching somebody who isn’t technically savvy so strange and bewildering. The truth is that the interface that seems so simple is only so simple to us, to somebody with countless hours of experience of using such things. Our vantage point has changed so gradually that we never noticed any movement, and it has moved so far that we no longer remember where we began. Indeed, even consciously recognizing this fact doesn’t reveal the extent of the differences to us. Recognizing that we’re probably grossly underestimating our experience makes watching somebody struggle with a “simple” interface a lot less excruciating and a lot more sense.

Redesign Trend in Tech News Sites: Big, Responsive and Content Heavy

2012-12-05

There’s a new trend in the redesign of technology news sites, which has emerged with the move towards responsive designs. The new wave of redesigns sees the old blog format being transformed into a full-screen, app-like experience, with multiple columns, fixed position elements and a global navigation bar at the top of the page.

So let’s see some examples. Here is The Next Web:

Here’s Mashable:

And here’s ReadWrite:

Here are some of the shared attributes of these designs:

Responsive design taking up the whole or most of the screen
Wide, simplified navigation bar at the top of the page
Navigation bar drop down menus on mouse hover
Fixed sidebar columns, or columns that scroll independently
Big typography, especially for headlines
Most headlines coupled with images
Flat style, and flat, single color icons

There’s a lot to like. The new designs are responsive, meaning that they adapt to the device that you happen to be using to view them, showing more content on larger screens, and collapsing the columns one by one for smaller devices. On a smaller screen the content is still there, it just gets moved down or gets put away in a drop down menu. The typography centered style is also a good change, pacifying the aesthetic eagerness of the early Web with the restrained elegance of print.

But there are also things about this trend that I dislike. I don’t mean the concept of responsive websites, which is good, but rather the certain characteristics of the implementation that we see in the examples above.

My main issue with these redesigns is that instead of building the site like a physical page, they treat it like a canvas for an app. Scrolling the page up or down does not guarantee that the whole of the page will move. Some columns are fixed and will remain where they are no matter how far you scroll. Some columns scroll independently, forcing you to move your cursor over them to scroll the content within them. It feels like the solid page that we’re all used to has been shattered into little pieces that may or may not behave the way you think they will.

There are other annoyances. For whatever reason, scrolling is often laggy, which is made much worse on sites that load content as you scroll down. Most of these sites also choose to show up pop up menus on mouse hover, which are oftentimes fairly large. Should you accidentally move your mouse over the area you’ll see a portion of the page blocked by a menu item you never wanted to see. To fix the situation you’re forced to move the cursor outside the menu, all the while making sure you don’t accidentally move it over something else that will generate another pop up. It’s just plain annoying.

While I like the style direction, I think these sites are trying a little too hard to work like apps, and in doing so, they surrender the strengths of the plain website, namely: simple, responsive navigation mechanisms. Simple sites don’t lag and don’t have any ambiguous navigation elements. They behave like a page, which, while being a constraint, is not necessarily a bad thing. The new wave of responsive redesigns in tech news sites certainly look good with their nice typography and healthy use of whitespace, but they feel heavy, they don’t feel right in the browser. They look more like apps but the speed and responsiveness of a native app just isn’t there.

What do you think? Do you like these new designs, or do you agree with me that they’re trying a little too hard to break away from the physical page metaphor? Leave your comment below.

Just Don't Make It Annoying

2012-11-27

I find that whenever I’m designing a user interface, the one safe rule to follow is simply this: just don’t make it annoying. This might sound banal, but there are often cases where blindly following best practices and design theory slowly pulls you off the right track, so that you end up designing something for the sake of a good design — whatever that is — rather than for actual use.

As an analogy, consider the organization of things on your desk. Cleaning it up, organizing things and putting them away might seem like a good idea if you want to achieve a productive working environment, but this doesn’t always work. Sometimes a messy desk is actually what you want because everything you need is available for your use right away. A disorganized desk might look messy, but if its user knows what all the things are and where to look for what they want, then the jumble of things is actually a setup that works for them. The more engaged you are in your work, the more things you need around you to sustain it.

As an extreme example, take a look at the Bloomberg Terminal, a computer system that gives finance professionals real-time access to market data. At first glance, it looks like a terrible mess. But this chaos of information is much like a disorganized desk which makes every item available to the user straight away, so that when they know what they want and where to find it, they can get it without any user interface friction. It’s an ugly thing made for speed and utility rather than beauty.

The design consulting firm, IDEO, proposed a redesign of the interface in 2007, but were rejected. When the user is familiar with a user interface like this, they won’t want it changed. There’s simply nothing to be gained by it. Yes, the learning curve can be improved, but existing users don’t care, and redesigning it will simply introduce more work for them. I’m sure the Bloomberg Terminal can be made better, but the current solution, while far from beautiful, actually works. Traders just want the information, with as little interface friction in-between, and this is exactly what an interface like this gives them.

A good interface works for the user by getting out of their way, not by inviting more interaction. Improvements like the organization and putting away of interface elements in their own groups and menus only matters when it’s actually facilitating something useful, i.e. improving the learning curve or making a mass of information more manageable. Organization for the sake of organization doesn’t ensure a good interface, just as any other design principle applied blindly for no other reason other than being considered a best practice. When in doubt, just use your own interface, and when you experience interface friction, when the interface becomes annoying by getting in the way of what you wanted: get rid of it by replacing it with what you need.

The Gleam of a Better Publishing Model

2012-11-26

Craig Mod wrote a great article about what he calls subcompact publishing — a term that draws parallels with the 1967 Honda subcompact car. His premise is that the publishing industry has translated too many details from the physical medium to their new digital offerings, details that do more to bloat and confuse their product than create a publication that is perfectly suited to its new habitat. His suggestion is to go lean, to drop the idea of packaging a lot of articles into big issues that come out every month, and instead release a few articles, more often and using a much lighter format.

By dropping in weight, the user interface also gains in usability because every issue is only a few articles in length, which can all be listed on a single screen without the need to flip through pages, scroll or zoom around. Additionally, Craig Mod advocates using established technologies like HTML/CSS to mark up and style the content, which ensures that the file sizes are light and the content can also be published onto the Web. Craig dives into a lot more detail in his article, and I definitely recommend reading it in full.

A great example of this lean publishing approach is Marco Arment’s new publication for iOS called The Magazine, which publishes four articles every two weeks. Marco has initially launched this project as an experiment, but it has proven profitable almost immediately after launch. The lean approach, it seems, can work.

But are apps the right solution? David Heinemeier Hansson wrote a post about the stupidity of packaging every new magazine into its own app, reinventing the layout and navigation engine in the process. Such magazine apps are often bloated, slow and buggy, delivering poor user experiences. David writes:

It’s like every magazine is reinventing HTML and programming their own browser for it. Of course that’s going to end badly!

The solution when it hurts to hit yourself is to stop hitting yourself. Custom app development to publish a magazine is just nonsense.

I agree. I said the same thing a while back — the Web is the perfect distribution channel for publishers aiming to reach consumers through mobile devices and tablets. We’ve been developing Web technologies and layout engines for a very long time, and we have an army of designers and developers able to work with them. Today’s browsers are much faster and much more capable than ever before, and our mobile devices are almost always connected to the Internet, either by WiFi or through a mobile network. The lean magazine approach can work, but it need not be an app.

There is one missing piece however, and it is payment processing. On iOS, Apple has your credit card on file. Should you want to subscribe to a magazine through Newsstand, the digital publication marketplace on iOS, you can do so just by filling out your password. You’ll be paying Apple, not the publisher (who will in turn receive their payment from Apple), which increases trust, especially for new publications. They also provide an option for trial periods, meaning that people can subscribe to a magazine for free, and then automatically activate the subscription when the trial period runs out. This removes the barrier for trying out and subscribing to a digital publication on an iOS device.

No such thing exists on the Web, or at least not anywhere close this level of simplicity. What’s needed is a marketplace much like Apple’s Newsstand, but for the Web. The company running it would have your credit card on file, allowing purchases to be made simply by filling out a password. Having customer’s payment information also allows for models other than regular subscription, for example, the purchase of individual issues or even individual articles. Payment processing isn’t difficult, what’s difficult is to get to that same level of frictionless purchasing that Apple have built on the iOS.

Effects of Typography on Reader Mood and Productivity

2012-11-23

In their paper titled The Aesthetics of Reading, Kevin Larson and Rosalind Picard present their findings on the effects of typography on reader mood and cognitive performance. They conducted two studies, each involving 20 people. The participants were divided into two groups of 10 and were given 20 minutes to read a specially typeset issue of The New Yorker on a tablet device. One of the groups got a badly typeset version (using Courier, with spaced out words), the other a properly typeset one.

Three metrics were taken:

Participants were interrupted during the experiment and asked to estimate how much time they thought has passed since the experiment began. People who find their task enjoyable and are in a positive mood experience a faster flow of time and so are likely to underestimate the amount of time that has passed.
Participants were asked to rate their experience of the text using a questionnaire.
Participants were asked to perform a cognitive task after their reading. A different task was used in each of the two studies. The first involved the candle problem, in which you are asked to attach a candle to the wall using a box of thumbtacks in a way that the wax won’t drip down to the table below (the solution is to use the empty box as the stand). The second task involved showing the participant groups of three words and asking them to provide another word that will create a common compound with each of the three (e.g. ‘ice’ for the three words: ‘water’, ‘skate’, and ‘cream’).

Here’s what the researchers found.

1. Time flies when you’re reading beautiful text

The researchers found significant differences in perceived time spent reading. Those reading the properly typeset version of the magazine consistently underestimated the amount of time that has elapsed before they were interrupted. In the first study, the bad typography group underestimated the time by 24 seconds on average. On the other hand, the good typography group underestimated it by 3 minutes and 18 seconds on average.

The second study showed similar results, with the bad typography group underestimating the time by 2 minutes and 21 seconds on average, and the good typography group underestimating it by 5 minutes and 12 seconds on average. The second study increased the time before interruption, but the difference is significant and consistent.

2. What they say may not reflect how they feel

The questionnaire proved less reliable. The first study showed little differences. The second study, however, turned out in favor of the good typography group. It’s not clear why the second group rated their experience of the text so differently from the first, but it is possible the changes in the content played a part.

3. Good typography boosts cognitive performance
— at least for some tasks

In the cognitive tasks, the results were mixed. In the candle task, 4 participants from the good typography group solved the task. None were able to do it from the bad typography group. The difference in performance in the second study was not enough to yield reliable conclusions, though the good typography group did perform better again.

Typography matters

The lesson here is twofold. First, good typography has a clear impact on the mood of the reader. People who are reading a well typeset page are more engaged in the experience and find that time flies by faster. Second, research has shown that positive mood improves creative problem solving¹, and since typography can be used to influence mood, it is possible that good typography also has direct effect on our productivity, at least in the sphere of certain creative tasks. Good typographic design then is not just a way to communicate the character of your text and strengthen reader engagement, it could boost their cognitive performance, too.

Isen, A.M., Daubman, K.A., Nowicki, G.P. (1987). Positive Affect facilitates creative problem solving. Journal of Personality and Social Psychology