How People Use Web Pages
Web designers naturally have a distorted view of web pages.
The way we look at pages as we design them is very different from how they're used in the real world.
To create designs that work in the real world, we must appreciate the way they'll really be used.
How designers look at web pages
- We appreciate balance, depth, richness, and surprises
- We enjoy looking at designs
- We stare long and hard at the complete screen
How real people use web pages
- They move quickly because they don't like looking at the screen.
- They're impatient - they tend to click the first promising link, and often don't wait for pages to finish loading.
- They don't like to read, scanning text quickly for clues.
- They're looking for things to help them do what they want to do don't like looking at the screen.
Even the best displays quickly make your eyes tired, because...
a. They're grainy
A good resolution is about 100 dots per inch - that's a third of the sharpness of newsprint.
b. They flicker
Most people have to run a CRT display at high refresh - 75Hz or more - to get decent results. LCD screens are better, but reading off screen is always slower and more tiring than reading off paper. Also, some people are particularly sensitive to screen flicker.
c. Staring at screens is bad for your eyes
Looking at a screen from the same distance for long periods leaves our eyes weak, dry and sore.
(To protect your vision, experts recommend taking a short break from the computer every 20 minutes, walk around. Focussing at different distances strengthens the eye muscles.)
How users cope
How users cope
Computer users quickly start learning time-saving shortcuts to try to make life easier on the eyes. In order to reduce the time we spend looking at the screen, we:
are very impatient
make quick decisions
scan pages, instead of reading
Good design appreciates these considerations, and deliberately helps users have a quicker, less tiring experience.
Scanning
The #1 most important feature to appreciate about browsing behaviour is scanning.
Web sites designed to be looked at are likely to fail.
Web sites designed to be scanned are more likely to succeed.
To design successfully, it helps to know why people scan instead of reading, and how to help them.
What is scanning?
Scanning is what you almost certainly do when you look at a web page.
Instead of starting at the top and reading downwards, most people have learnt that they get better results by scanning over the page, looking for certain clues.
What are we scanning for?
Once we accept that people are going to scan instead of reading, we have to ask what they're scanning for.
The answer is 'Clues'. The specific 'clues to what' will depend on the context, and very much on the user's goals. Very often the clue might be to answer the ever-present question, "Am I in the right place?", or its brother, "How can I find what I'm looking for?".
When navigating around, we don't read the whole page and then make an educated, fully informed guess. What most people do is click on the first thing that appears to offer a fairly good chance of being the right thing.
More on why people scan (from Useit.com)
What are the implications on web page design?
You can't make people read. If visitors are going to scan, designers need to know how to help them to scan successfully.
How to aid scanning
When your eye scans a page, it only settles on a few elements: the ones that seem most likely to be useful. There are ways of 'promoting' elements to help them stand out to the scanning eye, and there are ways of making content 'recede' - stand out less. These techniques make use of the classic tools of design: hierarchy & containment, contrast, proximity, rhythm, motion and flow. Of these tools, contrast is the most important (it has its own tutorial later on).
To aid scanning, we can:
have insight into what features will be most relevant and important to the user.
know how to apply visual styles and techniques to help point the eye towards those elements, and skip over the unimportant elements (see the graphic design section for specific articles & tutorials).
These are fundamental and massive differences!
The way that we, as designers, even approach web pages is almost alien, compared to what goes on in the real world. That's probably the main reason why so many web sites are badly designed.
Whenever you or I look at a design (or anything), our perception changes. Most importantly, we really look, as though we're looking at a work of art.
We start to notice subtle differences that we wouldn't have seen at first. We start to appreciate the play between different colours, textures and layers. If we look long enough, we'll stop seeing. As the cliché goes, we "Can't see the wood for the trees".
Implications
In order to create effective web designs, we have to be sympathetic to web users. That involves getting smart in three key areas:
- the environment of real-world web use
- the habits users adopt in order to cope
- the things we can do to help users browse successfully, smoothly, and cheerfully
These three things pretty well sum up 'Web design from Scratch'. The rest of the Basics section deals with the first two areas: the web browsing environment, and the habits of web users.
People are Impatient
Cognitive friction
Interaction design guru Alan Cooper (www.cooper.com) defined this term to describe the mental stretch caused when tools behave in a way that seems unrelated to what you wanted. I find it extremely helpful in illustrating the ever-present anxiety of being a normal web user.
Note: Alan describes this much better in his excellent book "The Inmates are Running the Asylum". Please buy it.
In times gone by, using a tool to do something was a simple affair. e.g. Gather friends > take sticks > make stick pointy > poke mammoth with sticks > repeat until mammoth falls over. The pointy stick is very low in cognitive friction: its purpose and form are directly related. Even if you'd never used a pointy stick before, you could imagine how you could use it simply by looking at it or handling it. If you stick yourself in the leg with it, you understood why you'd been stuck in the leg, and you would learn how to avoid getting stuck in the leg again.
Todays' tools are generally high in cognitive friction: their form and purpose are more often unrelated.
In order to get my microwave to heat some food, I first have to set the length of time to cook for. I can't just press 'Start' and then stop it when I choose. Then, I have to select my power setting. Then I press 'Start'.
On the other hand, when I've finished writing this topic, and wish to shut down my (Windows) computer, what do I press? Yes, the 'Start' button.
There's nothing about my microwave that lets me know how to use it to fulfil my goal of getting food hot. There's nothing about my Windows PC that tells me how to shut it down. You have to work these things out for yourself today, somehow! That's the cause of cognitive friction.
Another effect you notice with cognitive friction is: if something doesn't work, you're made to think it's your fault.
Causes of cognitive friction on the web
Size!
Experience teaches us not to trust new sites straightaway. There are so many web sites out there, when we're searching for something, it's likely that this unfamiliar site we're on is the wrong one. If we're on the right site, we're probably on the wrong page.
Think about it. To complete a typical web goal, say booking a hotel ticket, you may have to visit 25 web pages (search engine, follow a link, go back to search engine, follow another link, find right site, navigate to booking section, select dates and room type, check availability, enter all your information, enter your billing information, verify your billing information, confirm your order... Only one of those pages actually books the hotel ticket. Most of the others either completely wrong, or in the way.
I know the web is too big to see. Statistically, I'm almost certainly not on the right page, and anyway the next search engine result is likely to load faster and help me find what I'm after quicker.
Hyperlinks
Hyperlinks are naturally high in uncertainty. Click one and you could end up anywhere. What's more, click the wrong one and you could accidentally launch an obscene web site, a hundred popup adverts, or pick a virus. (How designers can minimise the uncertainty of hyperlinks)
How do users respond?
The main coping mechanism we use to counter the low trust we have in the web is a manic, impatient behaviour.
We decide in as little as 1/20 of a second whether a site is appealing or not.
We scan pages for clues that "You're in the right place"
We make quick decisions about whether to carry on or go back (It's proven that web users don't read the page and make a valued decision on the best link to follow, but select the first likely-looking option. See Steve Krug's book "Don't Make Me Think" - below - for more excellent insight into this.)
When searching, we often don't even wait for the page to load, before deciding whether to click back, or follow a link (Note: Principle of putting the most important stuff at the top so it loads and is seen first.)
How to design for the web
We must design for the way people actually use the web (not how we think they should)
Once we fully acknowledge the way people really browse the web, we can get smart and positively design our sites to help real-life users, and avoid all the common mistakes that make life difficult for them.
