The problem with a card-based UI

If you’ll read reviews of the the recent HP/Palm smartphones, RIM’s BlackBerry PlayBook or the HP TouchPad, it’s very likely that you will find praise for their “card-based” user interfaces, as one of the best features of those products. The card-based UI has been widely referred as one of the most convenient ways to use a touch-screen device and the best way to switch between multiple applications running on the device. With all of this I still think that a card-based UI has serious problems, that are rarely covered, if covered at all.

First, lets define a card-based UI, so that everybody can understand what are we talking about. A card-based UI is a type of user interface that represents certain single objects (like applications, web pages or other documents) as relatively large mostly rectangular pages (or cards, hence the name “card-based UI”), that display a down-sized version of their content inside them and are switched between using swipes.

To understand the problem we need to look at the existing examples of card-based user interfaces, which aside from the above-mentioned webOS and BlackBerry PlayBook also include Mobile Safari’s tab-switching in Apple’s iOS and application switching in Windows Phone 7 after the “Mango” update.

Card UI on webOS smartphones Card-based UI in Mobile Safari Application switching in WP7 Mango
WebOS on the HP TouchPad Cards on the BlackBerry PlayBook

As you can clearly see in the screenshots above, when viewing multiple objects in a card-like view almost all of the time you’ll have a “complete” view of only one of those cards, with two other object being either “chopped off” (most implementations of this UI) or scaled-down even more then the centered object (PlayBook UI). The user effectively can view only one card at a time, needing to swipe sideways to figure out is this the card that he’s looking for, which in it self leads to another problem — navigation among the cards.

Navigation among the cards can be done somewhat differently, but all of the existing methods pretty much suck:

- Switching between applications in webOS and browser tabs in Mobile Safari is accurate, since a single swipe offsets the user by one card, but requires the user to make a swipe motion for every card that he passes by, which is annoying and tiresome when dealing with a large number of cards.
- Switching between applications in Windows Phone 7 or the PlayBook OS can be faster and potentially requires less swipes since a single swipe is not limited to moving by one card, but makes the whole navigation far less accurate, requiring the user to correct swipe actions with additional moves.

In it’s core this problems is very similar to the problem of application home screen swiping on the iPhone, when a large number of installed applications would lead to many users having a large number of home screens filled with application icons. This problem was addressed by adding support for folders, which enables users to group a number of applications in a single folder, thus reducing the number of home sceens and swiping.

Folders help reduce home screen swiping

Folders help reduce home screen swiping

Recent versions of webOS also try to solve the problem with large numbers of cards by implementing card stacks, which group a number of cards one above the other, but unlike folders stacks aren’t very convenient to use mostly because aside from the the upper card all of the card in the stack have little to none area that is visible (and accessible) to the user.

Card stack in HP webOS

Card stack in HP webOS

So, while a card-based UI does look good and convenient, the reality is that it’s not that perfect, especially in the long run when user can and will run more and more applications at the same time.

Thoughts on tech