Monday, September 24, 2007
Build A Better Web Site!
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 clíck. 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 hostíng 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 and 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, and 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 clíck 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 questíons; questíons such as:
What does a visitor do at this point? Where can a visitor go from here? Ignore questíons 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.
Increase Site Trust, Get The Privacy Seal!
'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 clíck. 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 hostíng 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 and 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, and 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 clíck 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 questíons; questíons such as:
What does a visitor do at this point? Where can a visitor go from here? Ignore questíons 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.
Increase Site Trust, Get The Privacy Seal!
