Skip navigation
garek007
garek007
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
16875 Views   17 Replies   Latest reply: Neil_Keller, Feb 3, 2009 6:24 AM
 
Replies
  • Neil_Keller
    Currently Being Moderated
    1. Neil_Keller,
    Jan 30, 2009 6:59 PM   in reply to garek007
    Report
    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
    2. (Nicholas_Spence),
    Jan 30, 2009 9:01 PM   in reply to garek007
    Report
    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:
  • Neil_Keller
    Currently Being Moderated
    3. Neil_Keller,
    Jan 31, 2009 6:32 AM   in reply to garek007
    Report
    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
    4. (Nicholas_Spence),
    Jan 31, 2009 9:20 AM   in reply to Neil_Keller
    Report
    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:
  • Don McCahill
    Currently Being Moderated
    5. Don McCahill,
    Feb 2, 2009 6:02 AM   in reply to garek007
    Report
    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:
  • Neil_Keller
    Currently Being Moderated
    6. Neil_Keller,
    Feb 2, 2009 6:06 AM   in reply to garek007
    Report
    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
    7. Jim or Marion Jordan,
    Feb 2, 2009 6:11 AM   in reply to garek007
    Report
    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:
  • Neil_Keller
    Currently Being Moderated
    8. Neil_Keller,
    Feb 2, 2009 7:23 AM   in reply to garek007
    Report
    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:
  • Neil_Keller
    Currently Being Moderated
    9. Neil_Keller,
    Feb 2, 2009 7:25 AM   in reply to garek007
    Report
    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:
  • garek007
    Currently Being Moderated
    10. garek007,
    Feb 2, 2009 9:08 AM   in reply to garek007
    Report
    I can build a website, but I have a real hard time with the initial organization. In other words, I tend to get the site going, show the client and say, ok think of what we might be missing, which is probably really bad. It opens me up to extra work that wasn't agreed upon, although I do usually set a very, very basic flowchart of the pages in the contract.

    But I wasn't sure how far people take this.... I see how Adobe's site could not be flowcharted, but I also see Neil's point in that a flowchart quicly conveys the structure of the site.

    I ended up doing mine in Illustrator and I had a coworker say, wow looks better than the site itself...

    I polished it quite a bit and drew icons for web page, web form, mail, email, etc. My thinking was that the client doesn't know me or the company I work for as a world class web designer and I felt they hadn't gotten anything from me but wireframes and sketches. I thought I should give them something that looked a little more 'finished' to keep their confidence in me going, if they hadn't already lost it. Does that make sense?
     
    |
    Mark as:
  • Neil_Keller
    Currently Being Moderated
    11. Neil_Keller,
    Feb 2, 2009 10:04 AM   in reply to garek007
    Report
    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:
  • Neil_Keller
    Currently Being Moderated
    12. Neil_Keller,
    Feb 2, 2009 10:12 AM   in reply to garek007
    Report
    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:
  • garek007
    Currently Being Moderated
    13. garek007,
    Feb 2, 2009 10:25 AM   in reply to garek007
    Report
    Thanks Neil, and all.

    I just wish they taught this somewhere, they didn't even touch on it in school and now I'm having to figure out where I can even learn it at all. If anyone knows of a good tutorial out there please forward it to me. Thanks.
     
    |
    Mark as:
  • Currently Being Moderated
    14. Jim or Marion Jordan,
    Feb 2, 2009 11:11 AM   in reply to garek007
    Report
    >I just wish they taught this somewhere

    http://www.webmonkey.com/tutorial/Information_Architecture_Tutorial
     
    |
    Mark as:
  • Currently Being Moderated
    15. (Nicholas_Spence),
    Feb 2, 2009 8:42 PM   in reply to garek007
    Report
    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:
  • Neil_Keller
    Currently Being Moderated
    16. Neil_Keller,
    Feb 3, 2009 6:24 AM   in reply to garek007
    Report
    Nicholas,

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

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

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

    Neil
     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)