Website Creation: Planning a Website

3-d text forming the word WEBSITE with cranes building the blocks of the text.

© Lynn Villeneuve
Astrolabe Websites and eSolutions
lynn@astrolabewebsites.ca

All Rights Reserved




Table of Contents

Introduction

If You Fail to Plan, You Plan to Fail

Information Architecture (IA)

Content Inventory

Organizing the Website

Planning for Placing Content on Pages

The Organization of Web Pages

Additional Resources

Footnotes


Introduction

Most people would agree that a well-done website is of enormous value. A professional quality website can be a powerful tool for information-sharing, marketing, selling, communications and relationship building.  A website works for you 24 hours a day, seven days a week and 365 days a year and is accessible from around the world. Unlike printed media, a website allows you to make additions, changes and updates easily, quickly and inexpensively.  Few communications media can offer as much. If you are creating a new website or redeveloping an existing one, it makes sense, financially and otherwise, to do it well right from the start.

If You Fail to Plan, You Plan to Fail

There are five main stages in website development:

How long does it take to develop a website?

A number of factors influence the timeline. Experience has shown that it will take much longer than you expect. You should probably multiply your original estimate two to three times to arrive at a realistic figure. 

This paper deals with website planning.

Caught up in the enthusiasm of a new project, it’s easy to skip the planning phase or to pay only lip service to it, and jump to the design phase.  Everyone has ideas about how their website should look. It’s fun to think about colour and image and other creative features. I must confess that I approached my career in website development with a predisposition to design. Over the years, however, I have come to appreciate that a good plan is absolutely crucial to a website’s success.

The initial steps in planning are to determine who should be involved in the project and to form a project team, identifying the project leader and the roles of the different individuals on the team. You will also need to determine the budget for the project as well as a project schedule or timeline.

Information Architecture (IA)

“Some web sites "work" and some don't. Good web site consultants know that you can't just jump in and start writing HTML, the same way you can't build a house by just pouring a foundation and putting up some walls. You need to know who will be using the site, and what they'll be using it for. You need some idea of what you'd like to draw their attention to during their visit. Overall, you need a strong, cohesive vision for the site that makes it both distinctive and usable.” 1

How do you achieve this? Where do you start? You start with information architecture. “IA is the structural design of a website to facilitate task completion and intuitive access to content.” 2  The blueprint web developers use to build a website, information architecture includes:

You need to look at three main factors to develop effective information architecture:

Business Context

Business context is about your business or organization. What are the objectives, culture, opportunities and restraints, etc. of your organization and what are the specific objectives and goals of your organization in creating a website?
Review of internal documentation such as mission and vision statements, organizational charts, staff brainstorming sessions and stakeholder interviews will lead to a strong definition of the objectives and goals of your website.

Website Users

The heart of good information architecture is the people who use a website. Every decision about a website must be based on the users. To create an effective IA, you need to know and understand the audience at which you are aiming and reflect how they think about your organization and the subject with which you are dealing. You also need to know what your users expect from your website and what they want to do there. What are their skills, educational levels, languages, constraints etc? What do you expect from them and, conversely, what do they from you?

It’s surprising how little many businesses know about their users. Here are a few ways to learn more about your audience/users/clients:

Once you have completed your research, create in-depth profiles of each type of user that you have. Not only should you include general demographic details and other relevant characteristics, you should also develop lists of the tasks or actions each representative user might expect to do while on your website. Tasks might include any of the following (or others):

As you plan the content and organization of your website, you will need to return to the information about your users again and again in the decision-making process.

Content

To plan effectively, you will need to understand the quantity and quality of the content you have available for use on a new or redeveloped website. This includes written content, photos, graphics, illustrations, charts and audio and video content, etc. In addition to knowing what already exists and can be reused, you need to spend time determining what’s missing and what needs to be created. As well as reviewing what you learned when researching your users, brainstorming, with staff and volunteer website users, is also a very effective way to determine what’s missing or redundant and to come up with ideas for new material.

Content Inventory

To identify and keep track of existing content and ideas for new content, a common practice is to do a content inventory. Using a spread sheet, you will compile a listing of all existing web pages and potential new pages. The information for each page will include the following (and possibly more):

A content inventory will ensure that a new or redeveloped website, especially a large website, is created in a controlled, methodical way. It will also serve as the basis for a card sorting exercise and, farther in the future, as the basis for planning and controlling updates to individual pages.

Organizing the Website

Now that you know your website objectives and goals (Business Context), who your users are, what tasks they need to do on the website, and what the content will be, it’s time to start organizing the website. The big question is how to assemble all the information you have accumulated into a cohesive, accessible and usable website with “like” information organized into “logical chunks” within an intuitive navigation system. People think very differently so it can be a challenge to group and label information. The key is to look for trends in how people put information together and the words they use to label segments of information.

Card Sorting Exercise

A card sorting exercise is a simple, reliable and inexpensive way to generate information on how individuals group and label information. According to the book Information Architecture for the World Wide Web published by O’Reilly Media, Inc., card sorting “can provide insight into users’ mental models, illuminating the way that they often tacitly group, sort and label tasks and content within their own heads.”3 There are both open and closed card sorts.

Invite a number of individuals to participate in the exercise. Include a few staff members from your organization as well as a cross-sampling of your website users/clients.  Card sorts can be done by individuals or by groups. In the case of individuals, you will need at least seven to ten for a good sampling. In the case of groups, aim for five groups of three.  Volunteers should be asked to reserve approximately an hour for this activity. Should you wish to do a larger sampling or need to reach participants far afield, there are online card sorting programs (e.g. http://www.simplecardsort.com/) available at no or low cost.

To carry out a card sorting exercise you will need blank 3” x 5” index cards and a list of the major and secondary content topics from your content inventory.  For example, a major content category might be “Our Services” and a secondary content category might be “”Small Business Loans.”

Your job is to observe the exercise, responding to questions without leading the participants. You should also keep note of any interesting insights, comments and questions that may come up during the exercise.

When complete, each participant or group will have a number of columns of cards spread out on the table. Each column will radiate down from an index card labeled with a major content category.

Having gathered and recorded the data from all participants and reviewed the insights, comments or questions you noted during the exercise, your next task is to analyze the results. You are looking for broad patterns in the data — commonalities in the patterns and areas of major disagreement. By using the “wisdom of the crowd”, you should arrive, likely after considerable additional discussion, at a content organization that makes sense. This is your draft website navigation system.

Information Architecture Schematic

You should now record the organization of your major and secondary content categories in a draft schematic diagram or site map of your new information architecture.  

Classification Evaluation Technique

At this stage in website planning, it’s important to test your information architecture for usability before finalizing and implementing it. You need to know exactly how functional your IA is and how easily users are able to make their way around the website and to complete specific tasks or actions? A classification evaluation is another simple, reliable and inexpensive technique to implement.

In this exercise you will once again use index cards on which the major and secondary pages of your website (as per your draft site map schematic) have been labeled. The cards will be placed in organized piles, with all relevant secondary pages of a website section placed below the card labeled with the major content category. You will also need to consult and use the list of the tasks website users may undertake on your site (that you created earlier in the planning process). As previously indicated, such tasks may include:

Working with individual volunteers (four or five should be sufficient), ask each individual to perform a series of tasks using the organized index cards. Based on seeing only the top level pages of the website (represented by the top cards on each pile), the individual will have to choose a category and remove the top card to see the cards underneath. Does this choice allow the volunteer to complete the assigned task or has he or she made the wrong choice? By observing the success or failure of all the volunteers in completing the tasks on the first try, you will be able to further refine your information architecture as needed. Once you are happy with the modified Information Architecture, record it in a final site map diagram.

Planning for Placing Content on Pages

You now know what pages will be on your new website and how they will be organized in a navigation system. You also know what the content of each page will be, based on your content inventory document. Where to place the content on the page is another issue for consideration. It’s great to want to be innovative and creative in how you use and place content. However there are standard norms for content placement and studies have demonstrated that deviating too far from the norm detracts from the usability of a website.

The “Golden Triangle”

Eye-tracking studies have shown how people look at pages on a website. These studies clearly indicate the areas of a page that receive the most and least attention.  As expected, we scan pages from left to right as we would when reading a book (on websites with such languages as Arabic or Chinese, this pattern may differ). Unlike reading a book, studies have shown that certain areas are looked at more carefully than others.  Some experts refer to a golden triangle running from the top left to the top right and then diagonally to the bottom left of web pages. Others refer to an
F pattern. There is also the area above the fold, which is the part of a web page above the point where a user must scroll down to see further content. These are the areas to place your content of primary importance leaving the less important content for the right side and lower parts of the page.

The Organization of Web Pages

Each web page is made up of several distinct sections as follow:

Page components, such as logos, search boxes, sidebars, content blocks, etc., are placed within these sections. As previously mentioned, there is a standard norm for placement of the various page components/features and website visitors have come to expect these components to be placed in standard configurations. Deviating too far from these standards can detract from the usability of the web page — that is the ease with which to the website move around the page and the website as a whole.

Generally you will find page components located in the main sections as follow:
In the header you will usually find:

In the content area, you may find:

In the footer, you will generally find:

Wireframes

Once you have given thoughtful consideration to how you would like your web pages to be organized, you should document the layout in a wireframe. A wireframe is schematic diagram of the layout of a web page. It may be a rough, hand drawn diagram or a more polished version created in a software program like Adobe Photoshop or Adobe Illustrator or even in Microsoft Word.

In an ideal world, you would create a wireframe for each page of your website showing the specific content for each of those pages in a very detailed way. Depending upon the size of the website this may not be practical. At a minimum you should create wireframes for all pages with differing layouts. For example the home page may be different from a secondary page (second level in the navigation system) which may be different from a tertiary page (third level in the navigation system).

Here are two examples of wireframes:

Just as your information architecture schematic will guide your website developer in how to build your new website, these wireframes will guide your website designer in developing a visual interface design for your site. You may think that using wireframes will result in a website design that looks like every other website. This is not at all the case. A highly skilled, professional designer can create a unique design within your requirements.

If you wish to further guide your designer in designing a website that meets your needs and expectations, you may write a description of the look and feel you want to achieve in your website. For example, a children’s website may have a totally different look and feel than a dentist’s website which will be very different again from a bank’s website and so on. Look and feel includes the impression you want to create, colours, personality, typefaces, writing style, standards, etc.

Additional Resources

Accessibility and Usability: What are they and how do you achieve them? (Coming soon)

Questions to Ask at Kick-Off Meetings

Accessibility for Ontarians with Disabilities Act

Writing for the Web

Guide to Creating Website Information Architecture and Content




Footnotes

Information Architecture for the World Wide Web, (Second Edition) O’Reilly Media, Inc.

Information Architecture for the World Wide Web, (Second Edition) O’Reilly Media, Inc.

Information Architecture for the World Wide Web, (Second Edition) O’Reilly Media, Inc.