UX improvements for tabs with access control

Question

Let's say a tab menu like the example below was used.

https://www.w3schools.com/howto/howto_js_tab_header.asp

Each tab has access control. Some users can see all the tabs, some users can only see some of the tabs, but all user will have permission to at least 1 of the tabs.

To complicate matters, each tab is part of a single big process. For example, if the page has multiples tabs, the first tab will be used for the first part of a process, the second tab will be for the second part and the last tab will be for the last stage of a process.

The access control will be used to control who is involved in each tab.

What is a good user experience for this kind of system when preventing the user from accessing those pages/tabs? For example, should those tabs that user cannot access be removed? The problem of removing tab is that it breaks up the continuity of the tabs.

A simple prototype was created to illustrate the problem.

1. User1 can access all tabs. This simulates a power user.
2. User2 can only access tabs 1 and 2. This simulates user who is required to complete the starting part of a certain business process.
3. User3 can only access tabs 2 and 3. This simulates user who is required to complete the middle part of a certain business process.
4. User4 can only access tabs 3 and 4. This simulates user who is required to complete the last part of a certain business process.

Query string "user" in the URL is used to set the current user.

As User 1: https://yuanfa-ho.outsystemscloud.com/TabswithAccessControl/SimpleForm1.aspx?user=user1

As User 2: https://yuanfa-ho.outsystemscloud.com/TabswithAccessControl/SimpleForm1.aspx?user=user2

As User 3: https://yuanfa-ho.outsystemscloud.com/TabswithAccessControl/SimpleForm2.aspx?user=user3

As User 4: https://yuanfa-ho.outsystemscloud.com/TabswithAccessControl/SimpleForm3.aspx?user=user4

As shown in this example, the access denied page is working correctly, allowing only the correct users to access. However, the user experience is not good. The user might be confused about why this is happening and think that some system error has occurred.

Possible improvement by bringing the access deny message into each of the pages;

As User 2: https://yuanfa-ho.outsystemscloud.com/TabswithAccessControl/improvedSimpleForm1.aspx?user=user2

As User 3: https://yuanfa-ho.outsystemscloud.com/TabswithAccessControl/improvedSimpleForm2.aspx?user=user3

As User 4: https://yuanfa-ho.outsystemscloud.com/TabswithAccessControl/improvedSimpleForm3.aspx?user=user4

Answer 1

Users that have no access to a page should not be able to click at it at all. If you let a user click on a button only tell them later that they have no access to its content it can make them frustrated or trust the design less.

Some suggestions:

1. I would recommend making the tabs look like a process (maybe with arrows) or at least name them 1. Process one 2. Process two etc.

2. The elements that cannot be clicked should either be styled differently (e.g in grey colour) or you should add an extra element (e.g. a lock) so it's clear to the users they have no access before they click on them.

3. Consider having a hover state to all active elements. Don't add a hover state at the elements users have no access.

4. At the inactive elements add a modal when users are hovering and on touch devices when users tap on it that says something like "No access to this step of the process"

Something like that:

Answer 2

If users may be interested in tracking the progress, readonly access would be a reasonable option in many cases. For example, after clicking on the tabs, it could say something like:

• This task is currently assigned to J. Smith.
• Status: incomplete

Of course, it depends on the reason for the access control. It may make more sense to have something like "Purchasing" instead of someone's name.