Card Stack Metaphor
A Case Study in User Interface
Let’s take a look at applying the card stack metaphor into user interface.
Why
The desire to use the card stack metaphor is informed by three motivations:
- The need to keep every critical piece of one user interaction flow together;
- The need to put all critical information in one screen to ensure maximum exposure and reduce permanent blind spots; and, lastly
- Increasing boredom 🥱 and fatigue 😩 from the scroll-top-to-bottom sequential card UI.
How
Good artists copy, great artists steal
I stumbled upon this video last Saturday morning.
Two-third of the way in, I was inspired to open my MacBook to immediately apply this set of elegant CSS techniques to a real client project.
Why is it so awesome?
It is deeply impressive how so much could be implemented with so little. It adheres to a key principle I espouse in web development:
Always delegate a task to the most suitable tool.
The most suitable tool is usually the one that accomplishes the task with the least lines of code and least amount of mental gymnastics. In this case, CSS for the win! 🏆
My adaption
Here it is, 31 lines of code to fundamentally reshape the user interface.
Advantages
See everything at once
On entering the app, the user gets an immediate overview at one glance. The user gets to peek of every card, no scrolling needed.
One tap
Only one tap is needed to show any desired card, and again, without the need to scroll to it.
Preserve Screen Real Estate
One tap is same level of remove as the typical bottom navigation bar UI but without permanently taking up precious vertical screen space.
Functional Skeuomorphism
Employing the visual metaphor of a card stack, it allows us to compact information through front-to-back overlapping instead of the usual top-to-bottom stacking.
While some information in each card is unavoidably hidden, every card is visible. In the form of a typical newsfeed UI, only the first card would be visible upon initialization.
UI is now fun and alive
Instead of having the user swipe to move to the card, one tap will make the unwanted cards move away to reveal the desired card.
We get a playful interface that comes alive for the user without overly fancy and unnecessary animations.
100% CSS solution under 40 lines of code
With this CSS solution we get:
- a sleek mechanism to stack cards;
- a simple animation of cards shuffling about purposefully; and,
- a low burden of maintenance, once some CSS quirks (e.g., card `z-index` and `height` depending on number of cards, loading of elements within card before being selected to be in full view etc.) are figured out and no JavaScript to maintain (except, of course, simple logic to add and remove class 🙂).
Disadvantages
No solution is perfect 🤷♂️
Despite prevalence of card stacks in the physical world, there are disadvantages.
General Unfamiliarity
The biggest disadvantage is the general unfamiliarity of the stacked card metaphor except in very specific types of apps. Very specific, indeed.
When presented with the card stack UI for the first time, users do get stumped and are lost at what to do next.
Top card perceived to be at the bottom
The frontmost card is, from a two-dimensional viewpoint, at the bottom. People expect the “top” card to be the foremost UI element that they are presented with.
It seems that people generally don’t allow for the possibility that any interface on smartphones and tablets could use depth to layer information, save for fancy animations and styling effects. 😔
Remedy
To really go full-on with the card stack metaphor, we need some user onboarding.
Show, don’t tell
We need to show that:
- The cards can move;
- The user can move a card by tapping;
- The user can get to the desired card by tapping on it.
We’d have to simulate the cards moving up and down from tapping after the app is initialized. I’ll share more once I have something working! 😄
