I'm working on a Website where I need to show multiple artwork campaigns for the user on index page, These campaigns are time bound and expired after a certain time (e.g. campaign abc will expire after 7 days of activation). after Expiration, user cannot buy that artwork.

I want to show 'Expired' campaigns differently from the 'Active' campaigns but don't want to make a separate section for it, mean active and expired campaigns would be on same page but with different design. Right now I'm handling it by making "Expired" campaign's background color slightly gray while active ones are in white color (as shown in picture). but it doesn't look very appealing to me. I want to have some different indicators of expired campaigns other than just changing background color.

Any suggestions would be appreciated.

enter image description here

  • You could also order the entries so that all expired campaigns are at the end -- this would create a separation without having to have a separate sections. (You might also want to order live campaigns by the (increasing) number of days to go, so those that are about to expire soonest are seen first. – TripeHound May 30 '17 at 10:00

I think that the current grey that you have used is a little too dark: the contrast with the red text makes the entire card difficult to read. In addition, by making it grey, as you did, it makes it stand out among the others, so users might see those ones first. So, instead of creating more focus on the campaigns that actually expired, you should emphasize the ones that are still available. I think you have three main options here:

  1. Make the entire expired card with a really low opacity (30%, 50%, etc).
  2. Maybe you need to reorganize your information and see if it actually makes sense to still have the expired cards. I know you said you didn't want a different section. but why draw attention to something that they might want, but can't have. At least leave a message saying: this campaign will be back in 2 weeks or something.
  3. Change the expired card style: don't keep the heart on the top for example, because that one is expired already, so maybe it's not active anymore.

The main point here is not to focus too much on the expired stuff, you need people to look at your active campaigns, not at the expired ones.

| improve this answer | |

there are any number of ways that you can present this information to the user, so you're likely to get more opinionated responses to this question, then perhaps best practices.

What I can do is list a few options:

  • Try an 'expired' watermark over the image, and a lower opacity on the image. Often in web, a lower opacity can mean 'disabled' and this could be a similar pattern to 'expired'.
  • I like your current idea, with the grey background, but maybe you could opt for a light coloured grey, like an #f8f8f8, I think your current grey is a little dark.
  • You've also done a good job with the 'Expired' text instead of the number of days to go, if you were looking for that to stand out more, perhaps you could add a red colour to the text.

Like I say, you have a lot of options, change of opacity, watermarks, change the size, change the mouse cursor on hover, crop the bottom half of the tile to hide the progress bar...

I think you've put yourself off your own design by using a grey that is too dark, my main suggestion would be to try a lower opacity.

Also remember, if you're coding this up, make sure you make it accessible to users that might not be able to see any visual distinction between the tiles.

| improve this answer | |

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