What is the best way to graphically represent page flow, as applicable to an action oriented web application?

Vihung picture Vihung · Oct 7, 2008 · Viewed 13.5k times · Source

What is the best way to graphically represent page flow, as applicable to an action oriented web application?

What model do you use to represent page flows (page flow diagrams) encompassing pages (views), user actions on those views (events) and processes?

These diagrams should act as a starting point for understanding between a business domain expert (say someone specifying an e-commerce web site), a technical analyst (someone responsible for designing the web application) and a web developer (someone responsible for implementing the solution)

I am not looking for a software solution to help me draw those diagrams, nor am I looking for a web flow framework that will let me implement these page flows in software.

I am, however looking for a good scheme for drawing out a page flow using pencil and paper

For example, a good answer could be as follows

  • Rectangle with label in CAPS represents page
  • Arrow with label in lowercase represents user action
  • Diamond with label in CAPS represents a process
  • Entry points always from the left (arrows come into a page from the left)
  • Exit points always from the right (arrows go out of a page to the right)

If there is an accepted standard, or if this problem space is actually a specific case of a larger problem space for which there exists a standard, please highlight this.

In the spirit of Stack Overflow, one scheme per answer please, and votes rather than duplicates

Answer

Harald Scheirich picture Harald Scheirich · Oct 7, 2008

I have always liked Jesse James Garret's Visual Language.