Friday, August 10, 2007

Website Flowcharts and Webmaps

Planning a website’s structure is as important as the design of the site. It is also the single thing that can separate your business from countless others. Just think about it; how many times have you been to a site and couldn’t get to where you wanted to go? It happens all the time and since websites are a dime-a-dozen a user will gladly take their business somewhere else.

In fact, if a user spends about 7 seconds without finding what they were looking for on a new website, they will leave and find another website. This means there is little room to be inefficient in the layout of your website.

The best way I have found to plan a new website would be to make a list of all the pages and functionality that you wish the website to have. Once you have this list you can start categorizing it to combine and reduce pages that are related and figure out what your primary topics/links will be.

Once you have a list of your pages, it is time to see how they will connect to one another. Using a program like Microsoft Visio will give you the capability to produce flowcharts and webmaps very quickly. Below is a basic example of a website flowchart for a portion of a Banking website.


The diagram shows just a portion of what a whole banking site would be, but you can imagine this expanding into several areas that are all interconnected. Some websites may only have a few pages and some may have hundreds. The more pages you have the more important is it to map it out and see how a user can go travel through the site before you build it and find your most important page is hidden.

Flowcharts and webmaps also give you a good idea of how “deep” your website content is. Website depth is a way of saying how many layers (pages) a user must click through to get to their desired area. If a user has to drill down to more than three times you may want to see if there is a better way of structuring the website. If you must have more than three layers, using breadcrumbs is a great way to show a user exactly where they are on a website. Breadcrumbs are shown below.


I sometimes get the question, “how much time should we spend on planning a website?” There is no real answer to that question, some sites only take about 5% of the total production time and some take 40%. The larger and more complex the website is the more time you should spend on planning, it will help reduce your production time and the amount of rework you may have to do.

No comments: