13

Currently I'm working on an app which uses a vertical 'list' of cards, somewhat like Google Now. These cards can contain static text, (small) images and some control elements (buttons etc.), or a combination of any of these.

Now some cards might contain additional information or buttons, which we want to show when a user expands the card by pulling down the bottom of the card. Similar to expanding Android notifications. However, how can we properly indicate that some cards are expandable, while others are not?

A quick mockup of the layout: enter image description here

  • 2
    Is there a reason why you can't have them already expanded? – Majo0od Feb 10 '15 at 15:54
  • 6
    Expanding all possible cards would create a long, cluttered list. The additional information/buttons are not always needed, hence we want to hide them at first. – Jelle Feb 10 '15 at 15:55
  • 1
    jsfiddle.net/0jbngx4L – bjb568 Feb 10 '15 at 23:59
  • I wonder instead of creating a cluttered list, could you not navigate to a new screen with the full expanded content? Similar to how Netflix does it with their card thumbnails of the show or movie when you then tap/select/click you get a full-screen view of all the related information. – jamesy Dec 2 '16 at 9:31
16

"show more" link (near the bottom)

The easiest and clearest way to do this is with a clearly labeled link...

show more

If the link is there then I know there is stuff not showing.

"expand card / collapse card" link (in the upper right corner)

If you think your users will want to both show and hide the additional content then make sure the link to do this is fixed near the top. The text of the link should change but not move when clicked so the user doesn't have to go hunting for a way to shrink the card back to how it was after expanding it.

It's fine not to have this link on every card if most of them fit in a reasonable space.

  • 1
    That or a simple --- expand card --- for the "appropriate" jargon. – Majo0od Feb 10 '15 at 16:00
  • good point @Majo0od - added the expand/collapse toggle link suggestion as well. – DaveAlger Feb 10 '15 at 16:27
  • Thanks! I'll probably go with the expand/collapse link if the space allows me. – Jelle Feb 10 '15 at 20:16
26

I've seen chevrons become popular for things like this. Big fat areas that are easy to press, along side footers with an ellipse. Pretty familiar symbols that imply expandable content without having to read.

enter image description here

3

I've voted up DaveAlger's post because I think it's the most straightforward and it's clear.

I thought I'd mention an idea I had whilst considering this. It appears from the proportions of your mock up that it's a phone/touch application. I had an imagine of a zip horizontally on each card that allowed dragging the fastener across to open the zip and reveal the card contents. It doesn't really work once the zip has been opened and the extra content shown because the two parts of the zip are no longer attached. But I thought it would be fun to do, given the appropriate content (clothing/sewing store).

  • 1
    Sounds fun! Care to share a preview? – Jelle Feb 10 '15 at 20:14
3

The below would work (plus sign could be moved to right or left to the content). Moreover, you mentioned the list as "cards" so if you want to trigger the expand/collapse on the touch of the entire card, this will be prominent enough.

enter image description here

Code pen below

http://codepen.io/pdjarratt/full/miswr/

  • 2
    Be cautious with + and - since they can carry a lot of meaning. In particular, you may find that you want to use them elsewhere for a function other than an accordian ... I don't know ... maybe add / remove? – plainclothes Feb 10 '15 at 19:43
  • @plainclothes that's an interesting perspective. we could use > and down ∨ but it would also signify downvote. – Balaji Natarajan Feb 10 '15 at 21:03
  • 1
    Icons are a tricky business. – plainclothes Feb 10 '15 at 21:41
  • I have seen Google use + sign to indicate more things. In Google's Inbox app, + sign is starting point when touched will expand more controls such as new email, new post, new reminder etc., In this case, + is used to signify 'More' – Balaji Natarajan Feb 10 '15 at 22:01
  • @BalajiNatarajan I always interpreted the + always as "New something", the options after it are just to define the something. – 11684 Feb 11 '15 at 19:15
1

A third way would be to have part of an image or the top half of some text at the bottom of the card, so the user sees there is more information on the card.

1
  1. Spell it out with "show more" or other text as indicated by another answer. For a page with many items I find it starts looking cluttered to say that on every item and is not very elegant. It gets the job done though.

  2. Add an indicator for more such as a "+", down arrow or "..." at the end of the last line.

  3. Show the first lines of the additional content and obscure the rest through a gradient or clearly cutting it off.

  4. Make the item look clickable. Interactive affordances have a lot to do with the way they look so it's definitely worth consulting a visual designer.

  5. Add hover effects (useful for desktop only) especially if you have a page covered with these items, it will make triggering them very likely.

I generally try to go with a combination of 2, 3 and 5

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.