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.
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 appeared about the amount of articles that are visible on one screen. For example:
Too 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.
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:
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 effect. 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 indicate users were navigating the carousel to find the news list that had just 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.
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:
And now the ‘best’ case — the place where you can see the most news.
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.
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.
“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” and 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.
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. Hopefully you’ll learn from our mistake and break your strict card pattern when designing your next home or archive page.
Originally posted on my blog. If you’ve made it this far I’d love to hear from you, tweet your thoughts and questions to@rob_gill_
