Design & UX
Article
By Michaela Freeman

Web Layout 101: Making the Most of the Top Right Corner

By Michaela Freeman

User behavior studies show the upper-right corner of a website is the area that draws the least attention from the human eye. It’s simply a reflection of our reading habits. We start at the left, head to the right, and then go top to bottom.

F pattern reading

Many viewers examine a website in an ‘F’ pattern, with a top bar of the ‘F’ extended some way across the screen, then they move down horizontally and scan the second part of the letter, until finally they look down the left-hand lower parts of the site.

Site visitors overlooking the upper-right corner means it’s not the proper location for important information that the designer is expecting to generate clicks or other actions. Instead, it’s ideal for a contextual image, one that is seen by the viewer but doesn’t require the reading of any text.

However, the trick for designers is finding imagery that fits this dynamic.

When viewers look at a site for the first time, most look to the upper-left corner where there’s an expectation to see the name of the site and other important information. They quickly scan downward, with maybe a glance to the right.

As design teams came to understand viewer eye patterns, they began using the upper-right for less interesting content, such as disclaimers, instructions, and perhaps flags identifying different language version options for the site. While this is an older style of design, the underlying human behavior hasn’t changed.

Larger websites contain different pieces of content that are all vying for the viewers’ attention, but the upper-left remains the most valuable space. The upper right is ideal for images, as they are seen peripherally and can convey information or prompt emotions subconsciously.

--ADVERTISEMENT--

Finding the Right Background Images

To illustrate upper-right site images that are a good fit for the screen, let’s review three different sets of background images and how they might interact with the content.

Example 1: Ballet Shoes

Let’s begin with two different images of a ballet scene – one where there are shoes in the upper-right part of the frame, the other with the shoes on the left side.

Image 1

Pointed shoes - left side

Image 2

Ballet shoes on right of image

Image credit: Dreamstime

Here are some design thoughts on the preferred ‘right side shoe’ image:

  • It clearly illustrates the power of a sharply focused image for the upper-right corner.
  • The image itself is intimate and draws the viewer into the site with a feeling of sensuality and grace.
  • It does leave the left-bottom corner a little bit weak, especially if a contextual content image was placed to the right of the text, then the upper-right would be too dominant. A possible solution would be richer toned wood flooring.
ballet-correct-mockup-001

A simple composition.

Website photography should lend a human touch, but creating that warm and personal look is difficult when looking for ways to fill the ‘blind’ upper corner. A photographer that creates a composition with the center of attention (and actual focus) into the upper-right corner has made a highly unnatural site, one where the rest of the composition must be boring in order to draw attention.

With too much dominance in the upper corner, there’s a risk of distracting the viewers, and encouraging them to leave the site before they’re engaged.

Example 2: The Autumn Forest Road

Our second example uses two broadly similar views of a scenic road twisting through an autumnal forest. Both images feature a road that travels off into the distance, but the first travels directly towards the upper-right corner, and the road reaches the end of the frame. The second road winds towards the center of the composition.

Let’s dissect the two:

Image 1

Image 1: Road traverses bottom left to top right

Image 2

(Road winds towards the center of the composition)

Image credit: Dreamstime

  • The image with the road extending to the right is ideal because it’s dynamic, and encourages the mind to explore and imagine possibilities.
  • Both images would benefit from more forest on the sides of the images, as this would better fit web design usage.
  • The image with the road leading down the middle of the image is not as dynamic, and if used with a centered block of copy and links, the road itself will become lost. When the first image is utilized, the viewer sees two connected sections of road.
  • [caption id="attachment_143511" align="aligncenter" width="1200"]road-correct-mockup A simple layout.

    Example 3: The Beach Scene

    The final set of examples are beach scene images containing one with the waves and setting sun, and another with palm trees on the left side.

    Image 1

    Looking along the beach. Ocean breaks from left side - sun sets on the right

    Image 2

    (Looking out at the ocean. Sun sets in top right. Palm trees reach in from the left edge.)

    Image credit: Dreamstime

    • The image without trees has an eye-catching horizontal line of ocean that has an interesting sun featured on the right, with only sky on the left.
    • The diagonal effect of the wave pulls the viewer’s attention and is dynamic and powerful.
    • The detail of the wave helps balance the sun, giving the designer a lot to work with.
    • Trimming more of the sky and including more water and shore would improve the image further.
    • The sun should be up against the upper margin, which is against the photographer’s instinct.
    • The image with the trees is a more typical scene, with dominant features to the left, and less interesting angles.
    beach-correct-mockup-004

    A simple composition.

    The Takeaway?

    Ideally, images for a website background should have some visual interest in the upper-right corner and a vertical, narrowing band across the top of the screen.

    There should be some visual interest down the right-hand side, which does run against the instincts of many photographers, but it’s a design style that works well for impactful sites.

    All images: Dreamstime

    • Guymon Hall

      So, how would this change in a culture that reads from right to left or reads vertically…?

      • That’s a great question, @guymon. I’ll see if Michaela has some thoughts on the issue.

        • Michaela Freeman

          Thanks for the prompt, it’s a good point indeed. See my answer above.

      • Michaela Freeman

        I don’t have the time to check it now, but I assume the same studies
        that confirmed the F pattern of reading Western languages have been done
        analogically to other languages. They too have their blind spots and
        those blind spots would be where images play a role.

        The only place where this would pose difficulties are sites that have the same design for both Western and non-Western languages. The obvious solution there is to create a design around a central axis that works both ways.

        But my question there would be, whether we should be showing the same design to all cultures? What Westerners find appealing may not be at all appealing to the Chinese, Japanese or Arabs. The aesthetic is different in these parts of the world, not just the alphabets.

        In those cases, I would primarily vote for entirely separate designs and likely also different content following the same core message and style. Programmers don’t like to hear this, because it severely complicates things, but that’s just the reality. We should both respect other cultures and be able to market to them in a visual (and actual) language that they understand.

    • M S i N Lund

      Full screen background images huh?

      Everyone please don’t forget to check how that looks on big high res screens, or big screens in portrait.

      Maybe even test on something extreme like a 40″ UHD in portrait, just to make sure there are no nasty surprises in the near future.

      It doesn’t take much to make designs like this look just awful.
      Especially if the dev only checks on his/her screen.

      Often in portrait, you just get a blurry view of whats to the left in the background image,
      like a pixly eye and nose of the face of one of the grinning stock-photo people.

      • Michaela Freeman

        Yes, definitely. All this is conditioned by a sufficient size of such background images. And they are very hard to find – to fit both the unnatural need for top right corner focal point, as well as the high-definition requirement. Additionally, I prefer images what can be gradually faded into a single color on the sides and bottom, to prevent unpleasant surprises. But that’s an issue for another article.

        • M S i N Lund

          Yep.

          I’m not to crazy about having a background image behind text either.
          Looks nice, but useless for reading.

          • Michaela Freeman

            Readability is definitely a concern, but there are ways to improve it, including blurring, fading and lowering contrast in busy areas of the image which end up under text. For these examples, I selected rather dominant images that clearly illustrate the point. I used a default opaque white layer to roughly define a text area.

            In real life, the images would best be less diverse, more subtle and the tone of the overlay would be selected to create the most compact reading background possible. It also depends on the amount and size of text that needs to be read.

            There are many schools of thought on this and it very much depends to which school the client belongs to, not just the designer. Many people love the idea of an image covering the whole screen – and it’s hard to blame them. So the challenge is how to select the right image and how to do it well.

    Recommended
    Sponsors
    Get the latest in Design, once a week, for free.