As a web application consultant, I often get situations presented to me by my clients, asking what is the best way to handle UI presentation for users with improper permissions? For example, if a user does not have the authority to create, edit, delete, or change something on a web application, how should the interactive elements be shown? What state should we present input elements on the screen?
There are three states that an interactive element can be in concerning authorization permissions; active, disabled, and hidden. First, the active state is when the end-user can fully interact with a field on the web page, like enter data with the keyboard and click with the mouse. Second, the disabled state is when the end-user can see the element on the screen, but it is styled with a washed-out color along with almost all interactivity events removed (no click, keypress, focus, etc.). Third, an element is hidden when the end-user cannot see the interactive element either visually or with some navigation tool for accessibility.
I usually advise project teams to hide an interactive element if the end-user is not authorized. Why? First, the end-user should not be presented with more graphics and features on the screen than is necessary. Rendering all the extra buttons and input fields for which they lack permissions creates clutter and is a waste of time. Second, showing the end-user that there are fields on the screen, which they are not allowed to use makes them feel less in control and less powerful. It affects a user’s psyche to see all the interaction potential be limited by their overall standing in an organization’s hierarchy. Third, performing client-side validation and styling the interactive controls based on permissions can be error-prone and time-consuming. It is just easier to simply make that element disappear.
In summary, it is best to remove elements from the screen when an end-user has no permissions to use it. It cleans up the page and provides better user experience (UX) with your web product. There are some exceptions, like when you want to showcase paid, premium features for your web product. But in those instances, you’re just being a pushy salesperson. You need to demonstrate a good value proposition to incentivize a purchase path for your customers. Showing a whole bunch of disabled, read-only interactive elements on your web application to serve as advertisements is just lazy.
