06 //

A prompt:


Your friendly neighborhood developer emails you the following: “My client has me building this kind of personnel ‘data grid’ for a client. (Example: https://www.ag-grid.com/example.php) My old employer used PeopleSoft as an employee management system, and working with it was painful. From a usability standpoint, how does one make dealing with a big giant chart of data less painful?” How do you respond?




Dear friendly neighborhood developer,

“A big giant chart of data” is never a fun thing to deal with, but often necessary. Fortunately, there are a number of UX principles that would be applicable in your situation and will hopefully ease some of the pain for both you and your client (and their client).

To more specifically answer your question, the first thing I would want to do is determine who will be using this personnel data grid and what they are wanting to accomplish by using it. An employee management system might have multiple users, each wanting to enter or find information pertaining to employee details, scheduling, attendance, leave, payroll, and so on. Throwing all of this information into a grid without considering how it will be used is likely to cause pain for every type of user.

Usability-wise, there is a long-standing “mantra” for information visualization which I believe applies to your project: "Overview first, zoom and filter, then details-on-demand.” Applying this guideline from the onset of creating your data grid will go a long way in increasing the flexibility and efficiency of the grid for your user. Big repositories of data will benefit immensely from having a well-thought out structure that users can easily navigate. This means creating pathways within the structure that a user can follow in order to find the information most relevant to their need. Content prioritization, filter tools, and sort functionality are all means to achieve this end. Ben Schneiderman, in his paper The Eyes  Have It: A Task by Data Type  Taxonomy for Information Visualizations, coined the mantra above and goes into further detail:

  1. Overview: Gain an overview of the entire collection.
  2. Zoom : Zoom in on items of interest.
  3. Filter: Filter out uninteresting items.
  4. Details-on-demand: Select an item or group and get details when needed.
  5. Relate: View relationships among items.
  6. History: Keep a history of actions to support undo, replay, and progressive refinement.
  7. Extract: Allow extraction of sub-collections and of the query parameters.

Each of the tasks above allows users to get informed and take action. Taken together, the seven tasks help create a user-friendly data grid regardless of content. An overview helps users easily find patterns and outliers, while also clueing them into where they might look to find what they need. Based on context, users should be able to hide information they don’t need, as well as dive deeper into data points they find relevant. Column sorting, filtering, grouping, and pivot tables will all aid in this process and should be made available to the user whenever possible. Reducing the data set also helps users view meaningful relationships and compare data.

With that being said, simplicity is key for users to be able to successfully use a massive data grid. All the filter and sort tools in the world won't fix an experience perceived as complicated, bloated, and messy. This is where aesthetic and minimalist design principles come in, making content easy on the eyes and allowing the tools you have built to feel accessible. By removing clutter you are also minimizing the perception of complexity. White space, visual hierarchy, and sectioning are all ways to accomplish this. Simply adding white space around data points can go a long way in helping users scan and find information without feeling lost or overwhelmed. Breaking complex data into sections helps users focus on content and control what they view. Finally, keeping the language, sizes, and colors consistent throughout headers, labels, and action buttons will help your user complete their tasks. Remember, every element in the design should help the user achieve his or her goal, which is why it is so important to define one (or several) in the first place.

I hope this helps!