¿Cuál es la mejor manera de representar gráficamente el flujo de páginas, según corresponda a una aplicación web orientada a la acción?

Question

¿Cuál es la mejor manera de representar gráficamente el flujo de páginas, según corresponda a una aplicación web orientada a la acción?

¿Qué modelo utiliza para representar los flujos de página (diagramas de flujo de página) que abarca páginas (vistas), las acciones del usuario en esas vistas (eventos) y procesos?

Estos diagramas deben actuar como un punto de partida para la comprensión entre un experto en el dominio de negocios (por ejemplo, alguien que especifica un sitio web de comercio electrónico), un analista técnico (alguien responsable de diseñar la aplicación web) y un desarrollador web (alguien responsable de implementando la solución)

No estoy buscando una solución de software que me ayude a dibujar esos diagramas, ni estoy buscando un marco de flujo web que me permita implementar estos flujos de páginas en el software.

Sin embargo, estoy buscando un buen esquema para dibujar un flujo de página con lápiz y papel

Por ejemplo, una buena respuesta podría ser la siguiente

• El rectángulo con la etiqueta en CAPS representa la página
• La flecha con etiqueta en minúscula representa la acción del usuario
• El diamante con etiqueta en CAPS representa un proceso
• Puntos de entrada siempre desde la izquierda (las flechas entran en una página desde la izquierda)
• Salir de los puntos siempre desde la derecha (las flechas salen de una página a la derecha)

Si hay un estándar aceptado, o si este espacio problemático es en realidad un caso específico de un espacio problemático mayor para el cual existe un estándar, resalte este.

En el espíritu de Stack Overflow, un esquema por respuesta, por favor, y vota en lugar de duplicar

Answer 1

Siempre me ha gustado Visual Language de Jesse James Garret.

Answer 2

Echa un vistazo a nAML (.NET Application Modeling Language). Incluye una plantilla de Visio y es muy interesante y expresivo.

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

Answer 3

He encontrado que modificar el diagrama de estado es más útil para este propósito. Represento un recurso visual (página html o jsp) como estado y las transiciones son las acciones que el usuario puede realizar en esa página.

Luego introduzco otro símbolo para las acciones entre las páginas visuales.

Los diagramas de estado son fáciles de seguir para la persona no técnica y lo suficientemente expresivos como para capturar algunas interacciones complejas.

Answer 4

eche un vistazo a yuml.me, ya que es bastante fácil de usar y genera un bonito & scruffy " diagramas