PowerHA timeline of events

Background

IBM PowerHA Provide near-continuous application availability with advanced failure detection, failover and recovery capabilities. It ensures high availability, business continuity and disaster recovery.

It enables you to deploy an HA solution that addresses both storage and high availability requirements with one integrated configuration, which offers robust performance along with a simplified user interface.

My role

I worked as a hybrid of FED and UX designer for the project. My job for this project was to create interactive prototype and test them with clients over and over. It was a very iterative process until we found the solution we were looking for. I worked closely with the user researcher, visual designer and finally the development team to hand off the working prototype I created.

Design process for the timeline

Our customers requested a visual diagram that displays the overall ‘health’ of their whole environment over a time period. We discussed as a team and decided to create an interactive timeline. We designed an interactive timeline- representing all the events occurring in their environment over certain period of time.

I started exploring data visualization libraries including D3.js and viz.js along with some others and showed my team several examples to spark the ideas of what possible. I finally decided to use timeline of viz.js because it provided the planform we needed to develop. However, I knew I would have to customize the script significantly to meet our design and user experience needs.

We went through several iterations- based on customer feedback, I changed and modified the Viz.js script several times to fit the needs of the customers and the product

Iteration 1

This is the first prototype I built. Using the viz.js library and some CSS tricks I was able to quickly mockup an interactive prototype that our researcher could test out with our clients.

Very first concept we tested with users

Positive client feedback: Really easy to understand since all the event types have their own line.

Design challenge to overcome: 4 lines took a lot of vertical space and we needed to be able to fit other elements. Also we needed to find a way to combine the events that occurred in a short time frame when zoomed out. In this demo, they overlap which obscures the relevant data for our users.

Iteration 2

In this second prototype we tried to solve the vertical space issue by combining all the events in one single line. We also introduced different circle sizes to put emphasis on repeated events and the severity of any particular issue. We also introduced the zoom controller at bottom to draw attention to this important feature.

Second iteration based on user feedback

Positive client feedback: Clients liked the idea of bigger bubble size. They seemed to have no problem understanding different event type through different color.

Design challenge to overcome: Overlapping events remained a problem in this version.We thought of creating a bigger bubble when events overlap. But in a client environment, in a worst case scenario , there could be hundreds of events. Keeping the bubble sizes relative over such vast data spread was a big challenge. One the other hand, relying on color only to display different event created new concern about accessibility.

Iteration 3

Issues solved: We solved the overlapping of events issue in this iteration. We discussed as a team and came up with the idea of “higher priority events take over” So when two or more events combine, the combined event icon is derived from the most severe event. We also displayed combined events number above to clearly indicate how many events were combined.We redesigned the control buttons so that they are more compact to save space. We also introduced 4 different icon shape on top of color to overcome the accessibility issue. We moved the date and time information for the timeline below the events.

Third iteration based on user feedback

This was one of the most important feature requested by our customers. The library did not support this ‘grouping’ of events which they called clustering. Also we needed to do this while users zoom in or out.

Modifying the library: I assigned a specific class based on event type which appears without issues in non-cluster mode. I modified the `links.Timeline.ClusterGenerator.prototype.getClusters` method to add custom logic to identify which class it should add while in cluster mode.

The clustered event knows how many events it has. Then it loops through all the events to get the list of classNames (we use the className to identify what type of event it is).

This is how we prioritized event types, from most severe to least severe:
1. Error
2. Warning
3. Maintenance
4. Info/ok

Base on the priority, the cluster will show that specific style.

Positive client feedback: Clients really liked this version. They could easily distinguish between events by the new icons. They could understand the grouping of events better because of the numbers displayed on the top of combined events.

Design challenge to overcome: We still were not happy with the controls. Also moving the date and time information below did not really work for the whole environment.

Iteration 4

In this iteration we came up with a better navigation. I attached the timeline with demo events so that they can be interacted together by hovering and clicking either section. I made the whole timeline accessible by keyboard. Also added Japanese language support.

Fourth iteration based on user feedback

One of the requirements of the project was the capability of highlighting the timeline object/cluster when user clicks on it. Also, it needed to notify external function to do additional tasks like scroll to specific event details connect in the page related to the clicked event.

Other Modifications

Accessibility: I added following code so that timeline elements can be accessible via keyboard in `links.Timeline.ItemBox.prototype.updateDOM` function:

divDot.setAttribute(“tabindex”, 0); 
divDot.setAttribute(“role”, “button”);

Locale: viz.js comes with a locale feature. I had to use the predefined string constants along with the custom strings (‘AM’, ‘PM’, tooltip) and use those dynamically to make sure strings appears accordingly based on the browser locale.

Want to experience more? Check out this article in medium blog to get more information on my modification of scripting library to fit our need.

Special thanks to Alexander Wunschik from viz.js team for including my example in their showcase.