Flipping cards, good or bad idea?

Question

I want to implement flipping cards on my website because they look awesome and they allow the user to see more information on hover.

However I started to think it was a bad idea because instead of the user being able to go to the link and click it, it would have to wait the card to flip and then find a link like >more and only then click it.

Here is an idea:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Answer 1

From my perspective, there is not much difference between flipping card or pop-over window showing more details. So, yes it is a good idea as long as it's just transition effect and does not negatively affect usability.

Pros you get:

• You can pack more cards in one view (of course: avoid excess), and funnel user actions from selecting artist to going to the show information.

• The interface becomes more clear, as you avoid having all the shows data displayed for all the artists.

Cons that come with it is that depending on user behavior, it may actually be important for them to quickly click through shows of multiple artists - in this case, hiding these links on the other side of a card will result in bad UX.

The real question here is, thus, if user expects to see the shows data for multiple artists or just for one or two, and if - based on this knowledge - you should (or not) hide the details at the beginning, making user click to go to the details. But answer to this question lies in the knowledge about user expectations and behavior.

Regarding the implementation itself, remember to:

• clearly indicate that the card is flippable
• provide a way back to the view of all the cards visible from the 'top' side
• change links based on which card is selected (you can do it using javascript; this will allow users to share direct link to the flipped over cards).

Answer 2

You might want to consider implementing a flip icon (that looks like a corner folded) in the lower right corner of the cards which causes the cards to flip on each click and during hover flip temporarily for the duration of the hover.

Usage:

• If you hover over the card, you can see the other side, then see the previous side when you move the mouse off it.

• If you can not hover over the card e.g. because you are using a touch screen, you can click on the corner fold icon to see the other side, then click on it again to go back.

This ensures that both mouse and touch screen users can enjoy a similar experience and the fold symbol on the corner helps hovering users realize what is going to happen/has happened so they won't be surprised by the hover flipping the card.

The site should pre-load the flipped sides (e.g. include them in HTML as hidden), both to prevent delays on click/hover and to not break SEO.

Take into account that if the card was flipped by a click on the corner, then hovering over it should flip it back during the duration of the hover.

Also, you might want to consider adding show all as images, show all as info, show all as both (both sides, side by side). The first two enable the users to reset all to the same state (either images or info) and the second to see both sides at once (thus showing half as much cards per row - double the rows).

Answer 3

Sorry to answer my own question but I came up with this solution that solves the problem of the user being prevented from directly clicking the link:

front and back:

now only the top flips, leaving the artist/venue name constant and always available for clicking, and I can also avoid placing a >more button at the end of the list.

I will consider placing a flipping icon although I image the user can learn quite quickly that it is there and if not they won't be losing any important information.