1

The use of card/tile UI elements in responsive website design is becoming a very influential trend. However, the complexity of the products or services being provided is such that basic click and hover-over behaviours are not enough to create the interactions required to complete user tasks.

An example of websites with complex card/tile elements is Etsy, which has created very elegant and modular components within each card/tile element.

In dealing with card/tile components in particular, but also borrowing from general rules about usability, what would be a good rule of thumb for the optimal number of sub-components and triggers/actions to reduce the complexity of the tiles but still give enough flexibility and control to the users?

2

Just as in all navigation, the key isn't really the amount of options/actions but how understandable they are and how they fit to user's mental model of the application in use and its purpose.

As a rule, you need enough categories to adequately represent the scope of information offered on your site or application.

Top 3 IA Questions about Navigation Menus

Google Material Design could be considered as a good guideline on cards.

The primary action in a card is typically the card itself.

[...]

Limit supplemental actions to two actions, in addition to an overflow menu.

If we take Etsy as an example, they seem to follow these guidelines. On the frontpage, Trending Items cards have one primary action and two supplemental actions.

Etsy's Trending Item card with three actions

Red is the primary action, the trending item. Green is supplemental action for browsing other similar (trending?) items. Blue is another supplemental action, link to the seller of the item in the primary action area.

I first thought items on supplemental action area marked in green were from the same seller as the item in the primary action area. So the green supplemental action was understandable (more items) but didn't quite fit my mental model (who is the seller).

Cards in the category pages aren't more complex either. They too have one primary action and two supplemental actions.

Etsy's category card with three actions

Primary action area is again marked in red, link to the item. I haven't registered with Etsy so I might go wrong on the supplemental action marked in green. That only shows if my mental model is compatible with designer's intentions.

Though there are two buttons, they are considered as the same kind of actions and therefore are grouped as one supplemental action, add to favourites or add to (wish)list.

Second supplemental action is a link to seller, marked in blue.

Though Google suggests one primary action with two supplemental actions and Etsy implements them, there is an example on Material design with four action areas. It all comes down to how meaningful and understandable the actions are.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.