When card UI design doesn’t work

When card UI design doesn’t work

Proving that lists can trump cards 🃏

With the popular rise of Material Design, ‘cards’ have become a common part of modern web design. Especially when it comes to archive pages where you want to only offer a summary of information.

A card is a sheet of material that serves as an entry point to more detailed information.
Source: Google Material Design

The Experience Design team, have been responsible for several redesigns recently. Many of which are based around the cards pattern. This works really well to offer a brief summary of an article, as well as making it obvious you can discover more information. However, when it comes to news, particularly on home and archive pages, we’d discovered we may have dramatically over used this pattern.

Card and List UI Design

Screenshots from the new Goal.com app, which introduced card based UI design

Post redesign feedback

After any redesign, there is often an instant negative reaction from your loyal user base. Followed by a flood of complaints and emails asking you to revert back to the old UI.
We anticipated this with the relaunch of Goal News and Live Scores apps. Neither app had been subject to dramatic change in years. So with this in mind, our strategy wants to make improvements. Listen to the criticism. Then establish common patterns that were bound to emerge.
Our first contact with card issues was after the launch of Goal News — seen above. A small number of similar complains tricked in about the amount of article that are visible on one screen. For example:
A snapshot of the user feedback relating to cardsToo many pictures and scroll downs. I just want to read the news quickly and simply
I have to scroll through large pictures just to get a glimpse of all the news… doesn’t allow for viewing loads of news at once…
A note for user feedback: the feedback above is great. It’s not just moaning about a feature, but also taking time to explain why it is causing them an issue. Through this we’ve identified a common user goal, the need to scan quickly and simply to get an overview of the latest news.
Further research was needed to understand why cards don’t fulfil this goal. Here is the breakdown of our research.

Digging a little deeper

Using HotJar to analyse clicks and scroll distance on several of our other sites we noticed similar issues. The Spox.com home page was recently redesigned. The new design focuses on featuring a list of news above the fold, separating it from the hero carousel.

Card and List UI Design

Spox.com — Pre Redesign

The old homepage is shown above. You can see a large number of clicks on the small images just above the ‘Spox TV Playoffs’ banner. These clicks are only navigating the carousel. They account for 43% clicks on this page. It’s likely that they attract a large number of clicks because a single user could click on multiple cards during the same session.
22% of total clicks go through the “Themen des tages” (Topics of the Day) list. This list actually only appears on the first carousel item! The redesign addressed this by separating “Themen des tages” and the carousel as follows:

Card and List UI Design

Spox.com — Post Redesign

The result was incredible, tripling the amount of clicks on ‘Topics of the Day’ to 59% of total clicks. 
Interestingly, the list approach for the carousel navigation had the opposite affect. By removing the images, we’ve lost almost all interaction with this area. This now accounts for only 1% of total clicks. A massive difference when compared to before, where 43% of clicks were navigating the carousel.
This could indicated that users were navigating the carousel to find the news list that has disappeared. Remember it only appeared of the first slide and this carousel had auto play enabled. 🙈

Mobile Patterns

When we looked into the behaviour on mobile. We had access to one list based UI website (below, left) and two card based UI websites (below, middle and right). We’ve acknowledged the bias that we’re not comparing the same site — like we did above. But there is still insight we can draw.

Card and List UI Design

Mobile Click and scroll maps. Via HotJar

Cards increase the use of the hamburger menu

Comparing the use of the menu icon. We can see a much bigger use for the card based sites. We can see a break down of the stats as follows:
Left: Voetbalzone — 0.48% — list UI
Middle: Spox — 17.43% — card UI
Right: Goal — 4.93% — card UI
This could because the user is impatient with limited visible title and has resorted to using the menu to find content that matches their needs.

Cards Increase the depth of scroll

The use of cards on Goal (far right) encouraged users to scroll further down the page. This isn’t unusual as each card takes up 38% more height when compared to Voetbalzone (far left). Although users scroll more, they still see less content, 3 fewer articles comparing the left site to the right.

Number of articles in view

It’s obvious the benefit to lists is that you can fit more news articles in view, making it easier to scan titles quicker. In order to understand this difference, we need to study the extra space a card based design demands. We’ve expanded our research to competitor news sites. Comparing 3 sites that rely on cards to 3 sites that favour lists.
Only considering the homepage, we’ve looked at 2 scenarios. One, above the fold. Two, scrolling down to the ‘best’ position — the place where the most possible news titles are in view. To make this test fair we’ve:
Only counted news articles where the title is 100% visible
Ensured the browser is set to maximum width/height of a 13" Macbook
Used the same browser, Google Chrome
Zoom level set to 100%.
Ad Block on, as ad banners may vary in height

To begin with lets look above the fold:

Card and List UI Design

Looking above the fold. Top row card websites. Bottom row list websites.

And now the ‘best’ case — the place where you can see the most news.

Card and List UI Design

The best position to see the most news. Top row cards. Bottom row lists.

Analysing these results revealed you can almost double the amount of news in view by using lists. When comparing the worst to the best cases, OneFootball (cards) can only surface a maximum of 6 article titles. Where Voetbalzone (lists) surfaces 19 titles in a similar position.

Card and List UI Design

Other examples of Lists vs Cards

I’m certain we’re not the only people to wrestle with this issue. For example, Google have been known to AB test their search results page.

Card and List UI Design

Google Search AB Test“Google’s search results may get a bit more colorful, though offer less information per page.”
Credit: GreenBot

Material Design’s Advice

So when is it suitable to use a list? Material Design suggest that lists are “quickly scannable” are are suitable when displaying similar, repetitive content.
The use of cards isn’t recommended when “a user is not directly comparing images or text.” Users of a news website often want to compare news titles especially on the homepage, to get an overview of the current stories and decide which articles they want to explore further.

Card and List UI Design

Card advice from Google Material Design Team

In Conclusion

There are obviously benefits to both patterns. It’s no surprise lists are more compact, therefore you can see more news articles and scan titles easier.
Whilst cards deliver more impact. Images grab user attention. Additional information, such as excerpts and tags, can also be surfaced on a card. Giving the user more context before they commit to explore.
As designers – whilst we all like the latest trends, extra white space and big images – for News and data, lists are simply better at addressing the fundamental user goal. To quickly scan to find relevant content.

Learn from our mistake

There is a mantra, learn form your mistakes. I have adapted this to, save yourself the struggle and learn from someone else’s mistake. Hopefully you’ll learn from our mistake and break your strict card pattern when designing your next home or archive page.

blog comments powered by Disqus