Web Flow Diagram

MIS 374
Rev 01
Web Flow Diagram
Introduction
A web flow diagram is a simple graphic aid to
communicate with a variety of users—from
managers who want only reports to operational
staff who need to know complex details for
getting all they want from a system. Web flow
diagrams are helpful when starting from scratch
(a rare blue sky situation) or determining
improvements for the next release of an existing
system (the most common project situation).
Description
A web flow diagram is a user-intuitive illustration
of the scope of a project, as shown in the simple
example below.
Purpose
Figure 1. Web Flow Diagram
A web flow diagram is an excellent aid for
discovering what your clients’ want and why.
Creating a simple web flow diagram of an
existing system helps your team find out what
web pages the user values most, where
problems are and where enhancements are
needed. Quick verbal discussions while clicking
through a site without any graphic aid risks
misunderstandings and omissions of key
information.
During the early Inception Phase activities, a
web flow diagram helps determine scope by
learning the symptoms and underlying problems
for a root cause analysis. For drill down work
during the build phases of development, working
with a web flow diagram aids detailed note
taking for design as well as analysis,
construction, and user reviews.
A web flow diagram aids in determining
functional requirements. Are all the categories
on the web flow diagram included on your
functional requirements summary Have you
covered all the requirements for meeting the
needs at the three organizational levels:
strategic, management, and operations
Creating a Web Flow Diagram
PowerPoint, Word, and Visio have easy draw
capabilities for creating a web flow diagram that
becomes part of your project charter and a team
planning aid. But don’t get fancy too soon.
Drawing out a proposed web flow on a
whiteboard for a discussion with different
stakeholders is a way to engage your users in a
collaborative design of what is wanted.
Photographing the whiteboard decisions with
your mobile phone allows you to have a quick
copy of your work that you can compare with the
work by other team members working with other
stakeholders to determine a final scope and
design.
Tips for Completeness
• Include a title that clearly indicates the
system under investigation, the client
organization, and whether the diagram is a
view of an existing system or a proposed
system.
• Use color or shading to indicate what
pages are included in the current project,
what already is complete, and what future
releases might be. In some situations,
dotted lines surrounding groups of pages
may be more effective than color.
• Use color to indicate team responsibilities
for a web flow diagram to aid project
planning and team coordination.
• Compare your web flow diagram to your
Root Cause Analysis, Functional
Requirements, Non-Functional
Requirements, Organizational Impact
©Eleanor Jordan/Sharon Dunn 2011. All rights reserved.
Web Flow Diagram
Page 1 of 2
www2.mmcombs.utexas.edu/courses/mis374/schedule.asp

MIS 374
Web Flow Diagram Rev 01
FAQs
Table, Stakeholders Roles and
Responsibilities Table, Use Case
diagrams, and process models. Have you
included all the functionality needed to
meet project goals for this project
Q1: What is the difference between a web flow
diagram and a site map Answer: We use the
term web flow diagram for graphics, like the one
in Figure 1. The IT profession uses the term “site
map” for both a graphic illustration of web pages
and an outline style site map--a list of web
pages or web page sections in outline format,
like the one in Figure 2.
Q2: What is the difference between a web flow
diagram and a menu hierarchy diagram or
chart Answer: The term menu hierarchy made
sense for pre-web systems. Thinking of system
navigation as a series of menus still makes
sense, so the term is interchangeable with web
flow diagram for MIS 374 projects. However,
web flow diagram and site map are more
common terms now.
Figure 2. HTML Site Map Example with 3 Levels
©Eleanor Jordan/Sharon Dunn 2011. All rights reserved.
Web Flow Diagram
Page 2 of 2
www2.mmcombs.utexas.edu/courses/mis374/schedule.asp