Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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

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

like image 825
Vihung Avatar asked Oct 07 '08 14:10

Vihung


2 Answers

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

like image 113
Harald Scheirich Avatar answered Sep 18 '22 12:09

Harald Scheirich


Check out nAML (.NET Application Modeling Language). It includes a Visio stencil and is very interesting amd expressive.

http://code.msdn.microsoft.com/naml

like image 20
rp. Avatar answered Sep 21 '22 12:09

rp.