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
    Commented May 22, 2019 at 12:55

3 Answers 3


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
    Commented Jun 12, 2019 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
    Commented Jun 12, 2019 at 13:16
  • Yeah! Just found out. The web version does indeed. Thanks.
    – fnasim
    Commented Jun 12, 2019 at 13:26

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


  • 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. Commented May 21, 2019 at 15:48
  • this indeed requires you to enter the pass to proceed for pem entry
    – Tom
    Commented May 21, 2019 at 15:49

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
    Commented May 22, 2019 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).
    – Tomer
    Commented May 22, 2019 at 15:16

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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