Better UX for complex data-gathering systems

Making massive processes simple with “The Data Blueprint”

“Forms”

“Tables”

“Graphical reports”

These 3 basic components have enabled data input, data management, and ultimately data consumption since the 1980s. Despite advances in technology, these components remain the cornerstone of data processing today. Data is collected, analyzed, and visualized using them. Despite their long existence, why do so many data management solutions fail to clearly connect these components for users?

In this article I describe a systematic approach to designing complex data management systems based on a set of rules I call “The Data Blueprint”: how it came to be, the specifics of each layer, and its future with emerging technologies like artificial intelligence and chat interfaces.

Where did it begin?

I was working on a data-gathering application for a client. The problem they dealt with was complex information managed in isolation by diverse teams. A joint approach was missing to add, manage, and analyze information.

Their design system of course contained form elements, tables, and integration for graphical reports elements. As far as data input, data management, and reporting are concerned, the challenge was to integrate the elements coherently.

What is the Data Blueprint?

Based on UX research regarding existing approaches, we developed the following blueprint. The blueprint ensures coherence and consistency in navigation, making it easier for users to collect, analyze, and visualize data effectively.

To access data, users follow the following steps in chronological order or progress in different steps, depending on what the user is trying to do:

1.- Filtering and Sorting on a Table:

The user journey begins with empowering users to filter and sort data effortlessly from a table. This functionality ensures that users can quickly locate the information they need, saving time and minimizing frustration. The intuitive design of the table interface allows seamless navigation, setting the stage for a user-centric data management experience.

UX Considerations:

• Default sorting: Once a user is working on repetitive tasks or needs to know the next steps based on the order of data points, default sorting will save them valuable time.
• Columns are shown: A proper definition of a column allows users to differentiate data points and find the required information easily. Find a balance between too many and too little — and remember the order in which they are set.
• Filter definition: A method of grouping data points so that the most relevant information is displayed.
• Search: Allows the display of data points based on key words, saving time and reducing frustration by eliminating the need to browse through entire tables or lists. Search capabilities also enhance data accessibility, as users can locate relevant information regardless of its order or location in the table.
• Quick actions: define which actions can be done on a high level without navigating deeper.
• Artificial intelligence suggestions: Predict the next action of users based on their previous actions.

2.- Navigating to a detail view:

Upon identifying the data point of interest, the user will be taken to a dedicated page for each entity. This gives users a deeper understanding of the data they’re working with by digging deeper into the details. “The Data Blueprint” emphasizes user empowerment through navigation.

UX Considerations:

• Context: It is possible to arrive at the same detail view through different approaches as the system becomes more complex. Context on data point location will allow. User support can be provided by breadcrumbs from a parent data point.
• Layout and Hierarchy: Identify each field and arrange the information in a way that understands the user. Prioritize the information that is most relevant to the user.
• Way to go back: It is important to remember that going back in an application, even if it is browser-based, can mean something completely different.

3.- Creating and Modifying Data Point Information:

By providing dedicated form pages for editing and validating data points, the framework not only allows users to consume data but also encourages them to actively participate in it. In the framework, data validation ensures that users’ data is accurate, reliable, and consistent. The framework promotes data integrity and prevents errors or inconsistencies in the database by providing dedicated form pages for editing information about data points.

UX Considerations:

• Validation: Ensure data integrity is maintained and business logic is approved.
• Permissions: Only allow approved individuals to modify data. A sporadic user no longer has to worry about making unintended changes.
• Cancel, Undo and Versioning: Ensure that the user has control over their changes and can make corrections or revert to previous states without causing any unintended damage to the data or workflow by providing the ability to undo and cancel changes. It reduces errors, saves time, and prevents costly data rollbacks.
• Saving: Be clear on how to save changes. In case an auto-save feature is not enabled, timed reminders and leaving the page without saving reminders can support recording information
• Quick edits when applicable: In the case of complex data and often changing information, extrapolate from the form and allow the user to change information without risking unintended changes.

4.- Collaborating on the detail view:

“The Data Blueprint” focuses on collaboration among its users. Collaborating on the same data point can be done in the detail view. Through this collaborative space, users can communicate, connect, and share insights, breaking down silos and enhancing collective intelligence.

UX Considerations:

• Collaboration framework: Comments, notes on changes, change log — this information will allow users to better understand the data lifecycle and collaborate on it.
• Notifications: Keep users informed without requiring them to constantly access the data point. It is a bigger topic in and of itself.
• Scope of collaboration: Determine how comments affect data points deep within the data structure. This could mean having collaboration features for higher-level data points.

5.- Connecting to Other Data Points:

Recognizing the interconnected nature of data, “The Data Blueprint” provides users with the ability to connect different data points. Through the detailed view, connections can be made: allowing flexible changes to the data structure of each element.
UX Considerations:

• Scope of connections: Be aware of the business logic or data relationship between two objects before connecting them.
• Data dependency between connections: Understand how changing data may affect bonds that affect data structure.

Ultimately, “The Data Blueprint” culminates in insightful reports. Users can step back and view all data points as a cohesive whole, gaining a bird’s-eye perspective on their data landscape. This feature empowers decision-makers with the information they need to make informed choices and drive business success.

UX Considerations:

• Understand User Needs: Identify the target audience for the report and understand their goals and preferences.
• Clarity and Simplicity: Keep the report layout simple and easy to navigate, prioritizing key information and avoiding clutter.
• Visual Hierarchy: Highlight key insights, significant data, and trends using appropriate visual elements (e.g., color, size, contrast).
• Interactive Elements: Allow for deep dives or threading of information

Where have I seen this before?

Almost everywhere. To give you some examples,

• You can click on the albums (tables) listed on the music player and find out more about their content in the detail view provided to you. You can add to playlists
• There is a grid of movie posters on movie streaming providers (a more aesthetically pleasing table) that lets you view all the details of a movie: there you can read more about a movie.
• A list of emails appears in the email provider, and by clicking you can view and reply to the entire email thread.
• Your hotel booking provider will present you with a sortable list of places to stay, and you can click on each one to learn more.

Application-specific main actions can vary. It can be listening to music, watching movies, reading emails, booking a hotel, etc.

So what is next?

Make yourself aware of the approach — see it in every application you use. Make sure you understand the UX designer’s objective, and how it relates to your own as a user.

It’s important not to reinvent the wheel when creating something from scratch — there will be modifications, but the concept will remain the same regardless.

👋 Hola! Let’s meet! You can connect with me on LinkedIn. As well as Medium, I’m on Everest Engineering for more User Experience content.