1

enter image description here

We have several project tiles where the user can see long (500 char) description and take action (Like) on each tile. They're presented as grid view (as shown below) or list view (using full width with thumbnail on left).

However, a team member suggested that toggling the description like this is rather unorthodox but I'm sure I have seen similar interaction somewhere just can't remember.

So just wondering if this is good design and/or what are the options beside showing the description in a modal?

  • Have you considered making the tile scrollable? – dennislees Jun 9 '17 at 3:39
  • Yes, the issue is not the length of the text but the very idea of showing description in the card itself. – Nimbuz Jun 9 '17 at 3:40
  • Your question is about options beside showing in a modal. I'm assuming you a) want to show a the description at all, and b) want to show it in the context of the card (i.e. you don't want to link somewhere else). When I say scrolling, I mean instead of appearing over top of the image/title/button, the description could appear to slide up. Another pattern I've see here is the rotation of the card i.e. the click makes the card spin on an axis to reveal the description behind. – dennislees Jun 9 '17 at 3:55
4

Talking about cards, Material Design does the following

Material Design Cards

https://material.io/guidelines/components/cards.html#cards-content-blocks

Generally speaking, the expected behavior of the button "Read more" is that the user is directed to another page. In the case of the link "Read more", it is expected that more text will be shown in the same place.

My recommendation is to make your interaction more like the one in Material Design.

1

The toggle will confuse users, because all the information of the item is replaced by the detailed text. I recommend using a pattern similar to the one used by amazon:

enter image description here

If it is difficult to use the above pattern, then at least repeat the title and the subtitle on the detailed description :

enter image description here

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.