3

I'm trying to create a card with some text/images inside, which can expand down and expose more content if a user clicks on the expand button (a huge down arrow).

The natural way to do this obviously would be to append the additional content to the part of the canvas that expands down.

However, in my case the entire content of the card will actually get re-arranged. This means the content in the original smaller card area when contracted, will change when expanded.

What is the best way to make this happen? The card is in a web page.

I'm thinking of doing it like this:

  1. Card expands down.
  2. Old content fades out, and new content fades in.

Does this sound right? Or are there better ways of doing this?

|improve this question
  • 1
    You may try to collapse the card and then expand it with the new content inside. – alexeypegov Jan 17 '13 at 6:25
  • Out of interest, why is the original content rearranged? Could that be avoided? – Matt Obee Jan 17 '13 at 10:12
  • Because the smaller card is just a condensed version of the full card. Condensing means taking the most important pieces only, which may not always be in the same order as the expanded version. – Pee Wee Jan 18 '13 at 0:26
4

You have good intuition to consider other options. Fading all of the content out-and-in will visually conflict with the expanding animation; it will feel awkward.

Instead, I would design both the compact and expanded versions of the card in such a way that some of the content is always visible. A photo, a name or title, perhaps a section header, stays visible while the other content is blinked out on mouse-click. As the card-expanding animation ends, synchronously either move the headers to their new positions and then quickly fade the content in, or keep only persistent content that can remain static and fade in more content.

The goal is to change the content in the page element, without dissociating the element from its context. Play with the animation so that that it feels "natural", if I can use that word without raising the topic of skeuomorphism.

|improve this answer
  • +1 to keeping some elements visible always - this greatly improved the flow of our card-based UI – Brian Muenzenmeyer Sep 8 '15 at 16:00
1

If card layout changes maybe better use another metaphor for expanded card. For example, you can display somebody's personal data as Business card View or Passport View. In this case your variant 2 with fading works good.

|improve this answer
0

Probably you can put some thick line at the bottom, so user can understand he can click it.

And after click on a line card can be expanded with unfold animation, showing new info on the places that were hidden before.

|improve this answer
0

A better way is to smoothly transition elements into their new sizes/shapes and locations, maintaining continuity so it's less confusing. Fading them out and fading them in in a new shape/location would lose continuity and be slightly confusing ("is that the same element, or is it a new one?"). Newly revealed elements could fade in, and elements could be faded out to hide since there's no continuity to preserve in those cases.

Somewhat advanced implementation skills are needed, but it would be both usable and "cool". Be sure and keep the transition duration short, like 1/2 second or less.

|improve this answer

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.