Finding what you need faster, in a pool of data
Listing pages are a common method of number crunching and analysing data inventories. They are versatile showing different attributes of a data set, collected from various sources, at a single place (Think of a single excel sheet that is bound to grow forever). Often when we start collecting information, we have a few attributes to begin, and as we scale, we keep adding more data points to that existing set, which maybe sourced from various places.
Enterprise software users end up using these pages full of critical information through the day. Having a nicely designed page helps in better usability by aiding decision making and reduces cognitive fatigue and errors. Here are some tips one can keep in mind, before starting to design this software and make you sail through the process with a breeze:
1.Decide your unique identifier for each data entry:
A unique identifier helps demarcate one set of data from the other and helps in decision making process. When dealing with multiple attributes associated with a single data entry, there maybe no single entity which can make a data entry unique, but a combination of attributes may make each data entry unique. This will help in making this entry actionable. Additionally, you can add one or two variable entities which can help in decision making for a data entry. Overall, the list should not have more than 5 entities per data entry.
2. Remove Information:
On opening a software, if we’re barraged with too much information, we feel overwhelmed and feel the software is too complex; we don’t know where to begin. Furthermore, this increases the on-boarding-time for new users, before they can actually start working on these softwares with efficiency and confidence. For this purpose, we can keep the unique identifier of the data on top and nest rest everything that does not satisfy the primary use case. This also reduces the server load, as instead of fetching everything in one go, it fetches information as and when required. Here, apart from using secondary pages, you can also use an array of interaction tools like nested lists, popovers and drawers for convenience, and when you want to reduce time in switching between data entries.
A lot depends on what is the decision making process of your users based on context. A listing page in shopping website will be inherently different from a listing page of a troubleshooting for a client servicing team.
3. Group information:
Information of similar kind, can be grouped into categories and fetched together. Depending on your use context, you can call out separate buckets of information. Colour can be used to indicate buckets of information, where the groups are finite. For example status of an aircraft can be arrived, departed, boarding, each status could be in a separate colour. Also think of using UI elements like tags and badges, which help in picking up information in a single glance from the rest due to its form factor. If these are being acted upon separately, you can use tabs to segregate these buckets and then add context-specific actions and insights.
Based on the context, you may want users to make some quick actions per data entry or bulk actions for a group of data entries. For this purpose, you may want to keep some extra space to add these buttons (which maybe full text or just icons). Simultaneously, you may want to hide these actions on the first glimpse and disclose them on hover or in an ellipses. Since users read from left to right, it is advisable to add these actions on the right end of the row, so that you are aware that they have consumed the information before performing the action.
Scale these actions to bulk actions to allow agility.
5. The Controls: Sorts, Searches, and Filters:
A list, by default is always populated on a sort logic. Additionally users like to sort items on different attributes; these attributes need to visible in the first glimpse, and the logic of the sort should always be visible to the user.
Filters can help in decision making in case of looking for data with a particular criteria, often by nulling out information that doesn’t fit that criteria. Commonly used criteria qualify for quick filters.
A search is a case of looking for a particular entity, and is exactly the opposite of filters. You can reduce the time taken to search for items with autocomplete suggestions. It also helps to combine the search field for multiple attributes into a single field, where the naming convention can help distinguish different kind of data. There are times when one cannot specifically separate out a search from a filter, and typing in the information maybe easier than looking for, and hence the search and a filter should be placed nearby.
On a data set with a lot of search attributes, it makes sense to hide the lesser used searches and filters in an advanced search, so as to not make the page look overwhelming with controls and reduce complexity.
6. Help in readability, navigation and where you are placed in the entire system:
With so much of information upfront, it can be difficult to focus on a single row of data. Highlighting the data on hover can help users focus on the data entry. Moreover, while browsing through all this information, one may feel lost on where they are placed in the list and thus it helps to give an identifier through the information, for example, the no. of items one has browsed (use in case of infinite scroll), or the page no. in the total no. of pages and total no. of results generated. Additionally, if user selects something on top of the list and moved to the bottom of the list, indicate the selection on the interface. Help users bookmark information through large amounts of data.
7. Think of other formats this data maybe consumed;
These lists maybe shared over the internet, copied or downloaded for other softwares or saved for later reference, therefore allow the data to be consumed in different formats.
8. Account for bad data, exceptional cases:
Truncate information incase of longer than usual , account for bad data and data inconsistencies which may arise while fetching data from different formats. For example what happens when you get a name with three parts when your entry field only requires First and Last Name.
And that is it! You take it forward from here and go ahead make that enterprise software kickass.