Your Bare Stage: “Above the Fold” & Scrolling

Welcome to the second article of the KISS: Usability & Webcomics 101 series.

A lot has been said about the concept of “Above the Fold” (the space visible when a website is loaded in a browser) and scrolling on websites. Conventional wisdom suggests that anything important to your website needs to take that place of prominence or risk being lost in the seedier, below-the-fold district of your website. Usability research has tended to back this up to some degree, but with one big exception. If you grab your audience with what is above the fold, then they will scroll down to see what is below.

How much attention goes to the material below the fold appears to be in some debate. According to Nielsen’s Useit.com, studies show that while 80% of readers will scroll, only about 20% of their attention goes to the material lower on the page. As visitors, they have been trained to expect the more important information to be at the top unless told otherwise. Another eye tracking study suggested that less information above the fold can encourage scrolling, but again, only if the initial material is compelling enough. But we know that webcomic sites are special, how do they fall into the Above the Fold & scrolling argument? Read on After the Jump.

Scrolling & Webcomics

All this means is that your “above the fold” space (typically about 600 px tall) becomes an advertisement for the rest of your site. Some complex websites, such as Basecamp, use this space exactly like a large graphical advertisement, but the majority of webcomics don’t need that. They are best served by putting the product front and center.  New readers can be drawn into your site by the comic and, if they like what they see, encouraged to scroll down.  Then they can access your blog and other elements. Place graphics to be cut off by the “fold” signals that there is more to see by scrolling. Returning readers already know what is below the fold, but are not forced to do any additional scrolling if they don’t want to.

Tips for Short Comics

Short formats, like strips, often are expected to be on the front page of a webcomic site. Their short stature allows the entire strip and navigation to fall above the fold on most browsers, convenient for both new and returning readers. In fact, you should strive to avoid scrolling to see the bottom of your comic as a small amount of scrolling can be just as annoying to some readers as lots of scrolling.

Oversized headers, such as the one used at Dodge the Bullet, should be avoided since they can overpower your comic or put the navigation below the fold on shorter browser windows. While this example is primarily above the fold (definately a plus!), the space could be used more effectively by shrinking the header and making the comic a bit larger.

Tips for Tall Comics

Unlike short comics, long-form comic pages are typically far too tall to fit above the fold. This will force readers to scroll down into the rest of your site (so they can read the entire page), but you can draw readers in by getting as much visible above the fold as possible. I like to see at least the first row of panels visible without scrolling. You should also consider top & bottom comic navigation so if an archive reader wants to skip ahead they can do so (more on comic navigation soon).

Walking the Lethe (our comic) adheres to the “top panels” rule more or less, although we opted not to include top navigation in this design.

Other “Above the Fold” Elements

In addition to showing off your comic, several other elements are commonly expected to be or begin above the fold. These typically are:

• Your logo and/are header; kept small to prevent too much scrolling.
• Site navigation; because people expect to find it high in a page.
• Advertisements, generally a leaderboard, banner, or skyscraper.

You will want these elements to work as a frame for your comic without allowing them to overpower or shove it too far down the page.

Exceptions

There may be times when your webcomic is not the most important or sole important purpose of your website. In those cases, I believe that the purpose of your site, perhaps your blog, should take prominence above the fold.

Bearman Cartoons is an example of an atypical webcomic site. Since the blog & comic are intended to have equal importance, both occupy the prime real estate territory above the fold and toward the left (where readers’ eyes go first in English); indeed they are in the same feed which sometimes obscures the comic from new visitors. I’d like to see the addition of proper comics navigation (even on a separate page with prominent linkage on Home) to strengthen and balance the comic’s position.

Other comics may have reason not to have the actual pages on the homepage. Perhaps you update several pages at a time or have adult content, but want the blog to be on the homepage. In this case you are truly using your ‘above the fold’ space to advertise your comic. A prominent and visibly changing link should indicate where readers need to click to reach the comic. Some people find needing to click through to a comic annoying, but by marking it clearly you can avoid confusion.

Horizontal Scrolling

A couple of words are in order here. Horizontal scrolling is seriously frowned upon in webcomics and websites in general tend to avoid it. Users simply are less accustom to it and may miss it all together. Horizontal scrolling is also slower than vertical and more difficult to manipulate with some mice. Unless you’re doing something experimental, you should never have a comic page that forces horizontal scrolling.

All that said, there are some very lovely horizontal scrolling sites out there. If you choose to go this way for aesthetic reasons, it is vital that you avoid vertical scrolling. People will scroll vertically or horizontally but not both. In addition, material in the diagonal can easily be lost. Horizontal scrolling tends to bring out strong opinions, so be prepared.

Suggested Activity

Sketch a few potential site designs or redesigns out on piece of legal or A4 paper. Fold it in half to get an impression of where your design might get cut off. Adjust the fold to where you’d like the cutoff to take place so you can rearrange elements to achieve the desired look.

Already have a website? Run it through Google’s Browser Size tool to see what percentage of websurfers can see everything on your site. Keep in mind that some demographics skew to larger screen sizes.

References
Leech, Joe. The myth of the page fold: evidence from user testing. CX Partners. Published Sept. 18, 2009. Accessed May 10, 2010.

Nielsen, Jakob. Scrolling and Attention. Useit.com. Published March 22, 2010. Accessed May 10, 2010.

Nielsen, Jakob. Horizontal Attention Leans Left. Useit.com Published April 6, 2010. Accessed May 10, 2010.

Wikipedia. Above the Fold. Accessed May 10, 2010.