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.
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.
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.
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.
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.
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.
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.
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-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.
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?
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.
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.
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.
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.