Planning

Storyboarding

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 the 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.

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.

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. Web page organization can be approached through three different design structures: linear layout and hierarchical layout, or a combination of the two.

  • 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 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.
  • Extensive web sites may contain a combination of linear and hierarchical layouts.

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.

Now that you have finished your storyboarding diagram, thoroughly test the effectiveness of your site structure and navigation. Remember, you are testing from your users perspective and each page should include a descriptive title, the purpose of the page, and a description of the content. Once you are satisfied with how your site is organized you should begin wire framing.