When the card type U is no longer popular list type U will be trump card

with the popularity of Material Design, card UI has become part of modern web design. Especially when you are providing an interface for summarizing archive information.

card is the entrance to provide detailed information. – source: Google Material Design

our user experience design team recently redesigned card based models. This article will be briefly summarized, you will obviously get more information. However, when it comes to news, especially family and archive pages, we find that we are far more than the use of this model.


card based UI design app screenshot

article layout design feedback

in the re design, frequent user groups will have a timely negative reaction. Followed by a large number of complaints and e-mail, asking you to withdraw to the old UI interface.

we plan to redesign the Goal News and Live Scores these two app, these two app are not affected by the change. So taking this into consideration, we need to make some changes to the strategy. Listen to criticism and build a common model.

our first contact card issue was released after the Goal News – see figure. A small amount of complaints can be seen on the screen. For example:


users get feedback on the card screenshot

too many pictures and need to keep rolling. I just want to browse the news quickly.

I have to roll the big picture to see all the news. And can not view the news loaded.

from the user’s feedback: feedback is very important. Rather than complaining about a performance, it’s time to explain the problem. Through this we have identified a common user goal, need to read quickly, only to get the latest news summary is enough.

needs further research to ask what has not been achieved. Here are some of our research.

more in-depth mining

through the use of HotJar analysis of other sites on the click and scroll distance, we note a similar problem. Spox.com’s home page has recently been redesigned, the new design focuses on the news list, separated from the other.


Spox.com – redesign

old home as shown above. You can see a large number of clickable events in the small picture above the Spox TV playoff banner. These >