Effective Use of Active Space on Web Pages

How do you feel when you open a web site and it’s a mass of clutter, or as Ginny Redish would say, a “wall of words” (Redish, 107)? I know I just want to close it and go on to one that has a cleaner look - one where I can easily find the information I want quickly and efficiently. In many cases, this is a response to a design that does not utilize space well.
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.

Writing for How People Read on the Web: Audience and Web Site Structure

How do you read on the web? I know I don’t read long paragraphs of text… 

Ginny Redish describes reading on the web as “skim and scan” (2). We go to the web to do a task or to get information, not to read for pleasure as we would a book.  If we don’t find what we want, we move on.

Two typical web users. Image from Redish p. 2.

So if you’re writing for the web, what constitutes good web writing? Ginny Redish answers this question in her book, Letting Go of the Words: Writing Web Content that Works (Canada: Elsevier, 2007). Her book is comprehensive with lots of examples, yet an easy read.  

She says, “Good web writing

·        is like a conversation

·        answers people’s questions

·        lets people grab and go” (4)

But, before we begin writing that content we need to understand our audience and the structure of websites …

In terms of our audience, we need to understand who will come to our site, and what tasks they will want to do or what information they will want to find.  And we need to write our content using their words.  To get this information it is best to actually watch, talk to and listen to our audience.   For example, we can watch and listen in your physical place of business, through a questionnaire, or interviews. We can also talk with other groups in our organization that are in contact with our audience like Marketing or Customer Service.  Other considerations about audience are their level of expertise, what technology they have available, what their state of mind is when they visit our site and what’s important to them.  As we gather this information it is helpful to create personas and scenarios that we can refer to throughout the website development or enhancement process. (Redish, pp. 11 – 27)

Now for the structure; Redish identifies three types of web pages - home pages, pathway pages and information pages. 

“Information-rich web sites set up pathways to the information through the home page and one or more layers of pathway (menu) pages.” Image from Redish p. 29.

First, home pages – in general, people read very little on the home page, “they want to grab the information they need and move on” (Ibid, 30).  But home pages serve very important functions. According to Redish, they identify who we are (via our logo, name and tag line) and what our site is about (for example, what business we’re in); they portray the site’s personality through visual design; they direct visitors to the information they seek (via short descriptions and links to that information); and if appropriate, they provide ways to start the task right away (for example, they provide a form). So home pages must be content-rich, but concise; they must live up to the title of the book by letting go of the words (Ibid, pp. 29 – 41).

Second, pathway pages – they too must live up to the title of the book.  “Busy site visitors are trying to get to the ‘good stuff’ – to whatever they are looking for – as quickly as possible. They don’t want to stop and read along the way. They are still navigating. They aren’t ‘there’ yet (Ibid, 53).”  The best pathway pages are like a table of contents, with short descriptions if appropriate.  They provide links.  It’s important that the pathway be quick and smooth, eliminating the need to think along the way. Many people will choose the first plausible link, so it’s also important that key information is on top (Ibid, 53 – 66).

And third, information pages - “[m]ost people come to the web for information, not for a complete document. They don’t want the user manual; they want instructions for the task they are doing. They don’t want the handbook; they want the answer to specific questions. They want usable, manageable pieces” (Ibid, 69).  To satisfy these needs, we need to break documents down into topics and subtopics, and provide premium navigation and search functionality. When deciding how much information to actually place on a page we need to think about our visitors; for example, how much do they need, will they print it, and how long will it take to download. Then we need to think about our message – even on information pages – visitors initially “skim and scan” – to determine if they’re in the right place.  So we must trim our message down, then trim down again, and perhaps again, to what is absolutely necessary. We need to write in “inverted pyramid style”; place the most essential information first, followed by less and less important information.  And then we need to break that information up into short paragraphs set off with headings, and incorporate bulleted lists where appropriate (Ibid, 93 – 107).

Now that we understand the structure of websites and our audience, we can begin writing content ‘that works’.  That’s a subject I will take up in future blogs.

Works Cited

Redish, Janice (Ginny). Letting Go of the Words: Writing Web Content that Works. Canada: Elsevier, 2007. Print.