Mike Myles UX Design

Network Visualization

Interactive visualization tools to understand and manage hierarchical networks.

The Problem

In 2013, most Ericsson network management tools lacked useful visualizations. Interfaces were built primarily around lists, trees, and tables; along with some basic charts and graphs. While these text based views are essential for many use cases, our users wanted ways to see their network, and interact with it in a visual way. My years as a design lead on CAD systems at Autodesk equipped me with significant background in complex data visualization, in 3, and even 4 dimension (across time) to see past, present, and future system states.

After presenting an initial proposal to Didier Chincholle (Global UX Lead), and others in Ericsson's UX leadership team, he tasked me with developing the idea further. I eventually presented the results of this effort to CTO (at that time) Ulf Ewaldsson in our Stockholm headquarters. That effort resulted in the creation of a data visualization center of excellence within Ericsson UX.

Concept

The heart of the design proposal was the View Continuum. It's a conceptual model showing that visualizations do not stand alone, but should interact, complement, and link to one another in ways that support user workflows. Visualizations live across a spectrum of granularity; from showing macro structure, down to detail of individual items. Associated visualizations up and down the continuum reinforce context, and allow users to seamlessly explore, and interact with networks at whatever level of detail they need.

From this concept, I collaborated with a small team to flesh out the key visualizations, interaction patterns, and design language needed to support it. Below, I discuss details about a few of these.

Network Navigator

Network Navigator aims to show hierarchical relationships between physical and virtual network components. The team developed and tested a prototype interactive tree control and property panel to address this need. The tree component was implemented using the D3.js JavaScript library. This provided a highly interactive, and customizable experience, with engaging and purposeful animated transitions. The property panel let users view, and edit properties on selected tree nodes.

The Network Navigator tested well with users, letting them effectively explore and manipulate related entities. With it, users could quickly traverse the network, and drill into details of any individual node; all without loosing context of how the parts related to the whole. Such information is difficult to convey in text heavy tabular UIs.

Hierarchical Topology

While the Navigator did well showing hierarchical parent/child relationships, it had limitations for some use cases. We had a need to show both containment, and connected relationships in a conceptual network model.

For this, we created a Hierarchical Topology view. It's built around an interactive force-directed graph, that users can drill in and out of - to get varying levels of detail.

Items that are part of, or contained by another are shown inside the parent object. For example: An equipment rack contains shelves, which contains cards... and so on.

Connections are represented with lines (edges) in the graph. For instance: Data ports may be physically connected via a cable. Those ports can be in the same rack, across the room, across town, or beyond.

With those simple concepts, and the user interaction rules defining how a user navigates the model, we were able to represent extremely complex networks, consisting of potentially hundreds of thousands of nodes - and do so in a way that users could make use of the information.

I worked with the team to refine the design language of the topology view, to consistently blend its appearance, and user interactions with other Ericsson visualizations. Our prototypes were eventually handed off to Ericsson's central UI component team for further development.

Dashboards

Tying a range of related views together into a effective overview were our Dashboards. They offered users information they're interested in at a glance, with the ability to drill in, out, and across as needed, to achieve business goals.

We defined guidelines, patterns, and templates for dashboards; allowing for near infinite possibilities within a framework that supported consistent user experience, and brand identity.