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.

22 comments:

  1. It's been a pleasure reading your blog. I have bookmarked your website so that I can come back & read more in the future as well. Please do keep up the quality writing.

    ReplyDelete
  2. Thank you, I really appreciate your comment! I know I'm not being really active here. I have a lot of drafts saved in blogger and even more ideas I want to write about but I prefer few good quality posts over many posts with not much to say.

    I post quite actively on Twitter (or G+), trying to fit everything in 140 characters as it's so much quicker than composing a blog post with solid arguments and screenshots... You're more than welcome to follow those as well!

    ReplyDelete
  3. This comment has been removed by the author.

    ReplyDelete
  4. This comment has been removed by the author.

    ReplyDelete
  5. This post is a nice way to introduce new people in the industry to explore new ways. Thanks for sharing!

    web designers philippines

    ReplyDelete
  6. Your site is for sure worth bookmarking.
    video creations

    ReplyDelete
  7. The web designers remember fold is share don the post here. Know the details from the post here

    ReplyDelete
  8. The web designers remember fold has been described in the post here. Know all about it

    ReplyDelete
  9. This was obviously so funny. How can he say that online. Were the statements really true? If it was true or even almost true then they should have checked their systems to see if someone had hacked in.

    ReplyDelete
  10. Hey, nice post...love the way you have presented the whole story...it's
    always good to read and get to know quality stuff...

    Do visit my page....

    Web Designing delhi

    ReplyDelete
  11. Hey thanks for sharing such a vital blog on 'Below the Fold' concepts in the context of web design. This was really helpful for me to upgrade my knowledge. 
    Web Design Company India

    ReplyDelete
  12. Really a nice way to express things. I really like it. Keep sharing such more posts.
    Web Designing In Pakistan

    ReplyDelete
  13. Wao nice information about web designing.thanks for shearing it with us.
    Web Designing

    ReplyDelete
  14. Thanks for sharing information. this post is just an eye opener for me. Very much appreciated and bookmarked it. I can’t wait for more!

    ReplyDelete
  15. Thank you sharing this information thank you.Come back again for more interesting stuffs like one you got earlier!Bulk SMS India

    ReplyDelete
  16. Thanks so much for this helpful information come back again for more interesting information…Keep it up
    Builders in Agra

    ReplyDelete
  17. Nice blog! Very interesting and informative post….Thank's for sharing such a nice information….Keep it up!!! Website Designing in Agra

    ReplyDelete
  18. Hi Grat Your Blog,Thank's for this helpful information come back again for more interesting information!!!
    Event planners in Delhi

    ReplyDelete
  19. Hey nice blog,Thank's for this helpful information come back again for more interesting information…Keep it up!
    Taxi in Agra

    ReplyDelete
  20. I recently came across your blog and have been reading along. I thought I would leave my first comment. I dont know what to say except that I have enjoyed reading. Nice blog.I will keep visiting this blog very often.

    Web Hosting Pakistan

    ReplyDelete