Skip navigation
Currently Being Moderated

flowchart examples and website navigation mockups

Jan 30, 2009 3:03 PM

Hi,

I've always thrown together web navigation but i've never used anything other than Illustrator for it, and to be honest, I'm not sure I'm even doing it right.

Can anyone point me to a navigation flowchart that was done properly and maybe presented to a client?

Also, do they need to be slick or will simple boxes suffice?

Thanks,
Stan
 
Replies
  • Currently Being Moderated
    Jan 30, 2009 6:59 PM   in reply to garek007
    stan,

    For some purposes, a neat pencil and paper do a pretty decent job of laying out the site. If you need to polish it up more, sure, Illustrator and some color will work.

    Neil
     
    |
    Mark as:
  • Currently Being Moderated
    Jan 30, 2009 9:01 PM   in reply to garek007
    For what it's worth, we use to do that, but now do it on an Excel
    spreadsheet as page lists. For example,

    Home
    Section 1
    Subsection A
    Subsection B
    Section 2
    Subsection A

    etc.

    I came from an old-school programming background, so naturally went to
    flowcharting. However, I found that I had so many decision trees and lines
    running around, it was about impossible to have anything a client could
    understand--heck, I couldn't even follow it :-)

    ~Nick

    [autoquote deleted]
     
    |
    Mark as:
  • Currently Being Moderated
    Jan 31, 2009 6:32 AM   in reply to garek007
    Nicolas,

    I think that Excel spreadsheets can certainly be used hand-in-hand with neat hand-drawn or Illustrator flow charts to document the details of many sections/pages that just can't be shoehorned into the limited space a flow chart has.

    But flowcharts (to my visual/art background way of thinking) help you get the overall picture a lot quicker.

    Neil
     
    |
    Mark as:
  • Currently Being Moderated
    Jan 31, 2009 9:20 AM   in reply to Neil_Keller
    You're probably right. Maybe I'll start using both.

    ~Nick

    > But flowcharts (to my visual/art background way of thinking) help you get
    > the overall picture a lot quicker.
     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2009 6:02 AM   in reply to garek007
    The only problem I have with flow charts is that they tend to assume a certain path through a website. In a well designed site, the only page you can be sure of is the first one. After that, it is the viewer who decided where and what comes next. Linear type site are seldom as effective as web-based sites where you can go anywhere from anywhere else.
     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2009 6:06 AM   in reply to garek007
    Don,
    >The only problem I have with flow charts is that they tend to assume a certain path through a website.

    I disagree. Like a subway or city bus map, a flow chart can show multiple routes and connections.

    Neil
     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2009 6:11 AM   in reply to garek007
    I'm of the same thought as Don. For example, the Adobe site could not be created with a flowchart as there are too many interconnected elements. It would be a mess of spaghetti. The old idea of a site tree has been tossed out with the advent of data-driven sites. However, when a client is set on a well-defined structure, I like to ask them to prepare an outline of what they want to communicate (like post #2) or have them construct all the copy in a program like TreePad (free versions for Windows/Mac/Linux) that can let them (or you) re-order nodes on a whim.
     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2009 7:23 AM   in reply to garek007
    Depending upon the complexity of the site, primary navigation can still be shown with a flow chart. Secondary and tertiary navigation can be done in alternate colors or on overlays.

    Obviously for more complex sites, there is a limit on how much detail can be shown and it would be largely unproductive to attempt to show all possible paths in a single diagram -- although diagramming specific sections or subsections to understand how they work is not without merit.

    But the basic/overall structure of the site can still be shown and understood this way, and work hand-in-hand with other methods. Spreadsheets are fine, but are not a visual way to gain a quick grasp of what is to be built.

    One way to think of this is like creating plans for a house. Everything does not appear in one drawing. You have an overall floor plan, elevations, and isometrics to which everything else is keyed, such as the detail drawings; HVAC, electric, plumbing, etc. systems drawings; shop drawings; and parts lists and assembly instructions.

    Neil
     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2009 7:25 AM   in reply to garek007
    Depending upon the complexity of the site, primary navigation can still be shown with a flow chart. Secondary and tertiary navigation can even be done in alternate colors or on overlays.

    Obviously for more complex sites, there is a limit on how much detail can be shown and it would be largely unproductive to attempt to show all possible paths in a single diagram or by diagram alone. But a general diagram, plus specific sections or subsections to understand how they work and interrelate is not without merit.

    The basic/overall structure of the site can still be shown and quickly understood this way, and can and should work hand-in-hand with other methods. Likewise, spreadsheets are fine for the details, but by themselves are not a visual way to gain a quick grasp of what is to be built.

    One way to think of this is like creating plans for a house. Everything does not appear in one drawing. You have an overall floor plan, elevations, sections and isometrics to which everything else is keyed, such as the detail drawings; framing, HVAC, electric, and plumbing systems drawings; shop drawings; and parts lists and assembly instructions.

    Neil
     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2009 10:04 AM   in reply to garek007
    Stan,

    The presentation bells and whistles are fine to win over confidence. But the actual structure of the site is what counts. So -- even if it is just pencil sketches and notes for yourself -- you need to research what components are needed, how best to organize them, and what is the most efficient way to implement them within a working Website.

    And even the Adobe site can be diagrammed for basic navigation. For me it would clearly show me how the site is to be used by visitors. The fine details of what's where can be in a spreadsheet and/or in secondary diagrams.

    Neil
     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2009 10:12 AM   in reply to garek007
    Stan,
    >I can build a website, but I have a real hard time with the initial organization.

    Then you are a definite candidate to do a flowchart for basic organization to best visualize an overview of the job ahead. Otherwise you are likely to have a mess: missed pages/content that should be included, dead ends, and missing necessary quick links to other pages. And you want to sure that you are designing something that is expandable in the future without tearing apart the whole site.

    The bells and whistles presentation is fine to gain client confidence. But don't lie to yourself. Beyond an attractive presentation and sample layout pages, the actual structure of the site and its implementation is what counts. So -- even if it is just pencil sketches and notes for yourself -- you need to clearly see what components are needed, how best to organize them, and what is the most efficient way to implement them within a working Website.

    And even the Adobe site can be diagrammed for basic navigation. If the entire human genome can be diagrammed, so can a Website. For me it would clearly show me how the site is to be used by visitors and by site administrators. The fine details of what's where and how it's implemented can be in a spreadsheet and/or in supplementary diagrams (depending upon site complexity).

    Neil
     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2009 11:11 AM   in reply to garek007
    >I just wish they taught this somewhere

    http://www.webmonkey.com/tutorial/Information_Architecture_Tutorial
     
    |
    Mark as:
  • Currently Being Moderated
    Feb 2, 2009 8:42 PM   in reply to garek007
    I am confused. When all, or most of the pages, have links through drop-downs
    to virtually every other page in the site, what exactly do you flowchart? I
    mean, how do you do that--every page would have a zillion decision trees
    with flows going to every other page.

    Maybe I am thinking of flowcharting the way I learned it in 1972 while
    taking programming classes where we were required to turn in a flowchart
    before starting coding.

    ~Nick
     
    |
    Mark as:
  • Currently Being Moderated
    Feb 3, 2009 6:24 AM   in reply to garek007
    Nicholas,

    And I'm thinking of flowcharting the way I described plan development for constructing a building in an earlier post.

    Neil
     
    |
    Mark as:
  • Currently Being Moderated
    Feb 3, 2009 6:24 AM   in reply to garek007
    Nicholas,

    And I'm thinking of flowcharting the way I described plans for constructing a building in an earlier post.

    Neil
     
    |
    Mark as:

More Like This

  • Retrieving data ...

Bookmarked By (0)