Zoom Your Content!
a Crucial Web Design Technique

Zooming Enhances Getability

One of the absolutely fundamental principles of the "Save the Pixel" web design philosophy is to manage your visitor’s attention so that they "get" your web page/site immediately when they arrive.

When a page is what I call "getable", you know straightaway:

  • What the site is about (brand, proposition)
  • What’s on the site
  • What you can get or do there

So that you get…

  • That you’re in the right place to get what you want (or not)

There are numerous skills and techniques that contribute to achieving getability. We need to make sure that appealing factors (size, colour, tonal contrast, and dynamism) are applied to draw the eye to the content, and furthermore to the most important content first.

Great Getability, Holmes!

Here’s a page that gets it very right. Notice how every "attractive", bold element in this design draws you straight to meaning. There’s practically nothing on the page that isn’t directly meaningful or useful.

Churchmedia home page screenshot showing excellent getability

Notice how all the colourful & high-contrast (dark) areas draw your attention directly to what the page is about.

Notice how you can guess what this site is about, even at half-size! That’s a great acid test for getability (and zooming).

 

Insufficient Getability

This one gets it totally wrong, with strong contrast, dynamic background patterns, and busy pixels all pulling your attention away from the tiny, text-heavy content.

Peterned site design has poor getability

In order to work out what’s on this site, it looks like you’re going to have to make a cup of tea and settle down to some reading.!

 

Factors Work Relative to Each Other

Of course, all design factors work relative to each other. You can’t make everything bright and bold, or nothing will be bright and bold. We can all spot web page designs that use so much boldness or bright colour that overwhelm the eye, resulting in little benefit.

Take this design, solidly saturated with fairly intense colour.

Webbliworld site is so colourful, there's no focus

Where do you start looking? How do you begin to figure out whether this site is what you want?

 

Zooming Step One: Bigging It Up

In today’s web design, more designers are getting wise to the benefit of "bigging up" key design elements, usually the main text and imagery that introduces the main proposition, relative to the supporting content. This gives the page a clear focal point, something to draw your eye at first view.

A strong focal point can also give a page a feeling of confidence and presence. On Rob Morris’s home page, the main heading is so strong, it acts like a bold logo, while the busy mass of design artefacts at the top of the page communicate clearly what Rob does.

Huge heading and imagery on Rob Morris's home page

Big introductory content means you can tell what Rob’s site is about, even from a distance.

 

Step Two: Layer Your Zooms

Zooming goes beyond a single focal point. It applies to multiple layers of meaning. What do you see first, and what does it tell you? What do you scan next, and what does that add to the meaning?

Your web designs should work in the same way as a newspaper, which initially aims to grab your attention a main headline and photo, then follows up wtih smaller headings and callouts that give you more information about what’s on offer.

Any page should have a single focal point, the biggest, boldest, most readable element, which acts as a visual hook to draw your attention upon arrival. Whether text or image, this content should say the absolute essential minimum I need to know to get what your site’s about.

Once I’ve got that, I should be able to scan the rest of the page, here looking at second-level zoomed items, which will let me understand a bit more, still scanning not reading.

Finally, I may use a third level of sub-heading, or start picking out early text from paragraphs, in order to start locating what actually interests me.

A tip here is to check your layers work together in a logical order, progressively adding a bit more useful information.

Clear layers of meaning instantly readable on this template

This template from clicss shows clear large steps down from the main splash message to copy headings.

 

The key here is to use a few meaningful levels of meaning, which should correspond roughly to the first scan, the second scan, then reading more closely.

Create clear size distinctions between each of these (so don’t use too many levels of headings as you won’t be able to differentiate them easily). Also, make sure you don’t have a page full of headings, as they’ll just jostle for attention, resulting in a tired viewer.

I’d love to see more sites realise the benefits of zooming the key content. It’s all too common to see pages that ought to have a clear focus, but where all content is treated equally, resulting in a page that the eye skips over and over without satisfaction. The experience can be tiring, and the visitor more likely to fail to find the next step forward, which simply means lower success.

Here are a few illustrations of web page designs that don’t get it quite right.

A Few More Problems

Pulling Eye Away From Content

This design incorporates a number of visually attractive design features, in the form of strong colours, highly contrasting edges and dynamic shapes. The problem is that all these are properties of permanent "screen furniture" (i.e. stuff that’s part of the general page template), and because the content is relatively light with smaller features, it’s totally drowned out.

Content is drowned out by page furniture

The eye struggles to focus on the actual value on this page, because it’s drawn to more appealing elements around the edges of the content.

 

Too Much Text Without Scanable Headings

This example suffers from relying on body text alone. The result is a page that’s just not scannable. The headings aren’t big enough relative to the body text, so you can’t easily scan for an overview.

Simple, but too much undifferentiated text to aid scanning

This web page is simple, but there’s too much undifferentiated text, which means you have to read and can’t scan.

 

Overcompression Negates Zooming

One common problem is making everything equally small in order to get all the content above the fold, as in this example. When you reduce everything in size, you can’t go beyond a reasonable minimum, and combined with extra compression, it’s hard to differentiate key elements with increased size.

Over-compressed web page layout

The Simplenet site tries to get the whole page above the fold, resulting in over-compressed content.

Showing more information can actually reduce the chance for communication, if you sacrifice distinguishable zoom levels.

 

Over-Zooming – You can’t zoom everything!

37Signals have been at the vanguard of simple, bold, and direct web design, but I find their recent redesign over-zoomed. We have a number of big (zoomed) elements, all competing for attention, and I don’t know where to start. The balance of colours, tones, and size result in nothing saying "Start here to get what this page is about".

To get more analytical, I think the actual problem here is that there are too many zoomed items too high up the zoom scale.

The heading "A Better Way To Work" is probably the main hook, but then intro text by the 4x products, together with the product names, and also the paragraph beginning "Every day…" are almost as big. These could each constitute a level-one-zoom in their own right. They’re a bit too close in scale to the real main heading, which confuses the visual language.

Zooming everything can create visual stress and reduce clarity

On the new 37 Signals home page, it feels like everything is now zoomed, which is almost the same as zooming nothing.

The page is understandable, even when compressed as here, but the lack of a visual “hook” or starting point reduces ease of scanning.

 

Step 3: Zooming Content Within Its Bounds

Once your page has the right range of zoom levels, and an appropriate number of clues at each level to let me scan the page and quickly build up a picture of what’s going on, there’s a further level of zooming you can apply to optimise eyeball time on your key content still further.

Take these examples of content. What do they have in common?

Photos from Veer

More varied photos from Veer Europe.

What you can see in these other professional design media is how the relevant content has been zoomed up to fill the space allocated to it.

In the case of the photos, the photographer or editor will crop the image to ensure that all the relevant meaningful content is kept and optmised, while potentially distracting information is removed.

With the vehicles, the designer starts with a fixed-size canvas. The logos for these businesses have been enlarged to use as much of the space as possible, maximising their impact and noticeability.

 
Van decals

Van decals from Harris Signs (UK).

Van decals

 

How to Use This Effect in Web Design

When you’ve got some highly relevant visual content that your visitors need to get straight away, firstly crop or edit out any unnecessary bits (background, other people).

Don’t feel you have to keep the format or bounds of any original photo. Photo editors know that you can tell completely different stories by selecting a different portion of a picture.

Check out this amazing design from Nick Finck.

Nick Finck's site somehow combines impact with gentle readability

I think Nick’s home page is a masterpiece of zooming. It tells you exactly what you need to do at first glance (and no more). Other content and navigation options are reduced in scope but maximised in size & noticeability. Stunning work!

There’s practically nothing that isn’t "contentful" on the page. The resulting effect is a site that you just have to trust! The content is so plain, up-front, and clear that the brand values of honesty and direct plain speaking shine out.

At the opposite end of the spectrum, here’s another simple yet effective site that’s deliberately much more classical in style.

LDS Church site on Jesus has great presence

See how the classic paintings are zoomed up to optimal presence on Cameron Moll’s Jesus site, resulting in a great balance of elegance and visual impact.

 
About the author

starfire