Reputation: 13397

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.

Upvotes: 9

Answers (4)

lsaffie

Reputation: 1814

take a look at yuml.me as this is pretty easy to use and generates nice "scruffy" diagrams

Upvotes: 0

Vincent Ramdhanie

Reputation: 103135

I have found that modifying the state chart diagram is most useful for this purpose. I represent a visual resource (html or jsp page) as a state and the transitions are the actions that the user can perform on that page.

I then introduce another symbol for the actions between the visual pages.

State diagrams are easy for the non-technical person to follow and expressive enough to capture some complex interactions.

Upvotes: 1