Quel est le meilleur moyen de représenter graphiquement le flux de page, tel qu’il est applicable à une application Web orientée vers l’action?

Question

Quel est le meilleur moyen de représenter graphiquement le flux de page, tel qu’il est applicable à une application Web orientée vers l’action?

Quel modèle utilisez-vous pour représenter les flux de page (diagrammes de flux de page) englobant les pages (vues), les actions de l'utilisateur sur ces vues (événements) et les processus?

Ces diagrammes doivent servir de point de départ pour la compréhension entre un expert du domaine commercial (par exemple, une personne spécifiant un site Web de commerce électronique), un analyste technique (responsable de la conception de l’application Web) et un développeur Web (responsable du mettre en œuvre la solution)

Je ne cherche pas de solution logicielle pour m'aider à dessiner ces diagrammes, pas plus que je ne cherche un cadre de flux Web qui me permette d'implémenter ces flux de pages dans un logiciel.

Je cherche cependant un bon schéma pour tracer un flux de pages à l'aide d'un crayon et d'un papier

Par exemple, une bonne réponse pourrait être la suivante

• Un rectangle avec une étiquette en majuscule représente la page
• La flèche avec étiquette en minuscule représente l'action de l'utilisateur
• Un diamant avec une étiquette en CAPS représente un processus
• Les points d’entrée toujours à gauche (les flèches apparaissent dans une page à partir de la gauche)
• Les points de sortie sont toujours à droite (les flèches sortent d'une page à droite)

S'il existe une norme acceptée ou si cet espace problématique est en fait un cas spécifique d'un espace problématique plus important pour lequel il existe une norme, veuillez mettre ceci en surbrillance.

Dans l’esprit de Stack Overflow, un schéma par réponse, merci de voter, plutôt que de dupliquer

Answer 1

J'ai toujours aimé le langage visuel de Jesse James Garret.

Answer 2

Découvrez nAML (.NET Application Modeling Language). Il comprend un pochoir Visio et est très intéressant et expressif.

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

Answer 3

J'ai constaté que la modification du diagramme d'états est très utile à cette fin. Je représente une ressource visuelle (page HTML ou jsp) en tant qu'état et les transitions sont les actions que l'utilisateur peut effectuer sur cette page.

J'introduis ensuite un autre symbole pour les actions entre les pages visuelles.

Les diagrammes d'états sont faciles à suivre pour les non-spécialistes et assez expressifs pour capturer des interactions complexes.

Answer 4

jetez un œil à yuml.me, car il est assez facile à utiliser et génère de jolies "malpropres". diagrammes