Disable elements based on permissions.

Hey all, i’m adding permissions to my SaaS Payroll App. Company Admins can create / invite new admins and give them different levels of access. I’m trying to think of how to apply that access on the frontend so that the users have the best experience overall.

I considered hiding the the element if the user does not have the perms but I don’t think that offers the best ux.

I considered leaving the element and just redirecting to a denied view but that seems too 'bait and switchy’, kind of frustrating if you can click on something just to see you have no access. Right?

So I’m thinking the kindest approach would be to disable the element and maybe put in a tooltip about why the button is disabled & how to get access (from the company admin etc).

Any recommendations on how to go about disabling these buttons /links where the user has no perms etc without creating duplicate elements all over my frontend code?

Basically, I don’t want to be doing this for every case.

{% if perms.app_label.codename %}
 <button> Click Me </button>
{% else %}
<button class="disabled"> Click Me <span title=some tooltip about why the access is denied></span> </button>
{% endif %}

Actually, that’s exactly what we do. We believe it reduces potential sources of confusion for the user by not cluttering their page with options and selections that don’t apply to them at all.

Hi @KenWhitesell really appreciate your response.

Wouldn’t you agree that users of modern web apps have higher expectations of the apps they use? I want users to know that the functionality is there just that the organization for some reason or oversight has not granted them access. In a way it also prevents them from shopping around for another app that can do the thing they need. Rather, they can request the access from the appropriate admin.

What are your thoughts on that? Are you B2B, B2C or internal organization?

My application is B2B.

My primary application in this category is B2B - it’s a budgeting / reporting application. Of the roughly 10,000 users, approximately 9500 are data entry only. They have absolutely no need to perform the reporting functions. The people responsible for reporting / invoicing see the reports they need.
But none of those individuals are technically our customer. They’re not in a position to “shop around for another app”. The 10 people (or so) having full access to all the reporting features are the customer. They have selected our application because (in part) it hides information from people not needing access to it - and saves them from having to answer questions about those features.

So no, I don’t agree with your assessment here. This is pure business functionality. Anything introduced that slows people down from doing the work they need to do is counter-productive and becomes “friction” that should be worked to be eliminated.

From a business operations perspective, I think many commercial web applications are too focused on the “bells and whistles” - are over-engineered, and pay too much attentention making them “pretty and shiny”, losing sight of the fact that people just need to get certain things done. (I’ve commented on this elsewhere in this forum as well.)

If I’m entering an invoice, I want to be required to touch the mouse as little as possible. (Having it available as an option is great. Engineering a UI that requires it is not. And creating a UI that requires me to frequently switch between the mouse and keyboard is just bad.)

1 Like

Hi Ken, you’ve won me over with your very thoughtful response.

The key points for me are:

  • reduces friction
  • increases productivity
  • for developers (stay focused, simple is better than complex)

Thank you.