The site architecture is the underlying structure of the site: how the content is organized, how information flows as visitors navigate the site, the various page types and how they interconnect, and so on.
Navigation and page flow
The key to effective navigation of a website is ease of use. Visitors should be able to find what they are looking for as painlessly as possible, and be able to navigate to other areas of the site without losing their bearings or being forced to backtrack.
Best practices include:
- Main navigation, also called top-level navigation – remains visible wherever visitors wander on the site, and appears in the same place on every page. Users can always jump to any other main area of the site with a single click.
- Secondary navigation – used to navigate within a main section. Consistent design and placement are important, so that visitors quickly learn how to get around the site.
- Enabling visitors to access any page from any other page within a click or two – drop-down menus are useful here.
- Using different colours and/or other visual cues for selected, mouseover, and non-active states.
Drop-down menus allow visitors to move around the site quickly and easily, don’t take up visual space when they aren’t needed, and make the information hierarchy clear. The page design should ensure the drop-down menus don’t overlay important text.
The navigation – particularly the secondary navigation – should accommodate expansion as pages are added. And if there will be versions of the site in other languages, the design may need to be forgiving. For example, French and Spanish versions of English original copy usually contain about 20% more characters.
An example of poor navigation
Keeping visitors from getting lost is sometimes easier said than done. For example, many sites enable visitors to click a link to fetch a PDF. However, if this PDF opens in the main window of the site, the navigation will disappear and there will be no obvious way for visitors to re-enter the site, short of using the browser’s Back button. This is poorly conceived navigation, but it is a fairly common shortcoming of many websites. Visitors should never have to rely on the browser’s Back button to find their way out of a dead end. The solution is simple – have the PDF open in a new window.
Content organization
Begin with a simple site map, and add to it until it reflects your client’s business’s goals. This site map will enable stakeholders to clearly understand what kinds of pages are required on the site and how they should interconnect.
The information hierarchy must be easily browsed, neither too shallow nor too deep. Keep the number of clicks required to access any content pages to a minimum. Whatever the site architecture, topical links can create an associative web that enables users to leap from branch to branch. But don’t overdo it; use links where needed, not where possible. Too many links peppered throughout a main text can become annoying and distracting.
Content management
If the client wants the ability to manage the site’s content in-house, a dynamic website controlled via a CMS is the way to go. A good CMS should be robust and at the same time very easy for non-technical staff to use. The client’s in-house resources should be able to not only update content, but also add internal and external links, create pop-ups, manage documents, swap images, create new pages based on a library of templates, and so on, all without recourse to programming know-how.
Wireframes
Once this site map identifies how many pages should exist and their overall relationship, the specifics of each page must also be understood and agreed upon. You may be tempted to jump directly from site map to graphic design, but it’s important to first clarify the intent and functional requirements of each page.
A wireframe specifies the position, size, and function of every element on a page. It shows how all the modules that make up a page fit together into a seamless visual presentation. The completed wireframe will provide a blueprint that clearly defines the scope of work ahead and helps the development team share tasks efficiently.
Wireframes have become standard tools in building websites because they’re useful to everyone: the design structure becomes goal-driven, the site becomes easier to build, and changes at this stage, before programming begins, are relatively easy and inexpensive.
It’s important that the client and the designer review and sign off on each wireframe. By the time the wireframe is complete, all required functionality should have been identified. If the programming budget and timeline have only been estimates up to this point, these can now be tied down based on the clear information that the wireframes provide. In fact, without such clarity, it is often impossible to provide accurate estimates of time and costs.
