Pop Up Cards Must Die!

… on mobile devices, at least.

Small floating panels that appear when you hover over an item (popup cards) give users instant access to information without leaving their current page. Pop-up cards have become a pretty common interaction pattern on desktop web browsers, sometimes successfully (for example, LinkedIn has a pretty decent profile card that pops up on hover) and some are nearly universally reviled (for example, vibrant media’s “landmine” hover ads). In general I think pop-up cards are OK when used thoughtfully, but can easily become confusing and distracting to users. The ultimate tip-off that hover cards have usability problems is that they often have close controls on them: anything that is triggered by a hover should not require its own set of controls to be managed.

Sometimes useful, generally annoying

I have stronger opinions when it comes to mobile devices, however. Pop-up cards rarely make sense in a mobile context. Here’s why:

  1. On a mobile device, there is no hover gesture.
    People either tap something or they don’t. Until we have some sort of crazy optical recognition (I stare hard a person’s name to see their business card!) there is only one real gesture: tapping.
  2. Who needs a middle man?
    On a mobile device, it’s generally just as efficient to take you to a new page as it is to display a layered card on top of your current interface. Profile pages in mobile UIs essentially function as business cards: don’t display a pop-up card, just navigate directly to the profile.
  3. Managing pop-up cards on mobile is frustrating.
    Dismissing a pop-up card is a pain on mobile – users may inadvertently tap another link while trying to dismiss a card, and android users may try to use their physical back-button to dismiss the card (which would navigate them back an entire page in the mobile browser).

The bottom line: not all desktop patterns make sense on mobile devices, and pop-up cards are definitely one of them. I’m hoping to revisit this in a little while to address pop-up cards and tablets. I am pretty sure they should still be avoided, but it’s possible that they might make sense given the larger screen size available.

2 comments

I hate how some popups like to recenter themselves on the screen while you’re trying to scroll the mobile page to the side trying to get at the “X” or “close” link.. >_<

I’m guessing you’re not going to like the QuickContacts in Android 4.0 then :-)