Site Menu
|
Website Structure - Lesson 5Thus far you've established your e-business website's goals, the intended audience, what your competitors are doing and what kinds of content and functionality your website will have. It is now time to define the site's structure. One of the main purposes of website structure is to provide users with "a sense of place". They need to know where they are on the site, where they have been, and how to get to where they want to be. A good site structure combined with an effective visual design enables users to construct a mental map of your website. Website structure is the foundation on which you build your website and is the step that precedes building your website. Without it, your website will have no form or order. A well structured website is easy to use. A well-designed structure makes it easy to define a navigation system, and makes designing page layouts and templates very easy. You will find that when you have created a good website structure, the other aspects of building your website will fall into place more easily. MetaphorsYou are now going to go through a process called metaphor exploration. This process can help you create a vision of your website. Metaphor exploration is only an exercise but it will give you many good ideas for website design. Metaphors are not perfect but they can help users understand how to use and navigate a website. The three types of metaphors that you should use in website design are organisational metaphors, functional metaphors and visual metaphors.Organizational MetaphorsOrganizational metaphors deal with the existing structure of a group, system, or organization. For example if your e-business sells bicycles, your organisational metaphor can be a showroom where the items for sale are grouped logically by the type of product being sold. For example mountain bikes, race bikes, spare parts etc. Be careful not to develop your organisational metaphors solely as a replica of a real business.Functional MetaphorsFunctional metaphors relate tasks that you can perform on the website with tasks you can do in another environment. For example, you can cut copy and paste graphics in software programs as though you were using real scissors, paper and glue.Visual MetaphorsVisual metaphors are based on common graphic elements that you and I are familiar with. For example, if you are designing a music site that allows users to play songs, you might want to use the traditional "start," "stop," and "pause" buttons found on CD players.Start exploring metaphors by brainstorming ideas with your team. Review and evaluate each metaphor. Then try to map out the major sections of the website. Create the major headings that your website will have by relating elements of your content list to different metaphors. The overall site might not be explainable as a metaphor, but perhaps the navigation system (or smaller subsets of the site) can be. Site Structure ListingYou can now create a text-based, hierarchical map of your website called the site structure listing. The roots of the site structure listing are the major section headings of your website that you have just created. Based on the groupings from your content list and functional requirements, create subsections for these roots. Your site structure listing should have the following form:Section 1
Section 1.2
Section 2.2
Section 2.2.2 Section 2.2.3 Section 2.4 Architectural BlueprintsSome may find it hard to look at a site structure listing and translate it to the way the website will work. Architectural blueprints can help you visualise your website.Architectural blueprints are visual representations of the site structure. They are diagrams showing how elements of the site are grouped and how they link or relate to one another. Create a legend that defines how links, page components, pages, groups of pages and on and off-site pages can be represented in your blueprints. You might want to distinguish among parts of the site that perform a function or transaction, parts of the site that are generated dynamically, and pages that are made up of text. If your site is large, you may have to make several architectural blueprints. Start with a general overview of the site and then create blueprints that describe the finer details of your website. NavigationDefining the navigation system of the website will describe how will users will use the site and how will they get from one place on the website to another. A good navigation system will ensure that they are not lost when navigating through your website.Global NavigationThe global navigation system is a link-based navigational tool that appears on every page of the site. It enables users to move quickly between sections or pages of the website. The major sections of your site structure listing should be included in your global navigation system. Try to limit the number of global navigation elements by grouping them as broadly as possible. Ideally allow five to seven elements in your global navigation. A good idea is to incorporate your company's logo or branding into the global navigation as the link to your website's homepage.Local NavigationLocal navigation is navigating through smaller subsections of your website. For example it can be in the form of a list of topics, menus or choices, or it may be any list of related items that make up your website.Be thorough when developing navigation systems. Document both the global and local navigation systems that you develop for your e-business website. The Design DocumentNow that you have developed metaphors, your website's structure listing, architectural blueprints, and the navigation for your website, you are ready to create the next chapter in your design document. Title this chapter Site Structure. Firstly write a summary about the rationale behind your website's structure. Add the site structure listing document. If the site structure listing is too long, add a shortened form and include the rest as an appendix. You can now include the architectural blueprints and the global and local navigation schemes. As always, publish these results so that everyone in your team can see them.This section of your design document should contain the following: |