process mining information visualization optimization

Applied to Perceptive Process Mining

Information Visualization Optimization

Emiliano “Max” Martínez Rivera UI Design & Development

User Experience Department.

Check Theory

Heuristics Guidelines Best Practices

User Research Accessibility

The Problem

The former Reflect solution needed to be updated to tackle three main known issues: •Corporate rebranding.•Technology step point.•User experience research.

Improving the User Interface

User Interface

Corporate rebranding

Problem: The application didn’t feel like part of the Perceptive family

Solution: Applying the new logo consistent with the Perceptive product family.New log-in screen and new starting page.Moving the UI from blue to white and light grey.

User Interface

App first use

Problem: Scary help and support starting page.

Solution: Depending on the walked path of the user, the right starting page will show.Beginners will see easy steps.Users that have already used the tool will see the last document used.

User Interface

Color scheme

Problem: Too much protagonism of the user interface over the models and charts.

Solution: A lighter interface helps to get a clearer hierarchy setting the models and charts in the foreground.

Improving the Process Model

Rendering and activities styling

Process Model

Solution: HTML5 CanvasContrastFont sizeStart/End symbols

Problems: Flash as a rendering tool is no longer supported in some devices. Difficult to read. Start and End activities not clearly visible.

Flow connections and performance

Process Model

Problem: “Happy path” clearly visible but hard to read.Metrics bars not distinguishable one from the other.

Solution: An specific color for each type of metric contained within the activity for easy reading

Comparing models

Process Model

Problem: Not enough contrast of comparison model activities and flows (grey) from the activities in both models.

Solution: A light dashed grey border with no fill provides better contrast.

keeping orange as the color for base model only activities.

Comparison guidelines

Process Model

Improving Charts

Improve charts color scheme

Charts

Problem: Some tones are blended together and other stand too much from the rest.

Solution: Harmonic Tri-tone repeatable combination.

Checking contrast for color blindness

Charts

Deuteranope Protanope Tritanope

Examples with the new color scheme

Charts

Examples with the new color scheme

Charts

Examples with the new color scheme

Charts

Examples with the new color scheme

Charts

Improving Animations

Process Model

Animation

Problem: Animate without using Flash and apply the correct consistent styling.

Solution: Animation in HTML5 Canvas.Bigger circles for blobs of several cases

Charts Analyzing color scheme

Animation

Problem: Some colors are barely visible and some dark ones are too similar.

Solution: New color scheme for 20 +1 ranges with enough contrast and visibility

Charts Taking color blindness in consideration

Animation

Deuteranope Protanope TritanopeRegular vision

Charts Color permute combination for smaller ranges

Animation

Amount of data ranges

Solution: Ensuring good contrast and visibility even in small number of data ranges

Charts Combining types of information in the same ranges

Animation

Problem: Redundancy of information.Difficult to compare types.Not clear ranges of data.

Solution: Combining types of data with the same range axis makes it clearer and easy to understand to the user