Redish offers guidelines in her book, Letting Go of the Words: Writing Web Content that Works that help web designers create web sites that are not only aesthetically appealing, but also usable. She writes, “When people come to a web page, they form an impression of the page before they read anything. They react first to the appearance (layout, fonts, colors, and so on)” (127). “Creating that appearance (designing the web page) is about more than aesthetics. It’s about usability. The design of your web pages can help people find what they need and understand what they find. It can also hinder them” (128).
So let’s look at some of the guidelines Redish writes about; specifically those that help us to make effective use of space.
Use Patterns and Alignment
Her first guideline is to use patterns and alignment to make page elements obvious. Cluttered, busy web sites usually do not have the elements (such as content, search, and navigation) aligned well. People are pattern-oriented and expect to see these elements in consistent places where they are instantly obvious. One of the best ways to form these patterns on the web page is through alignment of the elements whereby text and boxes start at only a few places (129 – 130). And the best way to achieve consistent placement across your web site is to use templates (137). For example, the Godiva web site maintains consistent patterns and alignment across its pages. Notice how the banner is consistent and the galleries of products are aligned in a similar fashion.
Godiva Chocolate Collections and Treats page – Retrieved from http://www.godiva.com/Catalog/category.aspx?id=131
Godiva Bakery Shop - Retrieved from http://www.godiva.com/Catalog/category.aspx?id=139
Keep Active Space in Your Content
Another guideline is to “keep active space in your content” (137). What is active space? How is it different from passive space? As shown in the image of a draft page from Redish’s book, active space is space inside the content area (such as space between paragraphs and list items), while passive space is space outside the content area (like the margins).
Draft book page with active and passive space labeled (138).
Both active and passive space work together to help visitors skim, scan, find and read information on the web page. For the web, we want to minimize passive space and focus on active space. Active space separates and groups content.
How do we achieve effective use of active space (137 – 139)? Redish points out several ways:
Break the text up into small chunks
Use lots of headings
Keep paragraphs short and space them
Use visuals like lists and tables rather than paragraphs
Set off images and graphics with space around them
Break the Text up into Small Chunks, and separate those chunks with active space. We can break the content down in various ways, such as provide the steps to accomplish a task in a list, or present directions to perform a task on its own page (like online help manuals). In the examples below, which set of directions to set a phone alarm clock would you prefer to follow? Of course the second set – the content is broken into small chunks and surrounded by active space; the first illustration is one long paragraph – a “wall of words”.
Nokia phone instructions to set the alarm clock in one paragraph - Retrieved from http://www.nokiausa.com/search?page=1&cat=support&qt=alarm+clock&np=services&cnt=1&fullcontent=true
Nokia instructions to set the alarm clock broken into small chunks (72).
Use Lots of Headings to help communicate content and to separate sections of information. By putting spaces between headings and paragraphs, we make the information seem less dense and more readable. For example, when we compare the blood pressure information on two web sites, iVillage and FamilyDoctor, we find that headings and active space make a big difference in readability. The iVillage page lacks headings and active space; it appears as “a wall of words”. On the other hand, the FamilyDoctor page appears less dense and more readable because of its effective use of headings and active space.
Village web page on checking your blood pressure – Retrieved from http://www.ivillage.co.uk/health/agestage/30and40/articles/0,,181165_183082,00.html
FamilyDoctor web page on high blood pressure – Retrieved from http://familydoctor.org/online/famdocen/home/common/heartdisease/risk/092.html
Keep paragraphs short and space them. In fact, Redish writes that on the web, a one-sentence or two-sentence paragraph is fine (191). And space them … as on this web page:
Short paragraphs on this ESPN page works well. Retrieved from http://soccernet.espn.go.com/news/story?id=344149&cc=5901
Use visuals like lists and tables rather than paragraphs. According to Redish, “a great way to let go of the words without losing essential meaning is to use lists and tables” (205). For example, visitors know to click on colored underlined words – in the following illustration, the sentence with links to visit the zoo is improved by converting it to a list (which has lots more active space).
Visit to the zoo in sentence form and in list form (187)
Set off images and graphics with space around them as are the images on The American School of Ballet Overview page.
The American School of Ballet Overview page – Retrieved from http://www.sab.org/school/overview.php
But Beware of Floating Headings and False Bottoms
Mismanaged space can hinder visitors from effectively using your web site. So, beware and heed these two guidelines –
Don’t let headings float and
Don’t create false bottoms.
What do these mean?
Headings float in space when there is the same amount of active space before them as after them; in essence, a visitor cannot tell what content goes with what heading. To avoid this problem, be sure you leave more active space above the heading than below it (141 – 142).
A false bottom is created when a horizontal line or large block of space is placed across the page. They tend to stop people; people think they have reached the end of the page, they tend not to scroll down. For example, visitors to the Franklin Institute web site may be misled because the search box is all the way on the bottom of the page below several horizontals (140 – 141).
The Franklin Institute home page – Retrieved from http://www2.fi.edu/
Effective use of active space is just one element in a series of several that Redish covers in her book.
Works Cited
American Academy of Family Physicians. FamilyDoctor.org. http://familydoctor.org. Web. 28 April 2010.
ESPN Internet Ventures. ESPN soccernet Europe US. http://soccernet.espn.go.com. Web. 28 April 2010.
The Franklin Institute. http://www2.fi.edu/. Web. 28 April 2010.
Godiva Chocolatier, Inc. Godiva Chocolatier. http://www.godiva.com. Web. 28 April 2010.
iVillage Ltd. iVillage.co.uk. http://www.ivillage.co.uk. Web. 28 April 2010.
Nokia Corp. Nokia Connecting People. http://www.nokiausa.com. Web. 28 April 2010.
Redish, Janice (Ginny). Letting Go of the Words: Writing Web Content that Works. Canada: Elsevier, 2007. Print.
School of American Ballet. The School of American Ballet at Lincoln Center. http://www.sab.org. Web. 28 April 2010.
No comments:
Post a Comment