information visualization optimization applied to perceptive process mining

8/10/2019 Information Visualization Optimization applied to Perceptive Process Mining

1/24

Applied to Perceptive Process Mining

Information VisualizationOptimization

Emiliano Max Martnez RiveraUI Design & DevelopmentUser Experience Department.


2/24

Check

TheoryHeuristicsGuidelinesBest Practices

User Research Accessibility

The Problem

The former Reflect solution needed to beupdated to tackle three main known issues:

Corporate rebranding. Technology step point. User experience research.


3/24

Improving the User Interface


4/24

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.


5/24


6/24

User Interface

Color scheme

Problem:Too much protagonism ofthe user interface over themodels and charts.

Solution: A lighter interface helps to get a clearerhierarchy setting the models and chartsin the foreground.


7/24

Improving the Process Model


8/24

Rendering and activities styling

Process Model

Solution: HTML5 CanvasContrast

Font size

Start/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.


9/24

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 foreach type of metriccontained within theactivity for easy

reading


10/24

Comparing models

Process Model

Problem: Not enough contrast ofcomparison model activitiesand flows (grey) from theactivities in both models.

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

keeping orange asthe color for basemodel only activities.


11/24

Comparison guidelines

Process Model


12/24

Improving Charts


13/24

Improve charts color

scheme

Charts

Problem:Some tones are blendedtogether and other stand toomuch from the rest.

Solution: Harmonic Tri-tonerepeatable combination.


14/24

Checking contrast for color blindness

Charts

Deuteranope Protanope Tritanope


15/24

Examples with the new color scheme

Charts


16/24


Charts


17/24


Charts


18/24


Charts


19/24

Improving Animations


20/24

Process Model

Animation

Problem: Animate without using Flash and apply thecorrect consistent styling.

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


21/24

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 rangeswith enough contrast and visibility


22/24

Charts

Taking color blindness in consideration

Animation

Deuteranope Protanope TritanopeRegular vision


23/24

Charts

Color permute combination for smaller ranges

Animation

Amount of data ranges

Solution: Ensuring good contrastand visibility even in smallnumber of data ranges


24/24

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 withthe same range axis makes itclearer and easy tounderstand to the user

information visualization optimization applied to perceptive process mining

Documents