Saturday, June 4, 2011

Web designers - remember the fold!

Summary: Apple hides the scrollbar in OS X Lion. If you want your mac users to see content below the fold, you must design for it.

Below the fold

One big web usability issue used to be - and still is - that people didn't know when there is content under the fold. In case somebody is unfamiliar with the saying "below the fold", it simply means everything that is under the visible content when you first enter a web page. So, that's all the content that require scrolling down. Web pages are long and there is always content.

Jakob Nielsen reports that web users spend 80% above fold and 20% below. The obvious conclusion here is that you should put your important content on the top so you don't lose business.

But why is that 80-20? Few things come to mind. In the early days of web, people didn't scroll at all. Designers learned to put the most important information is on the top of the page and for a critical piece of content, there's usually a dedicated page (also, it's a good idea SEO-wise). Then when people learned to scroll, of course there was nothing important anyways. Users spend very little of their time on one particular page, basically it's about enough to scan through titles and subtitles. If the top of the page suggests it's not worth the users' time, they'll move on.

Then there's the issue of users not knowing there's anything under the fold in the first place.

How to get people to scroll

Getting people to scroll is quite difficult.

First, you need to make people understand that there actually is content below the first screen. The content needs to be so magnetic that the user continues to follow it under the fold. An easy example: a user reads an interesting article which continues below the screen.

Second, you need to convince the user that it's worth their time even though the user knows that the most important content is usually on the top of the page.

Now, how do people know if there is any content below the fold?

There are two visual cues for users.

  • Cut-off content (images, text, graphical elements) on the bottom of the window, indicating that the page continues below. 
  • There's a visible scrollbar in the browser window 


Apple hides the scroll bar

Apple says bye bye to a visible scrollbar. Image is from Apple's website

Ok, while writing this, Apple is about to launch OS X Lion, the new version of their operating system. They're making Macs, iPads and iPhones perform more similarly. In near future, they want macs behave more like IOS devices. One thing among others you're going to notice is that the scroll bar is hidden. It only shows when you're scrolling, like in iPhones and iPads. The updates that come with Lion OS X clearly indicate that Apple wants to create one Apple experience that's similar, no matter be it a mobile device or desktop computer. This comes as no surprise if Apple wants to make touchscreen imacs in near future.

The only-visible-when-you-scroll type scroll bar works beautifully with iPhones because when you use web with such a small screen, it's always obvious that you need to scroll to see the whole thing. No article, for instance, will fit in a smartphone screen at once.

Designers, always think about the fold

Good for Apple, but bad for web users and designers. Now for Apple users, the only visual cue to know there's content below the fold is that the page is designed that way. Here are some ideas about how to let users know you have content below the fold.

Think about the typical browser window heights when you do design. In the area that browser windows usually end (around 600 pixels from the top):

  • No 100% wide horizontal lines
  • No 100% wide boxes that end (or can end) just at the fold line  
  • If you use multiple columns, don't make all columns to end in the exact same pixel 
  • Try to make the content, images and text, to cut off at the fold line
  • Use graphical elements that seem cut off if there's content below

The best piece of advice I have: Always test your visual designs! Use pc and mac, laptops and desktops of different sizes, resize the window. See how your content and page design feels. You don't know if the site users use full screen or a smaller window, a laptop, tablet or 27" iMac. The user may have tons of toolbars in a browser that take the first 200 pixels of your screen.

What makes it even harder is that you rarely know what kind of content the client will eventually use. Do not trust your lorem ipsum. This is one big mistake web designers do constantly. You can never assume that there's certain amount of content. If you specify in a style guide that "you need to use this element with two sentences of text" the client will probably put ten sentences there. If there's a minimum amount of content in another design element, probably somewhere on the website you'll find that element with no content at all. The page you designed with dummy content will often end up totally different once the content editors have done their part.

And one more thing. Do usability testing. It really opens your eyes when you see how people really behave with your designs. I mean, it really is different from what you think.