4

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

5
  • 1
    If there are 4 different personas, their context is different. Why do you think UX is not good?
    – Swapna
    May 6 '20 at 6:52
  • it seems abit abrupt to deny user access. I added 1 example of possible improvements at the bottom of the question. What you think of it?
    – Ho Yuan Fa
    May 6 '20 at 7:12
  • Can you explain more about user types, how they access the app? Do all of them access a single page? My suggestion would be show the necessary tabs to specific persona i,e remove unwanted tabs if they don't have access to something. E.g for user 4, tab 1,2,3 is not needed. Why not remove them completely and show the 4th pane only? To access 1,2,3 show them a separate message to contact to admin
    – Swapna
    May 6 '20 at 7:26
  • Users are in charge of submitting and approving different part of a whole process. Let's use this image, (images.app.goo.gl/22b64xw8o6u7VBwL8), as an example. They have access to some sub-process, however the system will not prevent user from searching those process that are in-progress. Another problem that i forget to mention is that default tab selection is based on current process step. The system might still be in process step 1 when user 4 tries to check on the completion of the process, resulting in him going to the access denied page.
    – Ho Yuan Fa
    May 6 '20 at 8:06
  • Removing tabs completely is a possible UX improvement. I worried that it might remove certain context or bigger picture off the particular sub-process the user is doing.
    – Ho Yuan Fa
    May 6 '20 at 8:06
6

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: enter image description here

3
1

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.

1
  • This is something worth considering to make those tabs more useful.
    – Ho Yuan Fa
    May 20 '20 at 0:54

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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