8

My company is preparing to launch a "freemium" web application for business users. Most of the surface area of the app will be enabled in the free version, but a few features (e.g. ability to assign different permissions to different users, filtering by branch office for multi-branch customers, advanced reporting, integration with other business software, etc.) will be disabled in the free version.

Instead of totally hiding those disabled features in the free version's user interface, I'd like to leave them in place as ways to educate free users about features they're missing, hopefully enticing some free users to upgrade and reducing training time after upgrades because users will already know where paid features live in the app.

What would be a good visual treatment for controls (mostly dropdown boxes, buttons, and menu navigation links) to convey that each:

  1. is disabled
  2. can be enabled by upgrading
  3. can be clicked on to find out more informaton about this feature
  4. (longer-term) might have a way to turn on the feature temporarily to try it out

Also, is anyone familiar with apps that have successfully implemented this kind of "see what you're missing!" UX without seeing overly crass and commercial?

Improve this question

4 Answers 4

Reset to default
5

One approach is to keep the premium features intentionally enabled, so that the user can play around with them. However, if the user finally wants to save or print the results in any way, this is to be disallowed. This way the user can convince himself that the premium features work as promised, but he can't work efficiently until they are completely unlocked.

You can also restrict the amount of data the user is allowed to work with, e.g. a limited set of users can be edited, statistics can be generated only for up to 20 rows of data, etc. In doing so, the user gets familiar with the features too.

I think this way the user is more tempted to upgrade than by greying out some features and compensating this with context-related descriptions.

Improve this answer
3
  • 1
    If you're going to disable important features like saving/printing do be upfront about it
    – Zelda
    Commented Feb 28, 2012 at 12:06
  • ok, that's true: maybe the user has worked half an hour and then he must throw it away... To prevent this, it should be clearly indicated that the user is in evaluation mode - maybe supported by a different layout.
    – Anna Prenzel
    Commented Feb 28, 2012 at 12:15
  • That's a really bad suggestion. It's very deceptive to let people take advantage of features only to find out that the work they had completed can't be saved.
    – dnbrv
    Commented Feb 28, 2012 at 13:35
3

Gray text for disabled, with a little icon or "pro" flag to indicate that it can be unlocked, and how.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Improve this answer
1

Picnik addresses this by keeping the premium effects on screen, but they are distinguished by having them visually labelled as 'premium'.

Improve this answer
2
  • Why is that approach a good one? How can it be used in the situation the OP has?
    – dnbrv
    Commented Feb 28, 2012 at 14:08
  • Hi @Adrian - unfortunately Piknik has removed all premium paywalls recently so I can't see the UI you're referring to. Want to modify your answer to include a screenshot?
    – Justin Grant
    Commented Feb 28, 2012 at 19:26
1

Make them grey, 40% faded, or give them a grey background.

On hover or click, a tooltip explaining what they do and that they are only available as a pro feature should appear.

For better conversions, put a non-intrusive "upgrade to pro now" button in the tooltip.

Improve this answer

Your Answer

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

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