Izilla website featured as example of good design
26/04/2006 | Extract from article by Andy Rutledge, http://www.andyrutledge.com
Designing a Guided Tour
March 26, 2006 - When designing and laying out the pages for a website it's important to keep in mind that each page has a specific job to do according to the needs, desires and expectations of our client and the site's end users. As the designer, it's our job to ensure that when a user lands on a particular page he not only finds what he needs or has a good experience, but he also finds what the site owner (our client) wants him to find and does what the site owner wants him to do.
As I've outlined before, humans typically respond to the use of line, form, color, contrast, balance, texture and composition in largely predictable ways. Using what we know of human perception and fundamental artistry, we can lead the visitors' eye into and through a page. We can establish and communicate the hierarchy of information importance by our use of color, text form and relative text size. And in certain situations we can use chunking to break up pages into conspicuous, easy to digest bits of information to ensure that important information gets seen and has a better chance of being communicated.
In this article I will show real-world examples of how certain web pages are successful and unsuccessful in providing a clear path through the page and the information offered on the page. I'll use these examples to discuss what was done right or wrong with regard to design. (…)
Leading the Eye and Information Hierarchy
One
In this example, after noting the logo (something nearly all website visitors do first on a page) our eyes are immediately drawn to the colored boxes on the right. Those are links that the organization wants us to click in order to find out more about their stuff. The use of color here makes for a very conspicuous and eye-catching mechanism, and a successful design.
Two
Here's an excellent use of color and contrast to lead the eye along a specific path. Note how the contrast of the green on the black and then the black on the green and white helps to create a specific path into the page. (…) The eye is drawn from the logo (1) to the primary message (2) then to the secondary message (3). (…)
Three
Here's another example of good use of contrast to lead the eye. In this example, contrast is created with both color and shape.
(…)
Chunking
One
In this example, the chunks of information constitute almost the entirety of the information to be communicated on this page. The image/info in the middle is conspicuous and communicates the general idea and then the three chunks of information cover the rest of what they want you to know.
Two
This next page has quite a dizzying array of navigation at the top. Luckily, they've opted to provide a few chucks of info to outline their primary services. These chunks make for a more inviting and easy to understand mechanism for getting into the site. The use of color and photos of people's faces makes the chunks all the more attention-grabbing.
Three
Here we have an example of how chunking can lead to easy comprehension and more elegant structure and an example that shows how bad things can get when chunking is not used. On the left is The Wall Street Journal and on the right, The Times (London). The Times uses color to create sections of information that make the page seem neat and easy to read. The WSJ, by contrast, uses almost no color to lend a sense of structure to the page and, instead, just uses lines to separate bits of content.
(…)
Conclusion
Clearly, it is important that before we begin designing a website we understand what information should be communicated by the pages and in what order that information is to be conveyed. Our job is to ensure that both site owner and site visitors are satisfied by the result. So by way of a comprehensive discovery process, an understanding of human behaviors and psychology, and an understanding of the principles of interaction design we can craft a satisfying and somewhat predictable experience for site visitors. That's an essential part of a designer's job and mandate.
More information http://www.andyrutledge.com/eye-paths.php
Back to the Izilla news archive