Take the 2-minute tour ×
User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It's 100% free, no registration required.

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?

share|improve this question
add comment

4 Answers 4

up vote 2 down vote accepted

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.

share|improve this answer
1  
If you're going to disable important features like saving/printing do be upfront about it –  Ben Brocka Feb 28 '12 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 Feb 28 '12 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 Feb 28 '12 at 13:35
add comment

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

share|improve this answer

This post does not cite any references or sources. Please help improve this post by adding citations to reliable sources. Unsourced material may be challenged and removed.

    
Why is that approach a good one? How can it be used in the situation the OP has? –  dnbrv Feb 28 '12 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 Feb 28 '12 at 19:26
add comment

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

share|improve this answer
add comment

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.

share|improve this answer
add comment

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

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