24

I've got a dashboard that shows both active and unactivated parts of an app (users opt in to a service). Is there any standard for the best way to show an element/section is unactivated? Any way to encourage activation?

enter image description here

I'm sure there are numerous examples out there of apps that have "can't use this till you pay" section, but I can't seem to find anything that would illuminate a standard practice here.

Thanks!

edit: I'm picking this up from someone else's design. Here's my starting point: http://imgur.com/a/vtjfN

Improve this question
5
  • do you have a mock of the work you've done so far? That can help to get an appropriate suggestion for your situation.
    – Mike M
    Sep 8, 2017 at 18:47
  • Yeah, good call. I'm actually picking up the work from a company that hasn't really had a designer before. I'll attach the starting design to the original question.
    – Sam Thornton
    Sep 8, 2017 at 18:51
  • 3
    I like (and therefore upvoted) all answers so far so I won't add anything over them, exception made of this (on top of the existing answers): if you need users to perform an action... use a CTA (filled, colored, VISIBLE!) . Then replace those "manage" buttons with just a link and you'll immediately improve activation ratio while preserving the current features
    – Devin
    Sep 8, 2017 at 19:32
  • Great insight, Devin!
    – Sam Thornton
    Sep 8, 2017 at 19:56
  • 1
    I think they should be greyed out - but all the features are greyed out already in your mockup, even the activated ones! Maybe colour in the ones that are activated.
    – user253751
    Sep 11, 2017 at 0:15

3 Answers 3

Reset to default
30

One question to ask is: Is the user aware of the benefits of upgrading / activating? How am I improving their life?

In the current state, you have a card list, other than the button label, I can't differentiate between the two. I also don't really see the benefits, and 'Activate' could mean a committment before I've learned what it's doing for my company.

Give me a reason (or feeling) of why I should buy.

If you're asking people for more money/commitment, you have a chance to:

  • teach them more
  • let them try it
  • use social proof (all the cool kids are doing it!)
  • present relevant examples
  • show testimonials

Kathy Sierra has some good illustrations of making users awesome, and bringing them more engagement with your products:

enter image description here

The cards don't give a lot of room for all of this, but you could differentiate in style and/or placement of these cards:

enter image description here

Your situation

At the very least, you don't bug existing users who may mistakenly click on the wrong card, and are presented with some sort of sales pitch. Next you can try some marketing copy to see what gets the best response, and can perhaps list a couple of benefits up front:

enter image description here

As for the design, this is just a crappy first shot (my copywriting is lame), but you can try some different color, type, and CTA buttons to see if it attracts at least some first clicks, then you have a whole other opportunity to demonstrate the value your additional services bring to the customer.

Improve this answer
24

Although I like your solution of naming the buttons differently (manage vs activate) but I did not noticed the difference in vocabulary right away. In my experience, I like ghosting the unavailable containers and perhaps a little snipe in the corner. Allow the entire box to be clickable.

enter image description here

Improve this answer
4
  • 18
    Not a big fan of large-region-clickable if there's any chance it will be dealt with on a touchscreen. It's super maddening when most of the surface causes actions because mis-taps are so common. Make the button say "upgrade" instead of "manage" since the latter is definitely wrong, and make the button the hot spot.
    – Harper - Reinstate Monica
    Sep 9, 2017 at 4:33
  • 2
    @Harper, then disable the effect on mobiles? I don't understand when people suggest things like "this desktop behavior will be a bad experience on mobiles, so you should remove it from the desktop experience".
    – ESR
    Sep 11, 2017 at 4:40
  • @EdmundReed You should get a job as Skype right now.
    – Weckar E.
    Sep 11, 2017 at 9:01
  • @WeckarE. do not get me started on Skype's UX!
    – ESR
    Sep 11, 2017 at 10:55
5

Try making the "activate" buttons stand out compared to the "manage" buttons ( e.g. ghost and filled buttons. Depends on the options you have according to your UI styleguide). Reduce the opacity of the unactivated sections by let's say 50% and set them to full opacity on hover ( if it's a web app).

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.