Designers need to stop and really look at the often horrible state of cards as used almost everywhere on the web and in apps.
From Google, Twitter and almost any hand-rolled website there are designers who think that they are on the bleeding edge of UX. They've preached the benefits of cards — those boxes of content wrapped in often rectangular boxes of padding and borders — for so long, that everyone believes it's the chosen path of UI.
What the pundits wrote:
Why Cards are the Future of the Web – Inside Intercom
How Google Unified Its Products With A Humble Index Card | Co.Design | business + design
What I see:
I like pointing to Twitter because it has struggled with UX every inch of its product release updates. The official app is card stacked above card of tweets and a hodgepodge of media. Each card struggles to maintain some form of consistency which is always lacking.
Twitter Link Summary Cards Ruin Twitter – teaz.me
It's simply a cluttered mess.
Now when we perform a Google search, it is card after card of results, as with most things from Google these days.
As cards rose in usage and Google+ (a UX deaf product) became the front-end UI mask, this was the result:
Google+ has more than 30 styles of cards.
Didn't that ring any bells for Google's PM team? Yes, users often notice the minutiae of inconsistencies which translates to confusion and wasted time searching for UI elements that differ from card to card. With so many versions of cards, it should have been obvious that this was not an elegant solution.
Twitter proves this along with every Bootstrap inspired website or app that employs the use of panels. It seems like most devs stick as much content and UI elements within each card because that's what often happens with designs by committee where the UX team is weak.
Cards break skimmability.
The small gaps of margin and padding separating card content from its brethren always seems just enough to force one's eyes to slow down and mentally filter out the borders — Twitter may have made some improvements to polish this up, though it still suffers from inconsistent UI elements from card to card.
Breaking skimmability is just plain wrong.
Cards are a pseudomorphic nod that really don't have to break UX if the design is right (reign in those borders and margins). Cards are just containers that can be designed any way a designer sees fit. Most though use an out-of-the-box default design just to save time.
If my reading experience is delayed because of a card's design, I'll find a better solution. For Twitter, I use Tweetbot and DuckDuckGo for Search. There are always options and generally, a cardless one works better for me.
Why Web Users Scan Instead of Reading
Since most cards break UX today by impeding scannability , it's really time for designers to rethink their implementation — unless you don't mind users looking for alternatives.
Get this document in order so that scannability and consistency are hallmarks of your design.
Front-End Style-Guides: Definition, Requirements, Component Checklist
