Upload
quotmaxquot-martinez-rivera
View
408
Download
1
Embed Size (px)
DESCRIPTION
The former Reflect solution needed to be updated to tackle three main known issues: Corporate rebranding. Technology step point. User experience research.
Citation preview
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