How to Design an Immersive Page Layout

by on 07/11/10 at 10:30 am

When you visit a web page you will usually see the top half of the page first. That part is the area we call above the fold. Once you scroll down, everything else you see is below the fold. Designers often design for the fold in a way that places the most important content above the fold to engage users as quickly as possible. While this is a good strategy, there’s a little more you can do to get even better results.

A good way of increasing engagement is to keep the content and layout above the fold as simple as possible. This means you should avoid cramming too much content at the top and opt for the least amount of content possible. Make your layout elementary and straightforward so that users can instantly process and digest your content. By keeping things simple above the fold, you will be able to create an immersive page experience for your users.

It’s much like a video game where the first few levels you start with are really easy, but as you advance the levels gradually get harder and harder. If you started the game off with the hard levels first you would probably give up pretty quickly, and you would not be engaged enough with the game to want to continue. Designing a web page is the same way. You want to start the user off easy and gradually increase in content complexity and density so that you can increase their level of processing from shallow to deep.

Speaking of video games, lets look at a Nintendo.com, a website that provides an immersive experience by following this principle. This is what Nintendo’s home page looks like above the fold. It’s very simple and easy to digest allowing users to engage with content instantly.

How to Design an Immersive Page Layout

 

Below the fold, Nintendo’s content and layout gets more dense and complex challenging users to increase their level of focus.

How to Design an Immersive Page Layout

On the Nintendo Wii page, what you see above the fold are three main things – Hardware, Software and Downloads. They’re grouped together and laid out horizontally. The titles and images are big and beautiful making it easy and simple for users to process.

How to Design an Immersive Page Layout

The content and layout below the fold gets more complex and dense as content displays in a smaller size and in greater quantity.

How to Design an Immersive Page Layout

Your website could be as fun and immersive as a video game if you apply this principle. Start simple by showing a minimal amount of content, then gradually increase in complexity by showing more content below the fold. Before users knows it, they’ll find themselves on your page immersed in content.


How to Design an Immersive Page Layout How to Design an Immersive Page Layout

Author and editor-in-chief of UX Movement. Loves great web experiences and fights for the user.

One Response to “How to Design an Immersive Page Layout”

  1. Stephan Wehner

    Sep 9th, 2010

    I have seen simpler pages, much less crowded above the fold, like http://tomayko.com/writings/unicorn-is-unix

    In comparison the nintendo design is extremely busy (above the fold)

    Stephan

Leave a Comment