2

I'm working on consistent way to show 3 types of tests user can choose from.

One type of test is always active (user is doing this test).

Options are:

  • Flashcard Test (not selected)
  • Guessing Test (selected)
  • Writing Test (locked, user should be encouraged to unlock it by buying premium account)

Test options

Currently it looks very weak and misleading because Writing test looks like half active and half inactive because of green CTA text.

Any ideas how to achieve those 2 goals?

  1. user knows which type of test is currently selected
  2. user is aware that writing test is a premium feature and should click to unlock it.
JakubTutaj
  • 179
  • 4

2 Answers2

4

I see several aspects in your proposal that I would solve differently.

  1. "Flash cards" appears disabled, but is actually a valid option.
    That option currently appears as disabled as your "locked" option. I'd color all available options black, not gray, to avoid that.
  2. Show clearly which option is currently selected.
    It's always a challenge to show which one of two options is actually selected (see also my answer here). Even though things will get clearer in your example once a user goes "pro" and more options become available, I would consider using a visual indicator to avoid any guessing. As an example, I've used a white box&arrow in my mockup below.
  3. Separate advertisement from the rest.
    Since you seem to offer some functions of your service for free, some not, I would make that a clear statement. It makes the ad more prominent, for sure, but your users do get something for free after all. Making the add more prominent also helps you to better sell the for-pay aspect of your service. For example. in your case, you could show some benefits of the currently locked tests as well (might be those "points x" lines, I'm not sure). You can use these to convince your customers to go "pro".
  4. A minor point really: you've used the "unlock" icon to indicate that an option is actually locked.

So, to summarize, here's how all of this could add up:

mockup

download bmml source – Wireframes created with Balsamiq Mockups

Community
  • 1
Andreas Weder
  • 721
  • 5
  • 4
  • Thanks Andreas, this is something I was looking for. It is now very consistent, with clear value proposition. Thanks a lot! – JakubTutaj Mar 08 '14 at 18:30
  • Cool, great I could be of help! Make sure you upvote and/or mark-as-answer the replies you like, if you've found it useful. Sorry for putting it so bluntly, but it helps us and also earns you more reputation points (i.e. marking as answer does - http://ux.stackexchange.com/help/whats-reputation). Thanks! – Andreas Weder Mar 24 '14 at 14:42
0

For me, in your case :

  • Selected text should be colored
  • Standard text should be black
  • Locked text should be gray

Maybe could you display the "Go Pro" text in green only when the user hover your text.

Pop Flamingo
  • 573
  • 2
  • 11