Cloud Operations
Configure and manage Virtual Network Functions
based on topologies.
Management Console
This section is a drag and drop UI that allows the user to create topologies bringing different VNF (Virtual Network Functions) components.
The Problem
User needs to get access to each Virtual Network component and their Interfaces to investigate relevant information such as properties, be able to configure and reconfigure this component, get quantitative data related to the interfaces (ports) performance in real-time.
The UI provided popups where the user accessed this data through contextual menus with right mouse click for each component and on each blue circle which represent each interface obtaining several types of floating tables on the screen basically one different popup for each option on the menu.
With this data model, the information was presented in an intricate manner, with different content per element, layouts, labels, styles, and user flows in conclusion an inconsistent model where users get lost and confused about their data options also provoking to learn every time that the user was in that flow increasing the working memory and encoding data for long perception.
This is how the IA looked
List of Issues
Ambiguous path for each VNF component and interfaces
Different content per component and interfaces across components.
Wrong and inconsistent buttons location
No error messages
No clarity what info is readable and what is editable
UI elements without states
Wrong use of brand color
Contextual menu shows enable options that should be removed
The search box appears when is not needed
Inconsistent labels
Some fields are not needed
Counters with entries don't work. Do we need it?
Data Model Exploration
I started getting together with our network engineers and evaluating the data and how is it used, after that, I built a clear pattern unifying the content of Virtual Network components and their interfaces by three main tabs structure that all Virtual Network components shared and that they will become a rule (Properties tab only for readable information), (Configuration tab only for configurable elements), (Traffic Stats tab only tabular and readable information).
I chose a vertical model because the side-by-side table information with the topology will allow the entire visualization of both components and the user will be able to keep with a cleaner workflow of their cloud.
I included new metrics condensed in dropdowns also placeholders for another option in the future.
I defined style tables and fields, used the enrichment of the comparison column and rows with alignment and bold.
Access to the tables on the left by double click on an element.
I presented this model structure to the architects and engineers and the conclusion was that this layout needed to hold the actual data and their scalability. It has to be a data horizontal model to allow more data comparison and tabular view with vertical scroll.
Changing Model
I reviewed the data by printing all windows and defining what was necessary to keep and what not. Reorganized the content hierarchy by parents and child. Brainstormed this information with the engineers and we could clean the data also helped to refresh what was coming in the next releases.
I presented this model to the team and in conclusion in the future would not be capable to scale. It needed more consistency across the tabs. I introduced the keyboard controls.
Final Generic Pattern
After seven iterations I came up with the final model which allowed better scalability of data.
Consistent structure information per tab and final styles. I worked on the user interaction on tables displaying when is configurable and only readable. States of buttons and fields, I eliminate the counters and added a number summary on the top of tables among others improvements.
Key Learnings
The design principle of consistency was achieved by keeping the same information
the structure across tabs, user interaction, and cleaning unnecessary data.