3

I am trying to change credentials UI where a user should insert username & password . The change will include another field called PEM which can be either an upload button or a dropzone. The requirement is that the user need to provide a username and a PEM File OR a Password.

The UI currently looks like so:

enter image description here

Where should I add the dropzone OR upload button?

  • It is not clear from the context, but if you have private keys inside the PEM file and you use that as a method of authentication - this is probably not a good idea. The point of a private key is to let the user keep it in a safe place and never give it away, nor expose it to other parties. If the file only contains a certificate - certificates themselves are assumed to be public - so they should not be used for authentication. Make sure you talk to your crypto folks about it. – ralien May 22 at 12:55
4

If you need to be clear about choices, you can use the expose within radio button pattern.

Lukew has a section on this in his old (but still relevant) book Web form design (pg 186)

When the number of inputs is quite small–one to two additonal inputs–this method can maintain the context of a person's initial selection while introducing the required selection-dependent inputs where they are most relevant.

enter image description here I don't have the larger context of your UI, but it seems within this section there will only be two choices.

If you have knowledge of the default that most users choose, you can make that the top initial exposed choice.

  • Great answer. BTW, what tool did you use for the mockup? – fnasim Jun 12 at 12:29
  • 1
    It's balsamiq. It's actually built in when you make an answer! There's an icon that launches a browser version when you ask a question, or reply to one. – Mike M Jun 12 at 13:16
  • Yeah! Just found out. The web version does indeed. Thanks. – fnasim Jun 12 at 13:26
0

I might be miss understanding the question.

But I would let the user log in followed by a request for their PEM. Its simple for the user and the user wont forget a step considering he/she will be guided through the process.

enter image description here

PEM

  • 1
    I think OP is saying that the user has to enter the username, but has the option to enter either the PEM file, or a password. This design seems like it's requiring the password always. – maxathousand May 21 at 15:48
  • this indeed requires you to enter the pass to proceed for pem entry – Tomm May 21 at 15:49
0

Your answers are great, although my problem wasn't 100% clear.

I am posting another option I was thinking of, since your solutions didn't fit the size of the modal the issue resides in. Also, there were few restrictions that I couldn't bypass and forced me to go over this UX:

For Basic Credential:

enter image description here

For PEM Credential:

enter image description here

After adding a file:

enter image description here

Thanks again for your assistance!

  • where does the user choose between using a password vs PEM? – Mike M May 22 at 15:05
  • There are two radio buttons in the same modal. He can switch between them and render the PEM or Password. It sounds simple, but in practice there is a lot involved (i.e context, scope, and re-usability). – jank May 22 at 15:16

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.