Rocketface(R) Workshop - Website design for everyone. Webmaster's Tutorial, "How to Design a Website". Rocketface(R) Workshop Home




Tutorial navigation instructions

Organize Website
Main Topics
  • Organize Website
  • Website Structure
  • Website Homepage
  • Website Main Sections
  • Website Sections
  • Website Navigation
  • Linear Navigation
  • Database Navigation
  • Hierarchical Navigation
  • Website Theme
  • Website Content
  • Webpage Design
  • Titles Tags Links
  • Webpage Layout
  • Unbalanced Layout
  • Balanced Webpage
  • Focal Point
  • Webpage Hotspots
  • Webpage Design
  • Poor Webpage Layout
  • Balanced Layout
  • White Space
  • HTML Editors
  • Website Templates
  • Website Basic Layout
  • Website Basic Divisions


  • Linear Navigation
    Navigating through your website in a straight line

    Linear navigation in website design

    Linear navigation is used when you want the visitor to go from one step to another in a particular order. This form of website navigation is usually seen within a website's structure but seldom as a stand alone design. The idea behind linear navigation is that the visitor follows the pages in a predefined order or sequence determined by the website structure that you provide.

    This type of navigation is particularly usefull for tutorials like this one. But, it also has many other uses. Photo galleries lend themselves well to linear navigation as do shopping carts and check-out areas on commercial websites. See the linear navigation diagram below.

    Linear Navigation Diagram
    Linear navigation diagram

    Using linear navigation

    Any time that you want your visitor to follow a bread crumb trail through your site you can use linear navigation. This way you can direct your visitors step-by-step or page-by-page toward whatever goal you have in mind. Above is a graphic diagram of how a linear navigation scheme is linked. As you can see one page of content follows another by direct links. But, keep in mind that your visitor can opt-out at any time by using their browser buttons so keep each page brief and to the point.

    Arrange your webpage links so that they only permit movement in a straight line from one page to another. By doing this you are setting up your website basic layout in such a way as to compel the visitor to start at one end and continue to a conclusion. This is straight line (i.e. linear) navigation.

    Linear reciprocal navigation

    Sometimes you might want your visitor to view a thread of information in a linear fashion with the option of back clicking. This is where reciprocal linking works well. Below is a diagram that explains how this is done.

    Linear "reciprocal" Navigation Diagram
    Linear reciprocal navigation diagram

    Reciprocal navigation, just like linear navigation, follows a straight line through a website. But, it allows the visitor to move back and forth between a series of pages. Just setup your links with a start page an end page and links tying the pages together that lie between them. This will keep your visitor in one area of your website until they decide to opt out. Basically this is how a browser works. The back and forward buttons in the toolbar perform this reciprocal function. You can move forward or back in your browser window but always in a straight line.

    Linear navigation vs content

    Linear navigation is only a tool to help webmasters present their message, not an end in itself. It is the content that you provide to your visitors which is the key to designing a website that grows and expands across the internet.

    You can have the most innovative and original navigation model on the Web but, if your content is lacking and doesn't satisfy the people who visit your site it won't matter. Your visitors are looking for information and your website content must provide that information or your site will fail.

    How you present your ideas and message to the people who visit your website is in large part determined by your choice of navigation model. A concise and intuitive navigation scheme should be your goal. The next type of website navigation we will study is database navigation.


    For more see:



    BACK: Website Navigation NEXT: Database Navigation

    copyright© 2013
    Rocketface® Graphics
  • Analyze Website
  • Organize Website
  • Develop Website
  • Implement Website
  • Maintain Website
  • Article Archive