5

So, let's say you have a user who receives a code for 2FA (BC 12345) on email that starts with 2 letters and is followed by 5 numbers. They will be prompted on the website with 3 options (AB, BC, CD) and have to select the correct one (two letters - BC in this case) from those 3 and then enter the following numbers.

This is the way that was designed - by separating the options from input using dotted border. no options selected

BC option selected

Is there a better pattern that will be better to solve this? Is the dotted line enough information to make it clear to the user that they have to select the correct 2 letters from the code? Any help would be appreciated! Thank you!

4
  • 9
    ...curious, what is the reason behind separating the first two letters and the numbers? Is it some sort of not-a-robot check? ...rather than use a text field input mask. Commented Nov 23, 2022 at 22:18
  • 17
    Seems too complex. Why not just have the user enter BC12345 and split the alpha from the numeric part after submission, if that is required for computer-related reasons?
    – nigel222
    Commented Nov 24, 2022 at 9:45
  • 6
    Why not keep the text field disabled until one of the three possible letter codes is selected?
    – bracco23
    Commented Nov 24, 2022 at 11:08
  • 9
    Unless you explicitly coded for it, by having (only) buttons you are not allowing users to copy & paste from e-mail to form. Which is a very good way to avoid errors/typos.
    – Pablo H
    Commented Nov 24, 2022 at 14:18

6 Answers 6

23

If the reason for the boxes is to help the user typing a random code. We can evaluate that from a modelling point of view, using simple KLM:

  • Design with buttons + input: (Pressing the correct button) MSPBB + (Writing the number) MPBBMHKKKKK = 13.9s

  • Simple input: MSPBBMHKKKKKKK = 11.94s

Assuming that the users would be fairly efficient at understanding the concept described, the simple input should remain the faster method.

This can also be understood intuitively, the proposed design asks two questions to the user "Which of the following letters did you see on the email?" and "Can you recall the numbers that you saw?".

Another note with the "design with buttons + input" is that users will not be able to copy and paste the code from their email, increasing cognitive load.

1
  • +1 and also, tabbing is always a mess when there are buttons and text fields.
    – Clumsy cat
    Commented Nov 25, 2022 at 9:54
11

One way to provide clarity is to simply tell them what they need to do:

enter image description here

Select is the first word for the starting letters, vs. Enter for the digits.

You can test this to see if users understand.

2
  • 1
    There is a text above that I didn't include, but not the way you presented it. I asked some users and found that they need help understanding that they must select the correct option from those 3 and don't even bother reading the text above. I will do more tests with your solution. Thanks!
    – snowfel
    Commented Nov 23, 2022 at 19:49
  • 1
    I think the idea that people read (or notice!) even enormous, bold, flashing text, let alone that they read small noticeably greyed-out text, is probably optimistic.
    – LSpice
    Commented Nov 26, 2022 at 22:23
6

Why have only 3 options? AB, BC, CD?

This is just adding to the complexity, which I must admit I would find confusing if I saw this form.

You could just add another digit, and remove the need for this altogether. If you must go with this, use the HTML "placeholder" and suggest in the input box the sort of input, eg. "AB 12345". With, or without the space? What if they enter two spaces?

I've had similar issues in the past, where you get sent a code on your phone, eg, "A123456" and you have to type in "123456" only. Why the heck send the "A" if you don't have to type it in?

The very fact that you are asking this indicates that the user finds this confusing. The solution is not to somehow show them that the boxes have to be pressed, but to eliminate them altogether.

1

If I were a user of the application, I would not have chosen the right option the first time:

  • The black text gives the feeling of being an element that is part of the interface with no possibility of change
  • The size equal to the editable number gives the feeling of being a complete prefix of the number
  • If the callout text of the action outside the frame is not enough help, place it inside the element to act on.

I would choose to use a design similar to a sticker album, with the watermark-type image of the element that should be in that position and a text indicating the action to be performed.

enter image description here

1
  • 1
    At first glance, my immediate thought is that I would have to select all of the boxes (similar to a capture/bot test)... IMHO, some text, placed somewhere, saying "Select one" is clearer. Or maybe the first box says "Select this" and the subsequent boxes each say "or this". Commented Nov 26, 2022 at 8:26
1

The issue is the missing (visual) context that describes how 3 dotted boxes with letters and a text field are related to each other.

Specifically the context is missing for:

  1. Box relations to each other, e.g. can only 1 box be selected or multiple?
  2. Box relation to the text field, e.g. if the text field only used to enter a value if none of the boxed values applies?

The traditional visual context would be to use a drop-down next to the text field and embed both within a frame. It's also somewhat usual to add a dash between the drop down and the text field, indicating two segments and implying that the left drop-down segment is independent from the right text field segment and one is not a replacement of the other.

I fully agree with Katleho's answer, which is to not use these boxes at all. This is a classic example of "over-design" for something that works completely different considering common intuition. A 2FA OTP is entered fully as displayed in 99.9999% of UIs out there.

I disagree with Mike's answer, which is to add text to explain the UI. That alone is an obvious clue that the UI is so bad that it needs a handbook.

The visually most unfavorable suggestion seems to be Danielillo's answer which is to lay text over text. That is probably one of the biggest no-no's in UI design. Aside from not solving the missing context issue.

The other issue is that you require the user two use two input devices for a simple code. First a mouse or trackpad, then a keyboard. These devices use different regions in the brain due to their different nature. One is primarily spacial the other linguistic / symbolic. That creates an additional inefficiency.

An additional issue is that a user cannot copy/paste the whole string but needs to click for one part and enter the other part manually, which prohibits time-efficient entering.

If you are designing a car with a steering wheel that makes the car turn left when you steer right, you should have a very good reason to do so.

0

I would not guess that dashed boxes mean I should click to select one of them.

A great way to communicate functionality is to use conventions people are already familiar with. Radio buttons are the most familiar "you must select only one option" pattern. This changes the design of the UI, but form should follow function.

You also don't have to use default radio button styles. As long as they look like radio options, that will be enough to signify the functionality.

Wireframe showing a radio button array followed by a text field

But a bigger question is: Why require users to select the first part of the code and then type the second part? Surely it would be easier to just ask them to type the whole code? Katleho Hadar's answer provides a more in-depth description of why this approach is much better.

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.