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
