1

My boss has some content in a word document which looks like the following enter image description here

I need to move this content onto a website - specifically a responsive WordPress website. I am wondering if there is a better way to display this information so that it can be responsive.

I think he really likes the arrows because they indicate a flow from beginning to end.


I built a simple CSS mockup of what this could look like on the web, but I don't really like where it's going too much. It's not really going to work on smaller screens.

The essence of the content is Title / Caption groups. The titles need to be all next to each other, in the form of arrows.

Is there a better way of visualizing this?

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

1
3

I realise that you've already done something else, but one other approach you could take is to retain the "arrows" metaphor, but turn them so the arrows go down the screen instead of across.

Then you could retain the implied flow, but also have more width for the associated text. Excuse the hasty and hacky photoshop job (terrible text alignment, etc...), but something like this:

vertical flow steps

Of course, it's now slightly less well suited to a landscape-format screen, but the arrows could be made flatter and the text to the right widened out a little more to make it fit better... all of which could be done responsively in the browser. That approach would also lead to something that would also work well on a portrait-oriented phone display...

The approach you've already taken in your comment could also work with this approach, retaining the arrows when switching to the vertical view.

0

I like the arrows solution more. The second jsfiddle link you posted has lost some of its flow because you switched from arrows to boxes.

If you are worried about it looking good on mobile, simple create a break after the first 3 shapes. That way the first three (first notice of loss, assign/split, investigate/evaluate) are all on one row and the next three are on the second row.

0

Consider using a Sankey Diagram to help visualize workflow.

visualization of a security incident workflow

I've seen hierarchy charts used to depict workflow, but always thought they were missing something--nodes that can have two parents, for example. A Sankey diagram solves that problem, and provides a trivial way to introduce the concept of how much volume moves between "nodes". Also, by definition, a flowchart is "a type of diagram that represents a workflow or process". The Sankey diagram looks like it's flowing much more than a hierarchy chart.

For more information, check out David Pallmann's convincing case for using Sankey diagrams to visualize workflow.

I was able to create this workflow visualization in 10 minutes by forking the Highcharts's Sankey demo and customizing the series data to the following:

    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]
    ]
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.