A Design-Driven Future for Enterprise Software — Part 2
Implementing a Clear Information Hierarchy
This is Part 2 of a series where we will take a close look at how Aize is bringing the value of a consumer-grade user experience to a heavily specialistic and technical domain, and making it one of our unique selling points. Read Part 1 here.
To recap, in Part 1 we introduced our vision to ultimately replace our legacy software Coabis — the industry standard in asset integrity management — with a cloud-based and future-ready offering. Though Coabis is a powerful enterprise application that has been built over 30 years and is loved by many, it lacks the ease of use of a modern, web-based platform.
In our previous article we discussed how, to begin with, we increased productivity by enabling users to find the data they need as quickly as possible. Throughout this process, we followed closely NNG’s 10 Usability Heuristics Applied to Complex Applications. Our next goal was establishing a consistent information hierarchy to make navigation easier and faster.
Flow from Data to Decision
A hierarchical visual information layout enables users to focus on what matters while navigating a complex user interface, easily understanding the importance of different page elements. This is crucial in enterprise software, where users follow nonlinear flows and do not always require the entire datasets and call-to-actions available on a system page. Information hierarchy was especially an issue in Coabis, where the interface was heavily cluttered, and most page elements lacked a clear order of importance.
To solve this, we took a step back and started a process of object mapping and task analysis across different pages, each dedicated to one key function. We investigated commonalities between how the different functions worked, and found recurring page patterns. As a result, we defined a set of generic hierarchical layout templates that could be implemented across different pages — bringing consistency, fostering familiarity, and reducing cognitive load.
Gestalt Theory in Practice
Psychology plays a key role in interaction design — first and foremost the Gestalt theory devised by psychologists Max Wertheimer, Kurt Koffka, and Wolfgang Kohler. These describe how the human mind sees groups of objects as a single entity rather than individual items. We leveraged the Gestalt Principle of Proximity to make it easier to scan through complex forms by creating groups of related elements, placing consequential groups one after another, and adding negative breathing space.
We also followed the Principle of Common Region to enclose related page elements in containers separated by borders or dividers. Placing objects and all their metadata within the same area enabled our users to perceive them as one entity. These self-enclosed regions typically contain a single dataset (in a table, list, and/or chart format), discovery patterns like search and sort, access to filtering, and the actions that users can perform — for example editing, or deleting.
Nonetheless, there are limitations to these two principles, and we found that one can be more useful than the other on a case-by-case basis. The repeated use of borders within borders can add unnecessary clutter in parent/child group scenarios. On the other hand, white space may cause the loss of perceived correlation and consequentiality between groups. We evaluated the impact of these in the design of each page, and strived to minimise visual complexity.
The Case for Contrast
We relied on colour contrast to clarify the action hierarchy. We evaluated the importance of each call-to-action and assigned it a style from Aize’s design system, to enable users to quickly scan the page and keep less frequently used functions in the background. We used a combination of four button styles: primary, outlined, default, and ghost (in order of hierarchical importance). These vary not only in background colour, but also in stroke and/or font weight — making them accessible.
Scale and size contrast also enabled us to define the importance of text elements. Once again, we applied Aize’s design system styles for typography. We emphasised overall page titles by using the H3 font size; on the other hand, we used H4 for the titles of the main body panels, and H5 for those of side panels or for additional subtitles. Finally, captions enabled us to introduce secondary text supporting and expanding on standard body text without distracting users.
Information hierarchy is just one of the many things we are working on at Aize to make our user experience best-in-class when it comes to enterprise applications. From simplified workflows to in-context help to smart error prevention, we are implementing many other patterns to save time, drive user familiarity, and increase efficiency. Stay tuned for more.
