How to Build a Better Website Without Building a Website

How to Build a Better Website Without Building a Website
By Richard D S Hill (c) 2007

The most important thing to consider, when first thinking
about any website, is the user. Like so much marketing,
websites are, unfortunately, too often developed 'inside
out' (company focused) rather than 'outside in' (customer
focused).

All website users have their own reasons and objectives for
visiting a site. No matter how targeted, any website has to
communicate with a wide range of individual users.

To be successful, therefore, every site has to give each and
every user a thorough but simple presentation of the site's
content so that the site achieves your objectives e.g.
registrations, leads, sales.

To do this successfully, users want:

Simple Navigation

Navigation that is clear and consistent.

Probably the worst issue is 'lost visitors' – those who are in
a maze and don't know where they are in the site.

The site should always allow users to easily return to the home
page and preferably get to any page with one click.

Studies have shown that users want to find things fast, and
this means that they prefer menus with intuitive ranking,
organization and multiple choices to many layers of simplified
menus. The menu links should be placed in a consistent position
on every page.

Clarity

Users do not appreciate an over-designed site.

A website should be consistent and predictable. For maximum
clarity, your site design should be built on a consistent
pattern of modular units that all share the same basic layout,
graphics etc.

Designing Websites That Meet Their Objectives

Everything above is pretty simple, but how do you ensure that
you can achieve it?

The answer is website architecture – an approach to the design
and content that brings together not just design and hosting but
all aspects of function, design, technical solutions and, most
importantly, usability.

The distinction may seem academic but imagine trying to publish
a magazine using just graphic design and printing whilst
ignoring content and editing. It just would not work yet that's
what too many people still try to do.

Website Architecture

Defining a website using web architecture requires:

- Site maps
- Flow charts
- Wireframes
- Storyboards
- Templates
- Style guide
- Prototypes

This planning saves you (the client) money. The better the site
map, flow chart, wireframe, storyboard, templates, style guide
and prototype the more time and money you save because it gives
the designer who has to do the graphics and the developer who
has to do the programming a blueprint.

We are constantly amazed that people who wouldn't think about
building a house, car, ship or whatever will still build a
website without an architectural plan.

The benefits include:

- Meeting business goals
- Improved usability
- Reducing unnecessary features
- Faster delivery

Site Maps

Many people are familiar with site maps on web sites which are
generally a cluster of links.

An architectural site map is more of a visual model (blueprint)
of the pages of a web site.

The representation helps everyone to understand what the site
is about and the links required as well as the different page
templates that will be needed.

Flow Charts

A flowchart is another pictorial or visual representation to
help visualize the content and find flaws in the process from
say merchandise selection to final payment.

It's a pictorial summary that shows with symbols and words the
steps, sequence, and relationship of the various operations
involved and how they are linked so that the flow of visitors
and information through the site is optimized.

Wireframes

Wireframes take their name from the skeletal wire structures
that underlie a sculpture. Without this foundation, there is no
support for the fleshing-out that creates the finished piece.

Wireframes are a basic visual guide to suggest the layout and
placement of fundamental design elements on any page. A
wireframe shows every click through possibility on your site.
It's a "text only" model to allow for the development of
variations before any expensive graphic design and programming,
but one that also helps to maintain design consistency
throughout the site.

Creating wireframes allows everyone on the client and developer
side to see the site and whether it's 'right' or needs changes
without expensive programming. The goal of a wireframe is to
ensure your visitors' needs will be met in the website. If you
meet their needs, you will meet your objectives.

To create a wireframe requires dialogue. You and your
developers talk, to translate your business successfully into
a website. Nobody knows your business better than you and your
developers should listen to ensure the resulting wireframe
accurately represents your business. You, however, must answer
the questions; questions such as:

- What does a visitor do at this point?
- Where can a visitor go from here?

and ignore questions about what your visitor sees at this
point. Sounds easy, but!

Storyboards

Storyboards were first used by Walt Disney to produce cartoons.
A storyboard is a "comic" produced to help everyone visualize
the scenes and find potential problems before they occur. When
creating a film, a storyboard provides a visual layout of events
as they are to be seen through the camera. In the case of a
website, it is the layout and sequence in which the user or
viewer sees the content or information.

However, the wireframe provides the outline for your
storyboard. Developers and designers don't need to work in a
vacuum - the wireframe guides every design, information
architecture, navigation, usability and content consideration.
Wireframes define "what is there" while the storyboards define
"how it looks".

Templates and Style Guide

Templates are standard layouts containing basic details of a
page type that separates the business (follow the $) logic from
the presentation (graphics etc) logic so that there can be
maximum flexibility in presentation while disrupting the
underlying business infrastructure as little as possible.

Style guides document the design requirements for a site. They
define font classes and other design conventions (line spacing,
font sizes, underlining, bullet types etc.) to be followed in
the Cascading Style Sheets (CSS) used to provide a library of
styles that are used in the various page types in a web site.

Prototypes

A prototype is working model that is not yet finished. It
demonstrates the major technical, design, and content features
of the site.

A prototype does not have the same testing and documentation as
the final product, but allows client and developers to make
sure, once again, that the final product works in the way that
is wanted and meets the business objectives.

Once you have built your virtual site, it's a lot quicker, easier
and cheaper to build the real one.

About The Author
================================================================
Richard Hill is a director of E-CRM Solutions and has spent many
years in senior direct and interactive marketing roles. E-CRM
provides EBusiness, ECommerce and Emarketing and ECRM.
http://www.e-crm.co.uk/profile/message170807.html
================================================================