Users spend much of their day interacting with lists, making them a critical part of any enterprise software. Let’s resolve to make lists that are easy to filter, simple to navigate and easy on the eyes.  Here’s how:

Lists need to be dense
Typically businesses deal with 100s or 1,000s of results even after results have been filtered and sorted. And within each result is typically 5-15 pieces of information that need to be displayed within each row. (Typically a thumbnail photo, price, description, item attributes such as color, size or location, and other information related to the niche business the software is designed to serve).

With this much information to be displayed, entreprise software designers need to be smart about how to lay out a list. Commonly, lists are grids, with an X and Y axis of information. In email for example, the Y axis is the previous email descending in chronological order by default. The X axis typically contains column titles. The problem with using this model in entreprise software is that the X axis can become crowded to the point of being unusable.

Ideas for the title bar
If you don’t have lots of information on a list, it makes sense to have a title bar. People are very used to them, and most people know that lists can be sorted by clicking on the column header.

An example of a title bar as a way to organize information inside a row
An example of a title bar as a way to organize information inside a row

This is an established pattern that UX developers should take advantage of. An excess of titles can, however, create visual noise that will make a list more difficult to use.

A widely-used solution to a crowded title bar is removing the column titles (and title bar altogether) and making titles implicit inside the row. Google does a good job of this: I don’t think anyone has trouble identifying various pieces of information inside of a row of an email on the main gmail page.

Gmail makes its column titles implicit inside of the row on a list view of emails. The risk here is that users may not know what a piece of information means because it lacks a clear definition.
Gmail makes its column titles implicit inside of the row on a list view of emails. The risk here is that users may not know what a piece of information means because it lacks a clear definition.

This approach works great with limited information and a familiar pattern of previous use (email is 20-30 years old and most users are familiar with the kinds of information email displays. If there is too much information or if the information is not self-referential then this approach will fail).

One solution to an abundance of information is make the titles explicit within the row and to allow users the option to sort the list using a dropdown at the top of the list.

An example of moving information titles (that would normally be contained in a title row at the top of a list) into the row itself
An example of moving information titles (that would normally be contained in a title row at the top of a list) into the row itself

This approach avoids an overlooked pitfall of title bars: that once a user scrolls down a page, they lose the column titles, obliterated by the scroll. Titles contained with the row are always available no matter how long the list, and how far down the page the user has scrolled.