StoryboardingStoryboardingPlanning Your WebsitePlanning Your Website

What Do We Mean by a Web What Do We Mean by a Web Site Storyboard?Site Storyboard?

The most important part of designing a website is its organization. Storyboarding is the process of developing and diagramming a site structure that best matches your users’ needs. Storyboarding involves recording the description, purpose, and title of every page in your site and then linking these pages together to create a visual development model. This model diagrams how users will navigate to internal and external pages.

Chunking InformationChunking Information

Most web sites contain reference information that people seek in small units.  Users rarely read long contiguous passages of text from computer screens, and most people who are seeking a specific piece of information will be annoyed to have to scan long blocks of text or endless pages to find what they are after. 

Small "chunks" of related information are also easier to organize into modular units of information that all share a consistent organization scheme that can form the basis for hypertext links within your Web site.

"Small" can only be determined in the context of your presentation and what you expect of the audience.  Nevertheless, the concept of "storyboarding" is to organize the flow of the content of your web site so that your customers can navigate it easily so that they can find the information they are seeking and become regular customers of your e-business.

One to three (printed) pages of information seems about right for a discrete chunk of information on the web.

A storyboard allows you to see how your site navigation will work before production begins. This not only saves time and money, but also facilitates usability testing of site navigation and structure. The ultimate objective of storyboarding is to organize a site structure in a way that effectively guides users to the information they require and helps them accomplish their goals.

Storyboard ComponentsStoryboard Components

A well done web site storyboard has three parts: -A detailed structural outline (Site Map) -A quick sketch of the site’s structure (Flowchart) -A detailed sketch of each page (Page Layout)

Typically, you start storyboarding by organizing the content of your site. After you have created a list of the pages in your site and how they are organized, then start developing the design structure.

Site MapSite Map A detailed structural outline A detailed structural outline

HomepageAbout Us Privacy Policy Contact UsServices DeliveryClients Testimonies

A site map is usually an organized list of text links that can assist in navigating to a specific webpage quickly.

What about structure?What about structure?

Web page organization can be approached through several different design structures: linear, hierarchical, or webbed layout. A combination of these design schemes may also be used.

HierarchyHierarchy Any organization needs a hierarchy of importance, if only

to determine basic navigation structures for the user.  Most "chunks" of information can and should be ranked in importance, and organized by the degree of interrelationship among units.  Once you have determined a logical set of priorities, you can build a hierarchy from the most important or most general concepts, down to the most specific or optional topics. 

Hierarchical organizations are virtually a necessity on the Web because most home page-and-link schemes depend on hierarchies, moving from the most general overview of your site (your home page), down through submenus and content pages that become increasingly more specific.

Relationships Relationships

A logical site organization allows users to make

successful predictions about where to find things. Consistent methods of grouping, ordering,

labeling, and graphically arranging information allow users to extend their knowledge from pages they have visited to pages they are unfamiliar with.  If you mislead users with a structure that is not logical (or have no comprehensible structure at all), customers will be constantly frustrated by the difficulties of finding their way around.

Avoid Shallow HierarchiesAvoid Shallow Hierarchies

WWW sites with too shallow a link hierarchy depend on massive menu pages that over time devolve into confusing "laundry lists" of unrelated information, listed in no particular order.

Avoid Deep HierarchiesAvoid Deep Hierarchies

Menu schemes can also be too deep, burying information beneath too many layers of menus.

The goal is to produce a well-balanced hierarchical tree that facilitates quick access to information and helps users understand how you have organized things.

Linear LayoutLinear Layout

Linear layout is appropriate when you want the user to visit each page sequentially without skipping around. Computer based training, procedural task instructions, or a slide show are typical examples.

Hierarchical LayoutHierarchical Layout

Hierarchical layout is the most common way to structure your web documents. This layout usually begins with a home page and has many links that lead to other pages; these pages also have many links that lead to other pages. There is no limit to how many web pages you can have, however, you should limit your site to three or four levels of linked pages.

Hierarchical StructureHierarchical Structure

Webbed LayoutWebbed Layout

Weblike organizational structures pose few restrictions on the pattern of information use. In this structure the goal is often to mimic associative thought and the free flow of ideas, allowing users to follow their interests in a unique, heuristic, idiosyncratic pattern.

Webbed LayoutWebbed Layout

Storyboarding--Flowchart Storyboarding--Flowchart

Starting with the home page, organize the pages that link from the home page; then organize the pages that link from these pages. Continue this process until you have included all of the pages in your site. The resulting diagram should resemble a pyramidal structure of pages linked together by lines.

Flowchart Diagram Flowchart Diagram Hierarchical StructureHierarchical Structure

Homepage

About Us Services Clients

Privacy Policy

Contact Us Delivery Testimonies

A quick sketch of the site's structureA quick sketch of the site's structure

A detailed sketch of each pageA detailed sketch of each page

Each page is sketched in detail (by hand or with a page layout program of your choice) showing placement of all text, graphics and hyperlinks.

Logo

Menu

Page Banner

Copyright Information

Page

Picture of

Product On Sale

Logo Page Banner

Menu Page Info

Storyboarding your site is a very necessary part of planning a successful website.

The more preparations that are made prior to actual coding will inevitably save you time and frustration later.

Your customers will appreciate visiting a site they can easily navigate and will keep coming back.  If you create a site that cannot be easily navigated, your customers will become frustrated and move on to other sites that are more user friendly.