Any information in the world falls into one of the 2 categories: it requires some action on our part, or it wants to be consumed (or browsed). The job of a UX designer or an infoviz/dataviz specialist, then, is to create UIs 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, then 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 project management tool.
It's quite common nowadays to display news as a grid of tagline+image sets, 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: 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, with advertisements, videos and social comments. The grid layout, thus, appears to eat more of users's 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 look. 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 on 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 grid slowing us down is... our desktop. Often I just save stuff to my desktop, files, snips or images, and when I want to find something, it takes more time and effort to move eyes between thumbs, as compared to using a list or search.
Let's now consider the logic behind the list and grid/board layouts in a 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 board/grid is less efficient for project management as well. Lists will work better when it gets to managing bugs, for example:
If someone in charge, a QA manager, or anyone else, will want to create a living display of bugs, tailored for hands-on work, it would be such a list. Apart from the compact layout, the list has inline edit for most of the fields, and it's like with processing fish: bug details can be updated faster than in a grid view. Besides, the very 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 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 as they do on a Kanban board. Thankfully, this project management tool allows users to switch between views when they want to do whatever they want 🙂
I hope these examples helped reveal some logic behind designing information layouts for various purposes.
You can subscribe to our monthly newsletter here:
Сheck out latest blog posts:
Get Started for free
Manage complex work, projects and products with Targetprocess
We’ve sent you a confirmation e-mail — please, go check it.
With our product specialist Ksenia