‘Hierarchy Selector’ Design Pattern
Role Sr. User Experience Designer
Story
This user story requires a design pattern that enables our users to navigate through a deep tree data structure.
PROBLEM
The need for this enhancement is driven by customer feedback, and reported pain points on the existing problem. Our users complaint about how difficult it is for them to get to an item when it is under multiple levels deep. They needed a way or a control to get to the item quickly, and easily.
solution
As a solution, we created a hierarchy selector control. It allows our users to navigate through a tree data structure which could be multiple levels deep to get to an item, quickly and easily.
Process
Like any other HPE design patterns (aka Atlas), I wanted to design a control that is familiar with a proven user interface experience, and also not requiring the user having to learn a new interface. To add, I am aware about not over engineering something when it does not call for it. Therefore, keeping the controls simple, consistent to the standard of the HPE design system and is easy to use was the main goal for this component.
Design iterations were made based on user and team feedbacks. We tested it with internal set of users to ensure our user needs are met and then we publish and made the control available for all product teams to use.
DESIGN
The below visual is the final design of the control with a real world use case, e.g., user to select a centralized location to manage virtual machines and hosts centrally. For this design, I referenced and used an existing design pattern control called the Association Selector. This control have just the right functionality, scalability and interface design, e.g., a search and selection interface, the new Hierarchy Selector control needed.
The result, a control with a familiar interface which makes for a useful, efficient, accessible design and is proven to be a joy to use.
Note that this is a simplified design specification version. The original version has more details, i.e., navigation examples, UI interaction behavior models and user task flow examples.
Details
The control features some new elements. It includes the following below,…
2 panel treatment. An interface design to showing how everything interconnects.
Breadcrumb. This will enable the user to find its way forward and backwards.
Search view. This will enable the user to quickly go to, or select to add an item.
Web accessibility. Yes, this is important.
Breadcrumb
As the user navigates further, there will be a breadcrumb element as guidance shown to the user. This will enable the user to track back to the previous levels when needed. The user too can use the QWERTY left/right arrow buttons to navigate forward and backwards through the level.
Search View
Search functionality is supported on this single-selection control. It provides some API calls for getting and specifying a selection for Add or Edit type of actions. This will enable the user to quickly go to, or add an item.
