web-dev-qa-db-fra.com

Visualisez un flux de travail simple - visualisation du contenu

Mon patron a du contenu dans un document Word qui ressemble à ce qui suit enter image description here

Je dois déplacer ce contenu sur un site Web - en particulier un site Web réactif WordPress. Je me demande s'il existe un meilleur moyen d'afficher ces informations afin qu'elles puissent être réactives.

Je pense qu'il aime vraiment les flèches car elles indiquent un flux du début à la fin.

J'ai construit une simple maquette CSS de ce à quoi cela pourrait ressembler sur le Web, mais je n'aime pas vraiment où cela va trop. Cela ne fonctionnera pas vraiment sur des écrans plus petits.

L'essence du contenu est constituée de groupes de titres/légendes. Les titres doivent être tous côte à côte, sous forme de flèches.

Existe-t-il une meilleure façon de visualiser cela?

https://jsfiddle.net/mouseoctopus/wtsj873m/

info-visualisationflowcharts
1
user1778606

Je me rends compte que vous avez déjà fait autre chose, mais une autre approche que vous pouvez adopter consiste à conserver la métaphore des "flèches", mais à les tourner de sorte que les flèches descendent sur l'écran au lieu de traverser.

Ensuite, vous pouvez conserver le flux implicite, mais également avoir plus de largeur pour le texte associé. Excusez le travail de Photoshop hâtif et hacky (terrible alignement du texte, etc ...), mais quelque chose comme ça:

vertical flow steps

Bien sûr, il est maintenant un peu moins bien adapté à un écran au format paysage, mais les flèches pourraient être rendues plus plates et le texte à droite s'élargir un peu plus pour mieux s'adapter ... tout cela pourrait être fait de manière réactive dans le navigateur. Cette approche conduirait également à quelque chose qui fonctionnerait également bien sur un écran de téléphone orienté portrait ...

L'approche que vous avez déjà adoptée dans votre commentaire pourrait également fonctionner avec cette approche, en conservant les flèches lors du passage à la vue verticale.

3
Adrian Long

J'aime plus la solution des flèches. Le deuxième lien jsfiddle que vous avez publié a perdu une partie de son flux car vous êtes passé des flèches aux cases.

Si vous avez peur qu'il soit beau sur mobile, créez simplement une pause après les 3 premières formes. De cette façon, les trois premiers (premier avis de perte, attribution/division, enquête/évaluation) sont tous sur une ligne et les trois suivants sont sur la deuxième ligne.

0
Ana Zdravic

Pensez à utiliser n diagramme de Sankey pour aider à visualiser le flux de travail.

visualization of a security incident workflow

J'ai vu des graphiques hiérarchiques utilisés pour décrire le flux de travail, mais j'ai toujours pensé qu'il leur manquait quelque chose - des nœuds qui peuvent avoir deux parents, par exemple. Un diagramme de Sankey résout ce problème, et fournit une manière triviale d'introduire le concept de la quantité de volume qui se déplace entre les "nœuds". De plus, par définition, n organigramme est "un type de diagramme qui représente un flux de travail ou un processus" . Le diagramme de Sankey semble couler beaucoup plus qu'un graphique hiérarchique.

Pour plus d'informations, consultez Cas convaincant de David Pallmann pour l'utilisation de diagrammes de Sankey pour visualiser le flux de travail .

J'ai pu créer cette visualisation de flux de travail en 10 minutes en forçant la démo Sankey de Highcharts et en personnalisant les données de la série comme suit:

    data: [
        ['Event Submission', 'Event Submission Close', 250],
        ['Event Submission', 'Create Incident', 750],
        ['Event Submission Close', 'Approve', 240],
        ['Event Submission Close', 'Reject', 10],
        ['Approve', 'After Action Review', 640],
        ['Create Incident', 'Contained', 400],
        ['Create Incident', 'Provide Analysis', 150],
        ['Create Incident', 'Incident Close', 125],
        ['Contained', 'Containment Approval', 370],
        ['Contained', 'Containment Rejection', 30],
        ['Incident Close', 'Approve', 110],
        ['Incident Close', 'Reject', 15],
        ['Containment Approval', 'Eradicated', 320],
        ['Containment Approval', 'Provide Analysis', 50],
        ['Eradicated', 'Eradication Approval', 315],
        ['Eradicated', 'Eradication Rejection', 5],
        ['Eradication Approval', 'Recovered', 315],
        ['Eradication Approval', 'Provide Analysis', 5],
        ['Recovered', 'Approve', 310],
        ['Recovered', 'Reject', 5]
    ]
0
Jeromy French