17 Replies Latest reply: Feb 3, 2009 6:24 AM by Neil_Keller RSS

    flowchart examples and website navigation mockups

    garek007 Community Member
      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
        • 1. Re: flowchart examples and website navigation mockups
          Neil_Keller Community Member
          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
          • 2. Re: flowchart examples and website navigation mockups
            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]
            • 3. Re: flowchart examples and website navigation mockups
              Neil_Keller Community Member
              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
              • 4. Re: flowchart examples and website navigation mockups
                Community Member
                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.
                • 5. Re: flowchart examples and website navigation mockups
                  D. McCahill Community Member
                  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.
                  • 6. Re: flowchart examples and website navigation mockups
                    Neil_Keller Community Member
                    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
                    • 7. Re: flowchart examples and website navigation mockups
                      Community Member
                      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.
                      • 8. Re: flowchart examples and website navigation mockups
                        Neil_Keller Community Member
                        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
                        • 9. Re: flowchart examples and website navigation mockups
                          Neil_Keller Community Member
                          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
                          • 10. Re: flowchart examples and website navigation mockups
                            garek007 Community Member
                            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?
                            • 11. Re: flowchart examples and website navigation mockups
                              Neil_Keller Community Member
                              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
                              • 12. Re: flowchart examples and website navigation mockups
                                Neil_Keller Community Member
                                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
                                • 13. Re: flowchart examples and website navigation mockups
                                  garek007 Community Member
                                  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.
                                  • 14. Re: flowchart examples and website navigation mockups
                                    Community Member
                                    >I just wish they taught this somewhere

                                    http://www.webmonkey.com/tutorial/Information_Architecture_Tutorial
                                    • 15. Re: flowchart examples and website navigation mockups
                                      Community Member
                                      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
                                      • 16. Re: flowchart examples and website navigation mockups
                                        Neil_Keller Community Member
                                        Nicholas,

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

                                        Neil
                                        • 17. Re: flowchart examples and website navigation mockups
                                          Neil_Keller Community Member
                                          Nicholas,

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

                                          Neil