How to Build an Outline for a New Website
When starting a new website design, you must balance everything you know about the target customers and their needs alongside the list of your client’s business requirements and start sketching an outline for the site. From this outline, you can build a sitemap (a flowchart-like diagram) that shows how you can organize all the content in the site.
Balancing business requirements with website user needs
Gathering business requirements is really an exercise of a client building a wish list for their new site. You create a list of business requirements by completing a bunch of “the site must have the ability to do X” statements. The client then rates these “ability to” statements from most to least important to determine priorities for the business.
Not all features and content described in the business requirements will make it into the first phase of the site — or ever at all. Not only do time and budget affect what makes the cut, but also the user’s needs now come into play as an additional filter. After thinking through various user scenarios, and the customer segments that the site must accommodate, go through your list of business requirements again and rate each idea according to where it fits in the user’s priorities. You may also find you need to add features and content to your list that customers expect to see.
Categorizing and prioritizing information for your website outline
After you have a prioritized list of user and business-driven content and features, translate them into an old-fashioned outline. This outline ultimately helps you build a sitemap.
The key to producing a successful outline is your ability to group similar items and features together. As you become more familiar with the list of content and features, a pattern begins to emerge. Some items go together quite easily, whereas other ideas don’t fit in at all.
Here are the steps for converting your prioritized requirements list into a workable outline:
Group ideas together.
Find features and content that seem similar and place them next to each other.
Think of each entry within a group as one web page of content.
Limit the number of groups to 5–7.
For usability reasons, identify no more than 5–7 main groups. If you find that difficult to do (as it may be with larger websites), you may identify up to three sets of groups, prioritized as primary, secondary, and tertiary sets.
Limit the depth of each group to just two levels.
Within each group, you will have a list of items. In some cases, you’ll have subcategories of a particular item. For usability reasons, limit yourself to just one additional level of subcategorization. If you get any deeper than this, and have subcategories of subcategories, you run into navigation design challenges. Following is an example of two levels of depth within the About the Company group. Notice the numbering scheme:
4. Group global features into their own set.
Establishing website navigation sets based on priority
The end goal of all this grouping and categorizing of information is to arrive at a navigation system for your entire website. These groups and categories are the main choices that appear on every page of your website. Since there can be so many choices for a user, the key is to group navigation sets and give them high, medium, and low visual treatments to help users digest the page and become oriented in your site.
If you just have one set groups, this is your “primary navigation” and your design life is a lot easier. If you have multiple sets of groups, however, you will need to determine which set will be your primary navigation. The other sets will be your secondary and tertiary navigation sets; each of those will get a different and lesser visual treatment as well as a different location on the interface.
For usability reasons, be careful not to have more than seven groups within your primary, secondary, and tertiary collections. Studies have shown that users have difficulty getting their brains around a site when they are bombarded with more than seven items to choose from in each navigation set.
It’s good practice to locate all the primary navigation elements together and give them the same visual treatment. This helps users differentiate each navigation set and understand their relative importance.