Skip to end of metadata
Go to start of metadata

Background

We've been operating OIM/PKI user certificate interface for well over an year, and we've learned some major friction points that our users often experience with this interface.

For example, we currently hide various action forms (like Renew) from our users if they can't actually perform those actions. This means that, even though user is at the right place where they normally should be able to renew a certificate (if they only provided their proper user certificate), they often mistakenly assume that the URL on our notification was wrong and they are on the wrong page. Even if they somehow know that they are the right place, they don't know why they can't perform an expected action to their certificate causing frustrates and having to open a GOC ticket to resolve the issue.

In general, I believe we should do following to our user interface.

1) Make it clear for user to know why they can't perform certain actions, instead of completely hiding it.

2) Reorganize the page so that user is more likely to find feature / information they are looking for.

3) For renew/issue steps, make it clear for user to know that multiple steps are required to fulfill these actions and know which steps they are currently in.

Proposed Updates

To address some of these point and improve the user experience, I've made following changes to our user certificate workflow UI as a prototype.

Reorganize request detail / action page 

  • Replaced large blue buttons for downloading pkcs7 certificate with a smaller links. Placed them under Public certificate section to make it clear that those certificate only contains public certificate. User was often confused that, in order to renew their certificate, all they have to do is to push those large buttons (since they are the biggest buttons in the page). Public certificates are very rarely used actually, and user downloads them almost always by mistake.

  • "tacked in" certificate detail and logs under separate tabs so that user can focus on specific tasks that they are trying to perform. For example, Revoke tab now only shows absolutely minimum amount of information to complete the task.
  • Combined with the URL based auto-opening of each tab (explained later), this reduces the chance that user miss certain features on the page, or get confused as to where to do those tasks.

Display certain tabs at all time, and show why they can't perform certain tasks

JIRA Issues Macro: Data cannot be retrieved due to an unexpected error

  • I've made "Renew" a permanent tab to be displayed regardless of if user can actually renew the certificate or not. This allows user to know that they are at the right page, and display criteria that they must meet if they can't perform the action.
  • Some criteria can show user specific details (like the DN user is using) to help GOC staff diagnose problems more easily (user can send the screenshot which includes all the important information)

  • User can click on "Explain" to expand each criteria to learn more about how to fix them by themselves. GOC staff can edit each explanation on-the-fly and keep improving each explanation.

Show a wizard for multi-step process

JIRA Issues Macro: Data cannot be retrieved due to an unexpected error

  • In order to make it clear to user that certain action requires multi-step interaction, I've turned those steps (Renew, and Issue steps) into a Wizard form.

  • User will click "next" button at the bottom of each steps to progress through the wizard.

 

  • Issue certificate monitors issuing process, and automatically moves to Download Certificate stage once the certificate is issued.

  • Once it reaches the Download Certificate stage, the issued certificate will be automatically downloaded to the user's browser.
  • If the automatic download does not work for some reason, user can then click on the "Download Certificate (PKCS12)" button to download the certificate.
  • Reaching the end of wizard chevron indicates to user that he/she has completed the task successfully.

Icon
I need to add "how to install pkcs12 certificate to browser" link under this stage (and make it editable?). Content welcomed!

Issue step also uses Wizard form (similar to Renew but without the agreement step – user already agreed during the request submission)

RA actions

Approve/Reject tabs are only displayed if user(RA) can actually perform the task, and tabs are sorted in the order with the highest likelihood of the action performed by the RA. The request page opens the left most tab by default (in this case Approve tab), which happens to be the most frequently performed action after the request was submitted. RA will probably need to visit the Detail / Log tab before approving, but they will know which tab to use to approve the request.

Automatically opening a tab via URL parameter

(Alain says there is a JIRA ticket for this, but I can't find it)

We can specify which tab to open by default by setting "t" URL parameter. For example..

https://oim-itb.grid.iu.edu/oim/certificateuser?id=2377&t=renew

Above URL opens renew tab when user opens the page.

I've updated various notification contents asking users to perform various tasks (renew, issue, revoke, etc..) to include the "t" parameter so that when user clicks on such URLs, they will land on the right tab to perform suggested tasks.

TODO

I need GOC team to test this, and give me feedbacks so that I can turn this prototype into a test-ready state. I need to know what else I must do to improve usability. Is there any other tab that I should make it permanent (and display criteria list if user can't perform the task)? Maybe like.. Issue tab? Should I display other key fields above the tabs? (I can display additional key fields - based on which state the request is in).

Various textual content needs to be updated. Ones that I have on the screenshots are more or less templates.

Various features can be tested in OIM-ITB (https://oim-itb.grid.iu.edu/oim). I can reset / update certificate state if someone is interested in testing out specific features. 

 

 

 

  • No labels