Big and Bold vs. High Contrast and Elegant
“I want it bigger! I want it bolder!”
These words have been heard by probably every web designer when consulting with a client. It is a comment that is very limited in its ability to give a designer any sort of useful feedback toward the visual design of a website because “bigger and bolder” needs to be applied to elements of a site very carefully to be effective. “Bigger and bolder” is usually only a small part of a solution to the problem of emphasizing important information. Big red and blue text in 32pt Arial font does not sell or even emphasize unless it is displayed in a way that is consistent with the site design but provides adequate contrast from the less important content. Not everything can be big and bold or else nothing is, and everything that is big and bold must be consistent with the rest of the site.
Eye Tracking Studies
It was proven through eye tracking studies performed by Jacob Neilson and others that, on the web, people ignore sections of a web page that look like ads. A similar study was conducted by Neilson when testing the effectiveness of large graphics on homepages. The findings were similar. According to eye tracking software, users spent very little time at all looking at the large graphical sections on a page. What these studies imply is that users ignore content which is inconsistent with the site design and seem irrelevant to the the content of a page. Ads are distinguished by their inconsistency with the design of a given site while many large graphical images on a page come off as irrelevant unless accompanied by areas of text.
Proper Emphasis
When emphasizing specific content on a page it is important to make use of contrast in combination with elegance to avoid the above mentioned situations. High contrast draws attention, and differentiates the important information from the less important information while elegance presents the information in a way that will not detract users from viewing it. Elegant displays of important information will emphasize the content you want but will not seem to demand attention of the user due to it’s inherit ability to “fit in” with the rest of the site content.
Bigger is only bigger if there is contrast and bolder is only bold if the layout presents the information elegantly. Other than that, you have what comes off as an advertisment and people will ignore it.
Examples…
The Iphone informational pages, or any of apple’s promotional product pages display high contrast, elegant graphical sections in ways that are very consistent with the page design and lead into to important, and relevant content.
December 28th, 2007 at 8:27 am
Great post!
Don’t you tend to find that the “bigger and bolder” scheme compounds on its self? I’ve heard many people start a conversation with, “This element needs to be bigger than that, but that also needs to be big and bold. Oh, and can we make it move?”
December 30th, 2007 at 4:19 pm
Thanks! Yeah… sometimes people think if information doesn’t scream for attention, then no one will see it but that’s not really the case as long as the page is laid out correctly. I read an article (not sure of the source right now) about email marketing that basically came to the conclusion that it makes very little difference on click through rates whether the main call to action is a large button or just a simple link. I think the same conclusions would probably be made on the web as well.
I find this problem compounds itself when clients do not have a clear idea of what the goal of their website is or what aspects of their business they want to promote. People spend very small amounts of time on web pages so you need to maintain high contrast within a consistent layout throughout the so that viewers know what to look at and don’t get confused.
The “can we make it move” or “blink” are great… I just ask: “do you like to annoy your users? if so, moving and blinking is great!”