UX: Why Lists Save Time
Any information found online falls into one of the following 2 categories: it either requires some action on our part, or it wants to be consumed (or browsed). The job of a UX designer or of an infoviz/dataviz specialist, then, is to create UI’s or pages with one of these goals in mind. If we want to subtly nudge users to browsing more pages in a passive mode, the design logic needs to be built just for that. If we want to help users act and save their time rather than make them hang out on a web page, the page layout or user interface has to take that into account. I will show the difference between these two kinds of logic based on the list and grid infoviz patterns from a news hub and from a work management tool.
It’s quite common to display news as a grid of tagline+image sets (cards), maybe with a mouseover text. Here’s one such grid:
If we think about it, this image+headline+mouseover layout is used with one major goal: to engage users. Make them spend more time browsing the news, move mouse over images, check a few headlines, click on an image. Once a mouseover text is displayed, it’s an easy-lazy thing to get to the full view of the news, the one that includes advertisements, videos, and social comments. The grid layout, thus, appears to eat more of the users’ time, luring them with this ease to click and to browse. In general, if we lay this whole “engagement” thing aside, reading news is a passive online activity, and it can be completed rather quickly. So, if someone wants to scan the news, rather than get stuck in them, they wouldn’t want to hover mouse over those pieces, checking for the clues. The grid layout in the news appears to be more “engaging”, as they call it, but it loses in terms of time spent vs. value gained. I mean, what if I don’t have time to move mouse over those snapshots to find out what’s behind a headline? Busy readers will likely want to just scan the news and headlines. They don’t even need those large image thumbnails. That’s why a list layout scores higher on the time spent/value gained scale. Check this out:
This layout allows to scan many headlines+summaries in one take. Readers are able to decide faster, if they want to click on some news or not, without mouseovers. Apparently, I would want to read more about the cleanup from storms, which left three dead, and I don’t have to hover mouse over an image, as in a kid’s game, to find out what the cleanup from storms entails. That’s why I like the list layout better: it is more respectful of my time. I must give credit to the UX designers of this news portal, though. They have provided users with an option to choose between a list and a grid.
That was the case with passive browsing. A few “active” things available to users at a news web-site would be clicking on an ad (the more time they spent there, the more likely they are to do that), posting a comment and/or sharing news in social networks. That’s the logic behind the grid design in case you were wondering why such a draining layout — that’s how it looks to me — should ever be used in the news. Another handy example of a grid that slows us down would be… a desktop screen. I often save stuff to my desktop — files, snips, images , etc.— and when I want to find something, it takes more time and effort to move eyes between the thumbs, as compared to using a list or a search.
Let’s now consider the logic behind the list and grid/board layouts in a work/project management tool. The UI of such a tool must encourage users to spend time productively. It might seem a stretched parallel, but in some ways the grid/board is less efficient for project management as well. Lists will work better when it gets to managing bugs, for instance:
If someone in charge, a QA manager, or anyone else, will want to create a display of bugs, tailored for hands-on work, this would be such a list. Apart from the compact layout, the list has an inline edit for most of the fields, and the bug details can be updated faster than in a grid view. Besides, the columns in this list are customizable; one can choose which column they want to see and which not. Now, what if this person in charge were to work with bugs displayed as a grid? Check this out:
As with the news portal grid, one has to move mouse over bugs for more details, e.g. to check on a bug’s severity. This grid layout would be a plus if I had time to leisurely contemplate which card might mean what, but if I want to change a bug’s status, assign people, or update tags, I need to dive further in *sigh*, click on the bug card and work from there. The grid layout does not allow for quick scanning of the bugs and quick editing/updating. But it would be optimal for changing states the way they do on a Kanban board. As a side note, this work management tool allows users to switch between the grid/board and list displays, just like the news portal does.
I hope these examples help reveal some logic behind designing information layouts for various purposes.
Related:
This story is based on an earlier article.
