Need a call to action after adding 2FA on a 2FA-required site

UX
1

I just signed up on a site that requires 2FA for accounts. Immediately after creating my account I’m forced to this screen:

image
image1219×854 103 KB

It’s obvious that I needed to add at least one authenticator to continue, however after adding them the message

You are required to enable two-factor authentication before accessing this site.

does not go away, nor is there a clear next step.

Were I not already familiar I might wonder “Do I need to trigger a save? Where do I go next?”

I suggest:

  • have the error message change to e.g. “You have added at least one authenticator, you may add additional methods or [continue] to the site.” with a green background
  • perhaps add a Continue button at the bottom to give the user a clear CTA
10 Likes
2

This is good feedback. I’d make sure to highly discourage leaving this screen with a single Security Key as the only option - insist that a second SK or alternate option is enabled.

6 Likes
3

While observing someone else go through this:

  • they weren’t sure which button to hit to add a U2F Yubikey or a TOTP
  • they weren’t sure what to call the token and why it mattered
  • they weren’t sure what had been registered after registering Windows Hello as a security key

I think normally someone visiting the 2FA page already knows about these terms, whereas someone on a 2FA-required site might not.

I might change the text to include examples:

Time-Based Tokens

example: Google Authenticator
+ Add TOTP Authenticator

Security Keys

example: Windows Hello, Yubikey, U2F Hardware Tokens
+ Add Security Key

6 Likes
4

or perhaps (given discussion in internal chat on how to make the process easier for the user):

Time-Based Tokens

example: Google Authenticator
+ Add TOTP Authenticator

Portable Security Keys

example: Yubikey, U2F Hardware Tokens
+ Add Security Key

Platform Security Keys

example: Windows Hello, Apple FaceID
+ Add Security Key

5 Likes