Lists appear everywhere on the web: most commonly as bulleted or numbered text and within dropdown form fields. This comes as no surprise, because lists are a great way of helping users make sense of complex information. However, as with many things that seem simple at first glance, they can pose their own set of tricky challenges once you look beneath the surface.
Let’s start with ordering: that’s easy, right? Well, not always. Alphabetical sorting works well in most cases as that makes the values easily scannable by eye. However, this is surprisingly tricky to get right – we’ve all seen lists with accented words all sorted to the bottom, or quoted and ‘junk’ values with odd characters dominating the top. There’s also the issue of mixed letters and numbers to think about: a standard alphabetical sort will place ‘Package 11’ before ‘Package 2’, which would require some custom rules to make the order more ‘natural’.
Even with these issues addressed, alphabetical sorting is not always best of course. A list of months of the year beginning ‘April’, ‘August’, ‘December’ is not easy to work with, and in other cases it might be more helpful to order values in terms of importance or popularity. A lengthy list might also benefit from being broken up into sections with headings, although that raises the question of how to order the sections themselves as well as the items within them. And so there are more and more decisions to make just to make a list “feel right” to your end users.
In other contexts, users can themselves influence ordering, as when clicking on column headings within data tables. And arguably, of course, tables can be seen as a ‘special’ type of list which present some unique challenges of their own. Here, long values within cells can be a problem, requiring truncation, horizontal scrolling of the table, or both. In particularly tricky cases, a list can itself occur within a cell, making the containing row “too tall” unless more rules are added to address this. In addition, the number of table rows can get very large (think search results), so requiring the ability to ‘page through’ results.
But there are also extra opportunities here: as well as enabling a simple way to re-sort items via a clickable header, tables can also offer the ability for users to choose which items are displayed at any given time. For example, it may be desirable to only show rows relating to a specific product or year, both of which can be achieved via column filters similar to those seen in Excel. With the issues above addressed, and users having full control over both ordering and filtering, a table can therefore represent an extremely flexible way of handling complex lists.