5 ways to test your website’s usability

The ultimate goal of usability tests is to obtain the necessary information which will give you the possibility to make an interface so simple and intuitive in use that people can work with it without thinking. People who navigate through your application shouldn’t be spending too much time figuring out the different functionalities of it.

In this article I show you how to discover the most prominent interface problems of your website by following five simple tips. Remember: getting to know the problem is only half the work, you still need to interpret the results, make the improvements and test again.

User testing

Don’t wait with conducting user tests ’till you’ve finished designing your website, you should already do these in the wireframe-stage (a non-graphical layout) of your design. That is exactly the reason why I’ve put this tip as number one on the list.
First of all, don’t be alarmed with the term of user testing. Normally it is very time consuming and it can take quite a lot of preparation but this post is all about the easy way.

Take 5 to 10 people, family, friends or neighbours and split them up into 3 groups: the low, intermediate and high experienced internet user. The reason is that these groups have different expectations of a website, its functionalities and looks and it is likely to find more problems.

You will need to conduct the test in two steps. The first step is to listen to what your users have to say while exploring your website, ask them to speak out load and don’t try to guide them in any way. Give people the time to understand what your website is all about.
Ask simple questions, let them explain why they pushed a button and if the result corresponded with the idea they had in mind. You will need to figure out how and why they are using the application.
For the second step you need to give your users some easy tasks. Let them sign up for your RSS-feed if you have one, navigate to a certain page and post a comment, … Have a look how the user is trying to solve your assignments. Does he or she take a long time to find what was asked for? Did he or she reached the result in a way you intended it to be found? Don’t forget to take notes!

Keep in mind that it is completely irrelevant how you see your own website. You know how it works because you’ve designed it, but first time users have no clue what it is all about. You need to acknowledge that the user is not like you and have different expectations of a website. By conducting some simple user-tests you can find most of the usability problems.

Jeff Sauro of Measuring Usability wrote a very interesting article why five users should be sufficient to find most of your interface problems. But remember: one user is better than none at all!

The Five Second Test

If you can’t find 5 to 10 people (or even one), you should consider the website of fivesecondtest. It allows you to create two different user tests by uploading a screenshot of your webpage. The first test is a memory test: users get 5 seconds to have a look at your screenshot and need to describe afterwards what they remembered. In the second test, the user can click on the screenshot for a period of 5 seconds and can give a descriptive text on each point.
The results are shown in a handy heatmap-like overview which can be downloaded for further analyses. It is free and you can share these tests with your twitter friends.

Install a heatmap system

Heatmap systems allow you to record the click-behaviour of your visitors. This is an extremely useful and powerful tool to understand how people are using your website. Although installing a heatmap can be done in a matter of seconds, gathering information and making the changes will take a bit longer. Have a look at my article about heatmaps for some easy to install and free (or very cheap) heatmap systems.

Greyscale screenshot

Use any graphics editing program in which you can change a coloured screenshot into greyscale. The general ongoing rule was: the higher the contrast, the better the readability.
There is however a huge BUT in this story. Have you ever seen a banner with such a high colourcontrast (for example yellow text on a black background), that it didn’t feel comfortable to read it? 456 Berea Street wrote an intresting article about this phenomenon. Although it doesn’t provide you with a final solution, I’ve found that the next two rules always worked for me: stay away from the extreme colour contrasts between the design elements (max. 3 base colours and one colour to emphasize something) and use the whitespace wisely (don’t fill every white pixel with a colour).

If you do not have photoshop or any other program installed, you can visit the website of checkmycolours. It will give you a very detailed overview of the colours you’ve used in your interface.

5% blur screenshot

This last tip is a very easy one and although the results can be seen as untrustworthy, it does make a small difference. Make a screenshot of your website, add a 5% blur in your favourite graphics editing program and have a look what is really visible and what not. The most important parts, such as call-to-action-buttons, headers, company name/logo etc, should be visible.
As said, this doesn’t look like a trustworthy tip, but you would be surprised how much you can learn from it. Some of the problems such as the colour contrast and the use of whitespace can be found this way.


What Message Are You Trying to Convey?

What is important to realize about this game is that you don’t have to be an artist to participate. The “I can’t draw” excuse does not apply. In fact, the more abstract your drawings are the more interesting (and hilarious) the game becomes.

Materials Needed

One great thing about Telepictionary is that it is a cheap activity, no fancy materials are needed. All you’ll need are some sheets of paper and a writing utensil per person (we usually use fine point Sharpies). I also encourage you to have some sort of writing surface for every player — a book, DVD case, table — whatever you have handy.

We usually use letter sized scrap paper cut into four smaller pieces. The size or quality of the paper doesn’t really matter, just as long as your paper is big enough for you to draw and write on. You can use index cards, backs of envelopes, sticky notes — whatever works.

You will need one stack of paper per person. This stack should consist of as many sheets as there are people. If there are seven people playing, then each person should have a stack of seven pieces of paper.

How to Play

Now that everyone has a stack of paper, a sharpie, and something to write on, you should configure your players in a formation that is conducive to passing. I suggest sitting in a circle or square. The following steps might get a bit confusing, but hang in there.

Step 1: Write a phrase

Each person writes down a phrase or a word on the first sheet of paper in their stack (this is the Telephone element). Try to make it something that most of the people in your group will understand and will be able to draw. Write….

Step 2: Pass the stack

After everyone has written something down, everyone is going to pass their ENTIRE stack of papers to the person on their left with their phrase face up on top of the stack. It might be hard to hand your whole stack over, but don’t worry, you’ll get it back.

While you’re letting go of your stack to the left, you’re being passed a new stack of papers from your right. It should have a phrase on the top sheet. Take a look at the phrase and move that sheet of paper to the back of the stack, phrase side up. Be sure to move the page to the back of the stack instead of flipping it over to use the other side of that sheet of paper. Flipping the page over tends to cause confusion in the later parts of the game.

Step 3: Sketch it out

Now that you’ve moved the phrase to the bottom of the stack, you should have a blank piece of paper on the top of the pile. Your task is to draw the phrase on this beautifully clean sheet of paper (this is the Pictionary side of the game). You should not be shy about your drawing skills. Think of it as the karaoke of drawing: sure, it is impressive if you are talented and you can showcase your skills, but it’s more entertaining for everyone else the less polished you are. Ask anyone who has played Telepictionary and they’ll tell you imperfect drawing is preferred. Draw…

Note: Pictionary rules apply: you may not use words, numbers or symbols in your depiction of the phrase.

 Step 4: Pass the stack, again

After everyone has tapped into their inner artist and has drawn the phrase in (im)perfect detail, everyone is going to again, pass their ENTIRE stack to the person to the left while receiving a new stack of paper from the right. This will become a familiar motion for you.

 Step 5: Put it into words

Now you have a new stack of paper with some sort of sketch on the top sheet. Take a good hard look at it and move that paper to the back of the pile, sketch side up. Your job now is to interpret the picture in words to the best of your ability on a new sheet. You may be as literal or as vague as you want. Write…

Note: You may not go back through the previous pages to figure out what the subject is supposed to be. That is cheating!

Step 6: Rinse and repeat

You are going to continue this cycle of interpretation through writing and drawing until you run out of new sheets of paper. When this happens, you will be surprised to see that your original stack of paper has come back to you.

If you are playing with an odd number of people, the stack you end up with should have the written interpretation of how your initial phrase has morphed (or mutated). If you are playing with an even number, you will end up with a stack with a drawing on top.

Draw….                              Write…. 

Note: Keep the pages in order. The game eventually ends with a story. If the pages are all jumbled, then the story doesn’t make sense. Always keep the pages moving to the bottom of the pile and the story will unfold as intended.

Step 7: Share out!

Pick a person to start sharing. Maybe you volunteer to go first. Take your stack, which should have your original phrase on top, and read it aloud and show the group. Then show them how the person to your left drew your phrase. There will be some laughs. Then, read how the next person put that sketch into words, there will be more laughing. Share how the next person drew the new, probably totally different phrase, and people will really start cracking up. Work your way through the entire stack. Your fellow players will start to howl. Then go ahead and have each person share their stack and see how the phrases and drawings evolved from start to finish. This part will take a bit of time, but it is also the best part. You probably won’t remember the last time you laughed so hard.


A Few Tips

You will notice that the time needed to complete a round varies from person to person and round to round. I suggest creating a time limit for each round. Two minutes seems to work well for us, at least for the drawing phases. This helps move the game along while adding the element of pressure. The result is pure entertainment.

If you are short on time, and cutting paper into squares is not really an option, try using a stack of sticky notes. When you are done, you can stick them together to make a comic-strip effect to share your story.

Why is Telepictionary valuable to UX?

What you will find after playing this game is that there are a few lessons that can be applied to your projects:

  • Messages are easy to distort if you are not careful
  • Clear communication is very important
  • Don’t underestimate how simple, iconographic visuals are instantly comprehensible
  • If visuals are not done well, they can be misinterpreted very easily

My colleague, Andrew Crow, does a modified version of this game. Instead of using stacks of paper, he starts with a wireframe of an interaction. Then, as the wireframe is passed around, the person who recieves the visual has to describe the interaction, its purpose and use. The next person redraws, and so on.

He says, “The point of this exercise is to show how good annotation and accurate illustrations are important when working with multiple people on your team. It is a great workshop starter because it gets people thinking about the problems and allows them to express them in the beginning of the meeting. That helps clear their minds so that they can concentrate on the workshop and not worry about the idea that they have in their head.”


The Art of Activating Slacktivism

Today’s guest post comes to us from Dan Morrison, Founder and CEO of Citizen Effect who is driven by the idea that anyone can make a real and significant impact in the world. Citizen Effect provides everyday citizens the tools and networks they need to work directly with communities in need around the world.
I love the word “slacktivism.” It is a classic oxymoron. The word conjures up the image of a male college student (sorry guys) sitting on his couch playing Grand Theft Auto and texting “90999” to support Haiti Relief in the five seconds between games.
And that is a great thing. When I was in college, the college quad was the realm of the activist who wanted to save the world. The dorm room was the realm of the slacker who could care less. Technology has now allowed slackers with a conscience to get involved in the causes they believe in but are too lazy to get up off the couch and support.
Slacktivists are an entirely new market segment that we, as cause marketers, are all salivating over, because so many slacktivists are so willing to procrastinate by picking up their mobile phone or going online to give and spread the word about our cause. Slacktivists are the definition of the long tail and cause marketers are going to bed every night trying to dream up schemes about how to get 1 million slacktivists to text them $10. Unfortunately, for most, that is never going to happen.
But I don’t blame the slacktivists – they are who they are, and are giving in a way that is comfortable to them. I blame marketers, like myself, who scheme about how to
change slacktivists into the fundraising juggernaut of the 21st century, rather than focusing on giving them what they want – an easy, effortless way to give and get on with their lives.
Slacktivism emerged because social media tools gave slackers with a heart an opportunity to get involved on their own terms. It is a mistake to think that slacktivists are just lazy. Some are too busy or uncomfortable getting involved with a cause in a public manner. Texting, tweeting and social media gave them the ability to give during the limited time they had or provided the social cover they needed to get involved. So I think we should ask not what the slacktivist can do for us, but what we can do for the slacktivist.
For the slacktivists that is more slacker than activist, we have to give them more easy ways to give. Texting for Haiti was simple and you can expect organizations, big and small, to leverage text-to-give programs at the next fundraiser you attend (check out Causecast’s mobile text2give program). And suggestion to the Greenpeace volunteers lining the streets of DC – ditch the long schpeel and just ask people to text you $10 to save the planet. And next time there is a global catastrophe, let’s make it even easier – “Tweet 90999.” The more tools we can develop to integrate giving into our daily lives, the more slacktivists will give.
But I cannot resist the temptation that there are slacktivists that are activists just needing the right excuse to get involved. They may not be many, but are a tantalizing segment because converting one slacktivist that texted $10 to an activist that raises $5,000 is well worth the investment. But how do we move from mobile and online giving to offline doing?
At the threat of stating the obvious, give slacktivists the same social media tools you use to entice them to give. Nonprofits spend too much time trying to figure out how to use social media tools to entice new donors to give them $10, when they should be figuring out how to empower their existing donors to leverage social media tools to raise money for them. It is the classic “don’t ask a man to give $10; teach him to fundraise $100” scenario. Because asking ten people to raise $10 from ten people ($1,000) is much more efficient than ask 10 people to give you $10 ($100). You win even if only two people achieve their goal ($200).
We can also learn a lesson from why texting 90999 worked for Haiti – it was easy, new and fun. People hate raising money – it is as stressful as moving and getting divorced. But if you give someone the control to choose their own project and empower them to fundraise while doing something they love, you can unlock the activist within. At Citizen Effect we have had people of all ages that never raised money before raise thousands of dollars with chili-fests, yoga workshops, cross-country bike rides, swim-a-thons, and simple online campaigns. How? By providing them a platform to market, promote and fundraise for the cause of their choice. And most importantly, allowing them to leverage their true social network – their trusted group of friends, family, and co-workers.
So what do we do with the slacktivist? For most, we continue to cater to their need for fast, easy ways to give. And for those few with the activist living within, empower them with the tools they need to engage their trusted social networks doing what they love to do. A Grand Theft Auto tournament for Haiti is a great place to start.


Scrolling and AttentionScrolling and Attention

Web users spend 80% of their time looking at information above the page fold. Although users do scroll, they allocate only 20% of their attention below the fold.

In Web design, there’s much confusion about the “page fold” concept and the importance of keeping the most salient information within a page’s initially viewable area. (That is, in fact, the definition: “above the fold” simply means “viewable without further action.”)

During the Web’s first years, users often didn’t scroll Web pages at all. They simply looked at the visible information and used it to determine whether to stay or leave. Thus, in usability studies during that period (1994–1996), sites often failed if they placed important information below the fold as most users didn’t see it.

This reluctance to scroll made sense at the time, because people were used to having computers show all their choices. Dialog boxes, CD-ROM multimedia shows, and HyperCard stacks all worked that way, and didn’t require scrolling. (Although users sometimes encountered scrolling text fields, they didn’t need scrolling to see the commands and options, and could thus make all decisions from the visible info.)

In 1997, however, I retracted the guideline to avoid scrolling pages because users had acclimated to scrolling on the Web. This was a rare case in which usability guidelines changed quickly. Typically, usability findings are stable across many years: 80% of Web usability guidelines from the 1990s are still in force.

Today, users will scroll. However, you shouldn’t ignore the fold and create endless pages for two reasons:

  • Long pages continue to be problematic because of users’ limited attention span. People prefer sites that get to the point and let them get things done quickly. Besides the basic reluctance to read more words, scrolling is extra work.
  • The real estate above the fold is more valuable than stuff below the fold for attracting and keeping users’ attention.

So, yes, you can put information below the fold rather than limit yourself to bite-sized pages.

In fact, if you have a long article, it’s better to present it as one scrolling canvas than to split it across multiple pageviews. Scrolling beats paging because it’s easier for users to simply keep going down the page than it is to decide whether or not to click through for the next page of a fragmented article. (Saying that scrolling is easier obviously assumes a design that follows the guidelines for scrollbars and such.)

But no, the fact that users scroll doesn’t free you from prioritizing and making sure that anything truly important remains above the fold.

Information foraging theory says that people decide whether to continue along a path (including scrolling path down a page) based on the current content’s information scent. In other words, users will scroll below the fold only if the information above it makes them believe the rest of the page will be valuable.

Eyetracking Data

Last month, we conducted a broad eyetracking study of user behavior across a wide variety of sites. To investigate whether the “fold” continues to be relevant, I analyzed parts of the study with a total of 57,453 fixations (instances when users look at something on a page, typically for less than half a second).

To avoid bias, I only analyzed data from 21 users accessing 541 different Web pages, even though our full study was much larger. To convince you that I didn’t limit the data for nefarious reasons, let me explain why I excluded some parts of the study from the present analysis.

Because our research goal was to generate fresh insights for our annual conference seminars, we targeted large parts of the study to test:

For each specialized topic, it’s perfectly valid to target a study and test sites that have features that we want to investigate. For example, to gain insight into carrousels for our navigation seminar, we should track users’ eyes as they encounter carrousels. To do this, we simply ask them to use a site that happens to include a carrousel, but we don’t draw their attention to that design element.

When we deliberately ask people to test sites that contain particular design elements, we can’t conclude that their behavior is representative for average sites. Sticking with the carrousel example, people might well scroll less often than normal if the carrousel successfully keeps their attention on the upper part of the page.

Our study also featured a component that let users go to any site they wanted, for the sake of our broad-ranging seminar on Fundamental Guidelines for Web Usability. These non-constrained tasks are the source of the data I’m analyzing here, because they tested the regular websites people use, as opposed to sites we picked for their design features.

Attention Focused at the Top

The following chart shows the distribution of user fixations along stripes that were 100 pixels tall. The bars represent total gaze time, as opposed to the number of fixations. (In other words, two fixations of 200 ms count the same as one fixation of 400 ms.)

Bar chart of the distribution of gaze duration for Web page areas 100 pixels tall, starting at the top

Even though 5% of users’ total time is spent past the 2,000-pixel mark, they tend to scan information that far from the top fairly superficially: some pages are very long (often 4,000+ pixels in my sample), and thus this 5% of user attention is spread very thinly.

In our study, user viewing time was distributed as follows:

  • Above the fold: 80.3%
  • Below the fold: 19.7%

We used an eyetracker with a resolution of 1,024 × 768 pixels. These days, many users have somewhat bigger screens, and we’ve conducted many (non-ET) usability studies with larger resolutions. Although using a bigger monitor wouldn’t change my conclusions, it would somewhat increase the percentage of user attention spent above the fold simply because more info would be available in the initially viewable space.

Scrolling Behaviors

Sometimes, users do read down an entire page. It does happen. Rarely.

More commonly, we see one of the two behaviors illustrated in the following gaze plots:

Gaze plots of viewing behaviors on three very long pages that all were scrolled almost to the bottom.
Gaze plots showing where three users looked while visiting pages during three different tasks (one test participant per page). Each blue dot represents one fixation, with bigger dots indicating longer viewing time.

On the left, the user scrolled very far down the page and suddenly came across an interesting item. This viewing pattern gives us many fixations that are deep below the fold. We often see this pattern for well-designed FAQs, though the best FAQs present the most frequently asked questions at the top (so that many users won’t need much scrolling).

The left gaze plot also illustrates another point: the last element in a list often attracts additional attention. The first few items are definitely the most important, but the final item gets more views than the one before it. (That’s also why the bar chart shows more attention to the 701–800 pixel area than to the 601–700 pixel area: the bottom of our study monitor fell within the former area.) The end of a list’s importance is further enhanced by the recency effect, which says that the last thing a person sees remains particularly salient in the mind. (We discuss the design implications of the recency and primacy effects in our seminar on The Human Mind and Usability.)

The two other gaze plots show more common scrolling behaviors: intense viewing of the top of the page, moderate viewing of the middle, and fairly superficial viewing of the bottom. (I picked examples where users scrolled more or less all the way down — often there’s no viewing of the bottom because users don’t scroll that far.)

It’s as if users arrive at a page with a certain amount of fuel in their tanks. As they “drive” down the page, they use up gas, and sooner or later they run dry. The amount of gas in the tank will vary, depending on each user’s inherent motivation and interest in each page’s specific topic. Also, the “gasoline” might evaporate or be topped up if content down the page is less or more relevant than the user expected.

In any case, user attention eventually peters out, and the further down the page users go, the less time they generally spend on each additional information unit.

The middle gaze plot shows a category page with 50 sofas:

  • The top 2 rows get about 5–10 fixations per sofa.
  • The next 4 rows get around 2–4 fixations per sofa.
  • The next 8 rows typically get 1 fixation per sofa.
  • The bottom 3 rows get 2 fixations for one sofa and no fixations for the remaining 7 sofas.

This is only a rough pattern, and users will deviate depending on the content. For example, the Cameon Loveseat and the Custom Hugo Loveseat both get 4 fixations despite being 2,750 pixels down the page. Presumably, the user found these two sofas particularly appealing.

Design Implications

The implications are clear: the material that’s the most important for the users’ goals or your business goals should be above the fold. Users do look below the fold, but not nearly as much as they look above the fold.

People will look very far down a page if (a) the layout encourages scanning, and (b) the initially viewable information makes them believe that it will be worth their time to scroll.

Finally, while placing the most important stuff on top, don’t forget to put a nice morsel at the very bottom.

Jakob Nielsen‘s Alertbox, March 22, 2010


Blasting the Myth of the Fold

The Above-the-Fold Myth

We are all well aware that web design is not an easy task. There are many variables to consider, some of them technical, some of them human. The technical considerations of designing for the web can (and do) change quite regularly, but the human variables change at a slower rate. Sometimes the human variables change at such a slow rate that we have a hard time believing that it happens.

This is happening right now in web design. There is an astonishing amount of disbelief that the users of web pages have learned to scroll and that they do so regularly. Holding on to this disbelief – this myth that users won’t scroll to see anything below the fold – is doing everyone a great disservice, most of all our users.
First, a definition: The word “fold” means a great many things, even within the discipline of design. The most common use of the term “fold” is perhaps used in reference to newspaper layout. Because of the physical dimensions of the printed page of a broadsheet newspaper, it is folded. The first page of a newspaper is where the “big” stories of the issue are because it is the best possible placement. Readers have to flip the paper over (or unfold it) to see what else is in the issue, therefore there is a chance that someone will miss it. In web design, the term “fold” means the line beyond which a user must scroll to see more contents of a page (if it exists) after the page displays within their browser. It is also referred to as a “scroll-line.”
Screen performance data and new research indicate that users will scroll to find information and items below the fold. There are established design best practices to ensure that users recognize when a fold exists and that content extends below it1. Yet during requirements gathering for design projects designers are inundated with requests to cram as much information above the fold as possible, which complicates the information design. Why does the myth continue, when we have documented evidence that the fold really doesn’t matter in certain contexts?

Once upon a time, page-level vertical scrolling was not permitted on AOL. Articles, lists and other content that would have to scroll were presented in scrolling text fields or list boxes, which our users easily used. Our pages, which used proprietary technology, were designed to fit inside a client application, and the strictest of guidelines ensured that the application desktop itself did not scroll. The content pages floated in the center of the application interface and were too far removed from the scrollbar location for users to notice if a scrollbar appeared. Even if the page appeared to be cut off, as current best practices dictate, it proved to be such an unusual experience to our users that they assumed that the application was “broken.” We had to instill incredible discipline in all areas of the organization that produced these pages – content creation, design and development – to make sure our content fit on these little pages.

AOL client application with desktop scrollbar activated

AOL client application with desktop scrollbar activated

As AOL moved away from our proprietary screen technology to an open web experience, we enjoyed the luxury of designing longer (and wider) pages. Remaining sensitive to the issues of scrolling from our history, we developed and employed practices for designing around folds:

  • We chose as target screen resolutions those used by the majority of our users.
  • We identified where the fold would fall in different browsers, and noted the range of pixels that would be in the fold “zone.”
  • We made sure that images and text appeared “broken” or cut off at the fold for the majority of our users (based on common screen resolutions and browsers).
  • We kept the overall page height to no more than 3 screens.

But even given our new larger page sizes, we were still presented with long lists of items to be placed above the fold – lists impossible to accommodate. There were just too many things for the limited amount of vertical space.
For example, for advertising to be considered valuable and saleable, a certain percentage of it must appear above the 1024×768 fold. Branding must be above the fold. Navigation must be above the fold – or at least the beginning of the list of navigational choices. (If the list is well organized and displayed appropriately, scanning the list should help bring users down the page.) Big content (the primary content of the site) should begin above the fold. Some marketing folks believe that the actual number of data points and links above the fold is a strategic differentiator critical to business success. Considering the limited vertical real estate available and the desire for multiple ad units and functionality described above, an open design becomes impossible.

And why? Because people think users don’t scroll. Jakob Nielsen wrote about the growing acceptance and understanding of scrolling in 19972, yet 10 years later we are still hearing that users don’t scroll.
Research debunking this myth is starting to pop up, and a great example of this is the report available on ClickTale.com3. In it, the researchers used their proprietary tracking software to measure the activity of 120,000 pages. Their research gives data on the vertical height of the page and the point to which a user scrolls. In the study, they found that 76% of users scrolled and that a good portion of them scrolled all the way to the bottom, despite the height of the screen. Even the longest of web pages were scrolled to the bottom. One thing the study does not capture is how much time is spent at the bottom of the page, so the argument can be made that users might just scan it and not pay much attention to any content placed there.

This is where things get interesting.

I took a look at performance data for some AOL sites and found that items at the bottom of pages are being widely used. Perhaps the best example of this is the popular celebrity gossip website The most clicked on item on the TMZ homepage is the link at the very bottom of the page that takes users to the next page. Note that the TMZ homepage is often over 15000 pixels long – which supports the ClickTale research that scrolling behavior is independent of screen height. Users are so engaged in the content of this site that they are following it down the page until they get to the “next page” link.

Maybe it’s not fair to use a celebrity gossip site as an example. After all, we’re not all designing around such tantalizing guilty-pleasure content as the downfall of beautiful people. So, let’s look at some drier content.
For example, take AOL News Daily Pulse. You’ll notice the poll at the bottom of the page – the vote counts are well over 300,000 each. This means that not only did folks scroll over 2000 pixels to the bottom of the page, they actually took the time to answer a poll while they were there. Hundreds of thousands of people taking a poll at the bottom of a page can easily be called a success.

AOL News Daily Pulse with 10x7 fold line and vote count
AOL News Daily Pulse with 10×7 fold line and vote count

But, you may argue, these pages are both in blog format. Perhaps blogs encourage scrolling more than other types of pages. I’m not convinced, since blog format is of the “newest content on top” variety, but it may be true. However, looking at pages that are not in blog format, we see the same trend. On the AOL Money & Finance homepage, users find and use the modules for recent quotes and their personalized portfolios even when these modules are placed well beneath the 1024×768 fold.

Another example within AOL Money & Finance is a photo gallery entitled Top Tax Tips. Despite the fact that the gallery is almost 2500 pixels down the page, this gallery generates between 200,000 and 400,000 page views depending on promotion of the Taxes page.

It is clear that where a given item falls in relation to the fold is becoming less important. Users are scrolling to see what they want, and finding it. The key is the content – if it is compelling, users will follow where it leads.

When does the fold matter?

The most basic rule of thumb is that for every site the user should be able to understand what your site is about by the information presented to them above the fold. If they have to scroll to even discover what the site is, its success is unlikely.

Functionality that is essential to business strategy should remain (or at least begin) above the fold. For example, if your business success is dependent on users finding a particular thing (movie theaters, for example) then the widget to allow that action should certainly be above the fold.

Screen height and folds matter for applications, especially rapid-fire applications where users input variables and change the display of information. The input and output should be in very close proximity. Getting stock quotes is an example: a user may want to get four or five quotes in sequence, so it is imperative that the input field and the basic quote information display remain above the fold for each symbol entered. Imagine the frustration at having to scroll to find the input field for each quote you wanted.

Where IS the fold?

Here is perhaps the biggest problem of all. The design method of cutting-off images or text only works if you know where the fold is. There is a lot of information out there about how dispersed the location of fold line actually is. Again, a very clear picture of this problem is shown on ClickTale. In the same study of page scrolling, fold locations of viewed screens were captured, based on screen resolution and browser used. It’s a sad, sad thing, but the single highest concentration of fold location (at around 600 pixels) for users accounted for less than 10% of the distribution. This pixel-height corresponds with a screen resolution of 1024×768. Browser applications take away varying amounts of vertical real estate for their interfaces (toolbars, address fields, etc). Each browser has a slightly different size, so not all visitors running a resolution of 1024×768 will have a fold that appears in the same spot. In the ClickTale study, the three highest fold locations were 570, 590 and 600 pixels—apparently from different browsers running on 1024×768 screens. But the overall distribution of fold locations for the entire study was so varied that even these three sizes together only account for less than 26% of visits. What does all this mean? If you pick one pixel location on which to base the location of the fold when designing your screens, the best-case scenario is that you’ll get the fold line exactly right for only 10% of your visitors.

So what do we do now?

Stop worrying about the fold. Don’t throw your best practices out the window, but stop cramming stuff above a certain pixel point. You’re not helping anyone. Open up your designs and give your users some visual breathing room. If your content is compelling enough your users will read it to the end.

Advertisers currently want their ads above the fold, and it will be a while before that tide turns. But it’s very clear that the rest of the page can be just as valuable – perhaps more valuable – to contextual advertising. Personally, I’d want my ad to be right at the bottom of the TMZpage, forget the top.

The biggest lesson to be learned here is that if you use visual cues (such as cut-off images and text) and compelling content, users will scroll to see all of it. The next great frontier in web page design has to be bottom of the page. You’ve done your job and the user scrolled all the way to the bottom of the page because they were so engaged with your content. Now what? Is a footer really all we can offer them? If we know we’ve got them there, why not give them something to do next? Something contextual, a natural next step in your site, or something with which to interact (such as a poll) would be welcome and, most importantly, used.


1 Jared Spool UIE Brain Sparks, August 2, 2006:Utilizing the Cut-off Look to Encourage Users To Scroll

2 Jakob Nielsen’s Alertbox, December 1, 1997: Changes in Web Usability Since 1994

3 ClickTale’s Research Blog, December 23, 2006: Unfolding the Fold


ClickTale Scrolling Research Report V2.0 – Part 2: Visitor Attention and Web Page Exposure

In part 1 of our ClickTale Scrolling Report, we learned that visitors scroll in a relative way – relative position inside the page, not based on absolute position in terms of pixels. In other words, the same number of page viewers will tend to scroll halfway or three-quarters through a page, regardless of whether the page size is 5,000 pixels or 10,000 pixels. In part 2, we reveal more new findings: Read on to learn about the way visitors pay attention to content on your site and what areas on your site receive the most attention.

See the end of this posting for ideas on how to make all this info work for you.

Are Your Visitors Paying Attention?

Have you ever wondered how much attention your visitors pay to your website content? We all have, of course. But until recently, most of the evidence has been based on personal observation or random investigations rather than systematic scientific evaluation. To answer this question objectively, we have analyzed over 80,000 web page browsing sessions collected over a one month period.

We started by looking at what we’ve called Visitor Attention, defined as the average time that a visitor pays attention to a specific area on a web page while scrolling up and down.1 We only include periods of actual visitor activity: when they move the mouse, scroll, click or type – and not periods of inactivity when the visitor is busy browsing other websites or grabbing a cup of coffee. The graph below shows us how much time visitors paid attention to each section of different-sized web pages as they scrolled through them. ‘Absolute Scrolling Reach’ measures the distance from the page top (in pixels) that a visitor scrolls down the page.

Visitor Attention vs. Absolute Scrolling Reach

By studying Visitor Attention patterns we learn that:

  • Visitors’ Attention follows a similar pattern for pages of different heights. It peaks both near the page top, at 540 pixels, and near the bottom, about 500 pixels from the end of the page.
  • Excluding behavior effects at the page top and bottom, attention decreases exponentially as visitors scroll down the page.
  • The peak near the top may be explained by the fact that the area near the page top typically contains the logo and is the first to be scrolled out of view.
  • The bottom peak may be explained by visitors’ increased attention while making a decision about their next browsing move. Users may be pausing to make a decision from the typical plethora of links near the page bottom, (for example, someone searching for a ‘contact us’ button or the telephone number of the company) or by the fact that users simply stop their downward scroll when they hit the page end.
  • The graph illustrates that Visitor Attention is directly related to the absolute page length in pixels, not to the relative position inside the page.

How Much Exposure Does Your Page Get?

To answer this question, we define Page Exposure as the average time that a specific page area was “exposed” to all visitors2 (as opposed to the subset of visitors that looked at the specific page area). Again we only count periods of visitor activity. The graph below illustrates the average time period that a specifc page area is visible on the screen (”exposed”).

Page Exposure vs. Absolute Scrolling Reach

From this graph we learn that:

  • Page areas near the top of the page get about 17 times more exposure than the areas near the page bottom.
    • In fact, Page Exposure peaks at 24 seconds near the 540 pixel-line and dips to 1.4 seconds near the bottom.
  • Page Exposure patterns are remarkably similar across different page lengths.
    • They appear to decline in the form of a Power function (y=a*x^b , -1<b<0).
  • Page Exposure exhibits a small flat rise near the page bottom.
    • This is surprising because the the first graph shows that Visitor Attention near the bottom is much more significant.
    • Since Page Exposure of a specific page area is calculated based on the total number of page visits, the “flattened bump” in the second graph means that the high levels of attention are only experienced by a few visitors and are averaged down across all visitors.
    • This hypothesis is confirmed by the results from Part 1 of the ClickTale Scrolling Report. Below we reproduce the graph that shows that, regardless of page height, only 15% to 20% of page visitors reach the page bottom. (We measured visitor scrolling using a new metric called ‘Visibility’ which is defined as the fraction of page views that scroll to a specific location in the page.)

Visibility vs. Absolute Scrolling Reach

Some Important Observations

  • Below 540 pixels, both visitor attention and page exposure decline exponentially.
  • Below the 1,000 pixel-line, the number of visitors declines in a linear fashion vs. their relative page location.
    • See part 1 where we showed that Visibility = 57.6 – (0.409 x  Scrolling Reach) with an R-squared = 89.4%  which indicates that the linear model is a very good fit for the scrolling data.

Our Recommendations (i.e. what does this all mean to me?)

  • The most valuable web page real-estate is located near the page top, between 0 and 800 pixels. Visitor Attention and Page Exposure peak at about the 540 pixel-line.
  • If you have a long web page,  add “stop points” such as headers and images to prevent your visitors from quickly scrolling down the page. It will prevent their attention from waning towards the end of the page.
  • The footer of your page is important! Users do pay quite a bit of attention to that area of your page.
  • See how your specific pages behave with ClickTale Scrolling Heatmaps. ;)

Final Note

The graphs above were generated by averaging many different web pages and, hence, show “an average model” of a typical web page. Keep in mind, however, that each individual web page has its own reach and attention characteristics that depend on the type of content, the presence of images or headers and the type of visitors to the site.

To understand Visitor Reach and Attention of your own web pages, we invite you to sign up for ClickTale and try our Scrolling Heatmaps for yourself.


  1. Visitor Attention is calculated by dividing the total time visitors spend looking at a specific page area by the number of visitors that viewed that area. 
  2. Page Exposure is calculated by dividing the total time visitors spend looking at a specific page area by the total number of visitors that have viewed the page.


Closeness of Actions and Objects in GUI Design (Jakob Nielsen’s Alertbox)

Closeness of Actions and Objects in GUI Design (Jakob Nielsen’s Alertbox).

Closeness of Actions and Objects in GUI Design

Users overlook features if the GUI elements — such as buttons and checkboxes — are too far away from the objects they act on.
One of the oldest principles of human-computer interaction is that things that are close together on the screen are seen as related. (Similarly, users view as related those things that are the same color or shape, that move or change together, or that reside within an enclosure, such as a box.)

I wrote about how to apply the closeness gestalt principle to GUI design in my 1993 book Usability Engineering, but it was well documented long before that.

Even though it’s an ancient insight and is covered in countless books and courses, we frequently see users overlook features because layouts violate the closeness rule. When buttons, drop-downs, checkboxes, or other actionable GUI elements are too far away from the objects they act on, people don’t see them. Often, users don’t realize what they’re missing and simply assume the features aren’t available.

In e-commerce studies, for example, users often overlook the availability of products in additional colors or sizes.

iTunes’ Violation of the Proximity Guideline

A striking example here comes from the screen in Apple’s iTunes software for upgrading iPhone applications to newer releases. Several months after getting an iPhone, I still thought users had to manually check each application icon one at a time.
This is how it looks:

At the top of the screen are a bunch of application icons. At the very bottom of the screen is a button labeled 1 Update Available. When clicked, this button updates whatever app needs the update, sidestepping the need for users to click each icon.

But, for several months, I didn’t notice this button because the action is simply too far removed from the objects it applies to.

Furthermore, the button lives in a separate colored stripe, so it appears to be outside the space that the icons inhabit, violating a key visual interface design principle.

(As an aside, why is the iTunes window so large in my screenshot, when it contains only a few icons? Because the same application manages both the phone’s apps and its music collection. When you work with several hundred sound tracks, you need a big space. It’s not always good to try to support highly distinct tasks within a single GUI.)

Close vs. Far Buttons

Interestingly, iTunes presents an example of correct button placement in another part of the same workflow:

In this screenshot, the Get Update button is right next to the icon it acts on. No risk of overlooking this feature. And no questions about what you can do. (Sadly, the dialog area’s Done button might as well be in Siberia. In fact, one problem is that this screen uses dialog areas for the role of dialog boxes in an interaction.)

That mainstream corporate websites make blatant usability mistakes is understandable because most members of their teams aren’t grounded in graduate degrees in human-computer interaction. (That’s why I have recently added foundational courses, such as The Human Mind, to my usability conference.) But how could Apple, of all companies, make such an elementary GUI design mistake? Apple has been pretty good at graphical user interfaces since it brought them to the mass market in 1984.

First, this is simply one more example proving that the big boys make mistakes and that you shouldn’t copy everything you see in best-selling software or popular websites. (This was brought home clearly in recent studies for our “Big and Famous Sites” seminar where was one of the sites we tested. But that’s a story for another day.)

Second, the usability problem might not have seemed so bad in Apple’s own testing:

If the tests used a smaller window, the button would have been closer to the icons and less likely to be overlooked by test users. (A smaller window might have resulted from using a normal-sized monitor or from testing the features in isolation so users wouldn’t be interacting with the large workspace needed to accommodate an entire music collection.)
If they tested a configuration with more app icons, the icons would have filled up the space and thus the button would have been closer to the last icon.
This case exemplifies the continued importance of an old and tried GUI guideline: insights that were discovered decades ago will still bite you if you forget them. The misplaced iTunes button also shows the importance of including a range of realistic configurations and sample data, both during user testing and in design reviews.


LukeW | “Mad Libs” Style Form Increases Conversion 25-40%

A while ago, I came across a unique registration form built by Jeremy Keith for his audio sharing site, Huffduffer. Though it asked people the same questions found in typical sign-up forms, the Huffduffer registration form did so in a narrative format. It presented input fields to people as blanks within sentences (Mad Libs-style, if you will).

Jeremy built the form to work as you’d expect. You can tab between the “blanks” just the way you tab between standard Web form input fields. You can click on any “blank” to start entering text. The password “blank” masks any characters you enter just like a standard password input, and the whole form manages errors if you answer any questions incorrectly. In other words, it works like a standard Web form but it looks quite different. The presentation is inviting and fun, which is quite unlike a standard Web form.

After seeing the Huffduffer form in action, I was curious how it would perform against a traditional form. Would people be more inclined to complete it because of the narrative format? Or would the unfamiliar presentation format confuse people? Thanks to Ron Kurti and the team at, I now have some early answers.

Ron and his team ran some A/B testing online that compared a traditional Web form layout with a narrative “Mad Libs” format. In’s testing, Mad Libs style forms increased conversion across the board by 25-40%. You can see a before and after view of the Contact Dealer forms where they ran these tests below.

Most of the input fields have stayed the same but the “comments” text area has been replaced by a “personalize this message link” and the phone number set of three input fields has been replaced a single flexible input. While it’s possible these adjustments also contributed to the increase, it’s unlikely they were solely responsible for it. As a result, the mad libs layout likely had an impact as well.

Examples of this form are live at Vast, Kelley Blue Book, and several more sites. Ron and the team are rolling out new versions of these forms over the coming weeks and will continue to test improvements. Hopefully, they’ll be able to share their results again.

Thanks to Ron Kurti for sharing these images and performance stats!