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:
- is disabled
- can be enabled by upgrading
- can be clicked on to find out more informaton about this feature
- (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?