15

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

Improve this question
4
  • 2
    Is there a reason why you can't have them already expanded?
    – UXerUIer
    Feb 10, 2015 at 15:54
  • 7
    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, 2015 at 15:55
  • 1
    jsfiddle.net/0jbngx4L
    – bjb568
    Feb 10, 2015 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, 2016 at 9:31

6 Answers 6

Reset to default
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.

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

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

Improve this answer
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).

Improve this answer
1
  • 1
    Sounds fun! Care to share a preview?
    – Jelle
    Feb 10, 2015 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/

Improve this answer
5
  • 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, 2015 at 19:43
  • @plainclothes that's an interesting perspective. we could use > and down ∨ but it would also signify downvote.
    – Balaji Natarajan
    Feb 10, 2015 at 21:03
  • 1
    Icons are a tricky business.
    – plainclothes
    Feb 10, 2015 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, 2015 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, 2015 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.

Improve this answer
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

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

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