I'm working on an OTP (one-time password) screen on a mobile app. The primary method of OTP is via SMS. There's also an option for sending OTP by email. Currently, my layout is like this, where I place the OTP via email option outside the main layout group to reduce the emphasis on it.

enter image description here

Would there be a better way of laying out the OTP by email link?

  • 1
    What is an OTP? Feb 6, 2020 at 6:22
  • one time password
    – Blue Ocean
    Feb 6, 2020 at 7:25
  • This appears to be the "OTP input" screen that a user sees after requesting the OTP. Is the user able to choose between SMS and email when requesting the OTP? Feb 6, 2020 at 15:47
  • yes. they can do that 'from the resend by email' link below
    – Blue Ocean
    Feb 7, 2020 at 1:13

2 Answers 2


I do not think you have to reduce the emphasis on the "Resend by email" option.

Consider this: People will only want to receive OTP by email if SMS is not available or reachable. The most primary thing, in this case, will then be to enter OTP. Based on this primary action, we can assume that whatever medium the user prefers to receive the OTP should be made discoverable to them.

I have provided 3 options.

enter image description here

Option 1: layered button on the keyboard, that allows for either option.

Option 2: Both of them in the same layout, but positioning SMS at the top.

Option 3: Just basically send OTP to both phone and email to start with. There could be a debatable security concern here, but users can receive OTP via either anyway, so why not just send to both and save users some cognitive load in those rare occurrences.

  • 1
    I think your option 3 might be a bit dangerous, as you alluded to. If I know my email address to be compromised, I definitely do not want my OTP to be sent to that address. Feb 6, 2020 at 15:42
  • 1
    "People will only want to receive OTP by email if SMS is not available or reachable." FYI, SMS is much, much less secure than email, and for some people SMS might involve charges.
    – jamesdlin
    Feb 6, 2020 at 17:41
  • @Oluwatobi curious why did you split the 6 boxes have been split to groups of 2
    – Blue Ocean
    Feb 7, 2020 at 1:19
  • 2
    It's basically to allow for simpler visual tracking. Same reason phone numbers are also separated. Feb 7, 2020 at 10:28
  1. I'd ideally see a usage distribution of both in the target audience if you can or have. Then go about deciding which track to go, as in, make SMS and email an "and" case or "either/or" case.
  2. If you cannot find out the above then I'd roll with the assumption that "redundancy" won't hurt or take away from the experience. That means sending OTP via both simultaneously. Proceed with caution and always highlight that the assumption is that "it won't affect the UX negatively."
  3. Another way to solve this would be to go by bias-action, that is: does the OTP come after a phone number input screen or an email. Since the OTP, second step, would follow an order bias of the previous step, it'd make sense to highlight the "OTP with X" where X is the method used in the previous step, that is either phone number or email.

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.