0

Scenario:

A website which provides its users a content. Some of the content is free (to any user access the site without any login needed) and some can be seen only by paying users. When you access the site and you are not logged in I want you to see only the free content. If you log in, you will see in addition the content for paying users. Imagine the site structure as group of lists. Each list has free content and non-free content:

  1. Content #1 (free)
  2. Content #2 (non-free)
  3. Content #3 (free)
  4. Content #4 (non-free)
  5. Content #5 (free)

So – random user sees 40% of the content and paying user sees 100% of the content.

My thoughts: I want to convert non-paying users to paying users so I think I should show to the users that there is content which he cannot access\see and its only for paying users, otherwise, he will see only small part of the content and it will be very poor.

Your thoughts (?):

What do you think would be the best way to show the user that there is more content that is for paying users? What would be the best 'call to action' in that case? I should show instead of the non-free content some "Click here to gain access to…", example:

  1. Content #1 (free)
  2. Click here to gain access to
  3. Content #3 (free)
  4. Click here to gain access to
  5. Content #5 (free)

Any suggestions?

  • why do you have 5 options? what's the difference between 2 and 4 or 1, 3 and 5? why not just paid/free? do you have some kind of threshold that requires different price structures? and if so, why are 2 free options? – Devin Nov 21 '16 at 19:32
2

The best way to add emphasis to any element, is to make it bolder, bigger or brighter than its counterparts. Don't go overboard. Sometimes the difference between normal and bold font is too great on small text sizes (10-16 pt) In such cases a good idea is to make the other less important options faded by 5-15%. Opacity does not need to be changed much in order to get an idea across to your end user. A size increase can help, but mainly in situations where each text is within its own container, where changing the font size wouldn't alter the position of the other listed items.

Hope this help you out!

PS: if you want to go and add extra emphasis, you can add graphics to the items or icons in order to grab their attention that way, but remember to maintain an overall sense of continuity to your list items as doing so promotes good site-flow and readability for your end user.


Edit:

Since you want to be able to inform end-users of the differences and added benefits of paid options, I would recommend what the Linode devs implemented on their site:

Linode package example (source: https://www.linode.com/pricing)

The bottom screen shot is that of their "View All Plans" option, which provides a table that contains links to each option on the right hand side. You could implement the link as part of the plan/option/package title if you prefer, which I think would be nice.


Another Note:

I used this design concept with my own site as well. It helped me organize my plans such as the following:

Example of plan cards

In this use case I wanted them to know that the basic services were provided as well as the listed items of the "Complete" package, without duplicating text. To this extent I opted to let them know that it "Includes basic package, plus..." the other services.

  • Thank you, it a bit problematic to fade the "Less important" \ free content because I still want it to be useful to the non-paying users. Icons might be useful. – Shushi Nov 21 '16 at 12:45
  • @Sharon I realize now your question wasn't about emphasis but how to tell the user what the paid options do. Let me add to my answer a possible option that I hope helps. – Leviscus Tempris Nov 21 '16 at 17:37
  • @Sharon I've updated my answer, let me know if it helps! – Leviscus Tempris Nov 21 '16 at 17:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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