Customer Experience

List View versus Grid View: How Do You choose?

November 23, 2017
Digital Surgeons

Sometimes it’s hard to decide which is best, but I like to think of list versus gridded layouts as sitting versus standing. When you're seated, your body is generally relaxed and focused. You're mellowed out and at an optimal level of comfort, ready to be engrossed in a single thing, be it a good book or binge-watching the last season of Game of Thrones. But take a look at someone who's standing. They're leaning on their right leg, only to shift to their left shortly after. After a few shifts they start to get restless and move around, visiting other rooms, looking about. As counter-intuitive as it may sound, standing is intrinsically an active state. No one ever just stands. They become more exploratory with minimal external motivation. 

Considering User Actions

What does that mean? Well it all goes back to “content is king.” Choose the layout that suits the type of content you’re displaying. A list style layout is for the seated because users' actions tend to be very singular in purpose. They've come to your site to do one thing: browse or read. Present them with content in a standard way and let them just get lost in it. 

On the other hand, grid view is for the standing. It's for the restless and curious. Your attention goes from one topic or image to the next and you never want to linger in one spot for too long. And when you get tired of standing, you just click into your topic of interest for more details and have a seat so you can take your time and become completely enthralled. 

Knowing Your Audience

The standing/sitting analogy works for audiences too. To put it simply, four-year-olds LOVE to run around so they can touch (and probably lick or sneeze on) everything they can find. They love chaos and getting their attention ripped all over the place so layouts that inspire an intense distribution of attention tend to work well. Kids want to play and be entertained. On the other hand, the older populations tend to gravitate towards anything that brings calmness and ease into their lives. They generally want to pick one thing to focus on, dig deep, and then move on. Search and destroy.

Product pages are a great example of what I'm talking about. Some studies have shown that when browsing via list view, shoppers' attention begins to drop as they browse down the page, while grid view has a more even distribution of attention.

I’ve come across many case studies that tout one layout over the other, but they aren’t necessarily a definitive source of evidence that there’s a clear winner in the grand scheme of things. What people fail to consider is that many case study results are specific only to the type of content and audience they’re catering to. For instance, a study from Prismatic found that linear feeds perform two to three times better than grids.

That's an interesting case study in general, but I'm betting that Prismatic’s new blog format was a success in list view because of the text-heavy nature of their content. Viewing it requires an extended attention span, which a grid view does not cater to. List view provides users a format that follows their natural reading patterns like the F-shaped pattern, while grid view is a little more interruptive, making it best suited for visual content. You can jump from one image to the next without worrying about order or continuity. It's all about discovery and just seeing everything.

Whether you plan to keep users at the edge of your seat or cause a standing ovation, you need to seriously consider what content you will be displaying and how or if you will limit content based on screen size. As usual, it all comes down to "content is king." 

Thanks for reading.
Digital Surgeons
Spread the word!