9

I am designing a service, where certain features would be available only for registered (and paid plan) users.

On the front page, there are two options: "Quick scan", that selects the settings on behalf of the user and "Custom scan", where the advanced user can tamper with the settings. Primary and secondary button next to each other, where the secondary button has a padlock icon to the right of the text and the primary has a "scan" icon to the left

I want to display both of them, but indicate that the "Custom scan" is not available, so that the user knows that at least there is such feature, and might be intrigued by it later on.

But how do I show that a button is "locked"?

  • A simple "disabled" state won't do, because it doesn't offer extra information
  • Displaying a padlock icon on the button makes it hard to distinguish from a regular button with an icon, so the user might mistake the padlock for the button's action
  • It is an accessibility tool (for designers), so its accessibility needs to be exemplary

Here are some experiments:

Different versions of secondary and primary buttons

Improve this question
7
  • 2
    What extra information do you want to indicate that a straightforward (and widely-used and -understood) disabled state doesn't?
    – gidds
    May 19 at 11:14
  • Good question. Firstly, creating an accessible, recognizable disabled state is rather difficult, since the most common way to do so is graying it out, which then fails the contrast requirements. Secondly, I want the user to know immediately why the button is "disabled". I thought that if it has a padlock icon, the user would right away at least know that "oh it's locked" and out of curiosity hover over it to see a popup telling them to subscribe to unlock this feature. Or it could have a small label near the button telling this
    – Claudio
    May 19 at 16:39
  • Why would contrast requirements necessarily apply to a disabled button? (Back in the days when I did UI work, I made sure that every enabled button had a tooltip briefly explaining what it would do, and every disabled button had a tooltip briefly explaining why. But that was a desktop app, before smartphones were popular… Still, I think some of the principles haven't changed that much.)
    – gidds
    May 19 at 18:37
  • It could add confusion to the low-visioned users, "why is there no button". In some cases this could be really bad for the UX. Let's say we have a form with a disabled button, but the user can't see it and due to some errors in the fields it doesn't "light up" (there should be inline error messages, sure) - the user would get confused why there's no button to submit the form and probably get frustrated. Perhaps not the worst UX crime to fail contrast requirements on a disabled button, but still a good practice to ensure it.
    – Claudio
    May 20 at 9:00
  • (pro feature) or similar underneath in small text. But is small text "inaccessible"?
    – user51426
    May 20 at 17:49

5 Answers 5

Reset to default
15

Consistency (WCAG 3.2.4) and labeling (WCAG 4.1.2) and are two important points in accessibility that apply to your situation.

In your first two button examples, the "quick scan" has an icon on the left but the "custom scan" does not. And not only does it not have an icon on the left but instead it has an icon on the right.

For consistency sake, have all the buttons have an icon on the left (or wherever you want to put it) and then, in addition, you can have an icon on the right with the lock feature.

enter image description here

It's much easier to learn that pattern, that all buttons have an icon on the left that matches what the button will do, and then the buttons that have a second icon on the right will be "special". In this case, requiring a paid account.

Or if you want to keep it "clean", have no icon on the left for any of the buttons but have a lock icon for features only available for paid accounts.

enter image description here

If you do have icons for all buttons, the icons are decorative (as opposed to informative) since the text on the button matches what the icon is trying to convey so the icons can be hidden from assistive technology such as screen readers. (How they're hidden is an implementation/coding detail that is best addressed on stackoverflow.com, but if you're using HTML, then aria-hidden="true" will work.)

However, the lock icon is informative so its meaning must be conveyed to assistive technology. That's usually through alternative text on an image or you can include it on the accessible name of the button (often with aria-label).

Update

I just came across this real world example on the AllTrails iOS app. I was using it the other weekend and tapped on a few buttons that had a special blue hexagon icon and when I tapped on them, they took me to trial offer page. This isn't the best example because they weren't consistent in the placement of their icon, but it's essentially the same concept.

The "Preview trail" button has a blue hexagon in the upper right but it's not obvious what the icon means unless you tap on the button.

enter image description here

The "Download map" option (it doesn't look like a button) has a blue hexagon in the upper left, different from the "Preview trail" but it's the same icon and brings up the same trial sign up page.

enter image description here

And here's what happens when you tap on one of those buttons:

enter image description here

Improve this answer
6

There are different patterns to approach this but the main goal is to allow discoverability & learnability for the user on premium features.

I would suggest your research well on what works well for your type of business.

A few options:

  • Intent-based ( Instead of locking the functionality provide a CTA based on the outcome that the feature produces for the user. You can even pull some data from the customer and craft a custom message here. enter image description here
  • Feature exploration:

I'm not sure if this counts as a dark pattern or feature discoverability but don't disable the button, allow the user to click the Custom Scan and on that page show the functionality of it but introduce a CTA and disable the action button. On one side, it allows the user to view what the feature would be able to do for them and decide if it serves them. On the other side, users might find it a bit deceptive but if you mark the button with a premium icon or even better icon + tag.

  • Clickable premium button

Allow users to click on the button but make it very visible that it's a premium offering and open up a dialog introducing the feature, benefits and ways to get the needed plan.

Again I would like to mention that these are some of the options that I know. In terms of what converts better and what are all possible ways to achieve it you need to do some research.

Improve this answer
2
  • 4
    Indeed, not tagging the button as "premium-only" will make it frustrating to use. And, because of the effort to remember which buttons not to click because they don't work anyway, in the long run, it might detract user from using the site at all. But tagging and showing sneak peek is fine, maybe even nice.
    – Pablo H
    May 19 at 13:28
  • I'm a big fan of the "clickable premium button" approach. On the tagging side, typically I've seen people use a dollar icon rather than a lock icon.
    – Brian
    May 19 at 19:43
6

I'll take inspiration from both excellent answers so far and suggest the following: Place both icons on either the right or the left side, whichever you prefer, but ensure consistency.

Now, the issue here is that, based on what you've mentioned, this isn't a premium feature yet, but rather something that will be available in the future. You could utilize Chris' suggestion to inform users about this feature, perhaps even displaying a dialog box with a subscription form as a reminder.

However, if it were up to me, I would eliminate the "Custom" button entirely. It doesn't create anticipation, but rather frustration. Moreover, from an accessibility standpoint, having an active button that serves no purpose adds to cognitive load and can present accessibility concerns for individuals with certain cognitive and neurological disabilities.

If your intention is to inform users about the upcoming feature, why not simply include a text that says "Custom Scan coming soon!" (or something similar)?

Improve this answer
1
  • 1
    Funnily enough, my tool is to help designers address cognitive and neurological disabilities, so - as I mentioned - I want it to be exemplary. Makes a lot of sense what you said about adding to cognitive load. I might've misworded my question - the feature is there already, just behind a paywall and I want the user to be aware of that
    – Claudio
    May 19 at 16:44
4

IMHO, if you want to transport the paywall message, please use a paywall icon. Not a disabled or locked icon. If there's a locked icon, I'd ask my IT support department why it is locked and how to unlock it. If it has a pay icon, I know that my company will not unlock it for me.

I'm certainly not the best designer, but a $ Pro indicator makes it quite clear to me that I have to pay in order to upgrade to the Pro version to unlock the functionality:

Suggestion

In all other points, I agree to @slugolicious, so I even took his image and modified it.

Improve this answer
2
  • 1
    This. A padlock icon usually means that the feature has been disabled by the administrator, and when I'm in the administrator group, my expectation would be that I'll be able to click the button and be presented with an elevation prompt.
    – Simon Richter
    May 21 at 7:15
  • Thanks, I appreciate that. My answer was just using the icon the OP used for a locked feature. Whether they use a padlock icon or "pro" icon or whatever, was beyond the scope of the question, but I like the "pro" idea.
    – slugolicious
    May 26 at 3:31
-2

Don't indicate it at all because the button is not really locked, it just requires a few extra steps. Just make it conveniently transfer the user directly to the registration form where they could enter their credit card information and quickly buy the user subscription. Sunk cost fallacy (user having invested effort by clicking the button) will make them more eager to pay up.

Improve this answer
1
  • While it could be true that the user is more eager to pay up after having clicked the button, in this case I'm sure it would just make them frustrated, because they didn't expect to go to the registration page. That could be considered a dark pattern as well. And bad accessibility, since the button doesn't clearly indicate what does it do or where does it lead.
    – Claudio
    May 22 at 8:40

Your Answer

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

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