How To Use Two Factor Authentication (2FA) In UX Design

Insert a six digit passcode. Open this email to confirm it’s you. Two Factor Authentication (2FA) is popping up everywhere as a way to protect user and company privacy.

And with good reason, in 2020 30,000 websites were hacked a DAY, and a cyber attack started every 40 seconds (IT Chronicles). With figures like these, it’s no wonder 8 out 10 are concerned about their cyber security (HubSpot). The traditional landscape for using just username and password is becoming a bit too basic for modern hackers with sophisticated techniques.

This is where two factor authentication comes in, adding some much needed muscle to your online security. By having a second step to verifying a login or a login from a new device, bad actors with just your username and password can find themselves stopped in their tracks. According to Microsoft, multi-factor authentication can actually prevent 99.9% of attacks on business accounts, whether they be hacking attempts or password theft (Microsoft).

But with greater security comes other considerations, like how can you implement it in a way that doesn’t turn off users. Extra steps and details to enter can easily turn a good user experience into one they ultimately give up.

If you want to hear about the types of two-factor authentication and how you can design them into your app or digital experience, read on!

Using Two Factor Authentication In UX Design

So we’ve seen the benefits 2FA can bring to software, websites and apps, but how can we use two-factor authentication in a way that fits in with good UX design principles?

Let’s run through some of the types of 2FA quickly:

• Push notifications
• Email/SMS one-time codes (OTC)
• Authentication apps
• Security questions
• Physical hardware (fobs, cards, USBs, NFC enabled devices)
• Biometrics

How we will rank the following methods are by security provided, speed of access, stages involved, setup and cost. Check out our top ways of signing in securely below:

* Please note that though we are ranking security methods on their security and influence on UX, this is not to say that some methods are worse than not having two factor authentication at all. For the greatest security for users, you should look to implement some form of 2FA.

2FA Types Ranked For Best UX

1st. Push Notifications (E.g. Google Prompts)

One we’ve noticed most notably in Google, logged into your gmail account on another machine to check your emails, you may notice that you receive a prompt on your mobile device (if that’s connected) to ask if you just signed in elsewhere. This is Google Prompts, an example of a push notification for 2FA, and a type of authentication that Google’s Product Manager, Rodrigo Pavia, has made the default option due to its “better user experience“.

This is also the most popular two-factor authentication method, with an uptake of 68% (DataProt).

How Does It Work?

Upon signing in with username and password, a push notification will be sent via your mobile phone or connected device to ask if you have tried to sign in, with details of the device and time. You’re then asked to click between limited options, e.g. ‘Yes’ or ‘No’.

In the case of Google Prompts, by clicking ‘Yes’, the login on your separate device should automatically update itself to give access. By clicking ‘No’, the user will be denied access.

Pros for the user –

• Free
• Fast and simple to use
• Doesn’t require extra downloads or long set up
• No entering of codes required, one-click user experience
• Can prevent unauthorised logins fast

Cons for the user –

• Needs internet connection
• Could be too simple. You could accidentally approve something you didn’t intend to
• Not all are widespread

Verdict –

Push notifications rank as our favourite, due to their simplicity, speed, and robust security. This ticks all of our boxes, being safe against hackers who don’t have access to your mobile and requiring little more than clicking yes or no.

How To Design It –

We think from a quick and easy standpoint, push notifications Google’s Prompt authentication technique has plenty of takeaways.

For starters, a page will be needed to instruct the user upon sign in on what’s going to happen. This can be anything from “Please check x device and click ‘Yes’ to sign in. This page should incorporate plenty of white space and be free of distractions to help the user concentrate on the message.

On the prompt itself, there should be a clear question about if the person has tried to sign in, and the options you want to offer. Spacing between ‘Yes’ and ‘No’ should be considered to minimise accidental clicks and text should be unambiguous to prevent confusion.

2nd. Email or SMS (One-Time Codes)

One of the most common two factor authentication methods is email/SMS messages with a one-time code.

How does it work?

Upon logging in with your username and password, an email or SMS will be triggered that includes a one-time code that needs to be submitted.

Pros for the user –

• Free
• Simple to use
• May not require internet access only
• Doesn’t require extra downloads or long set up
• If you make a mistake, you can typically request a new one
• Widespread use

Cons for the user –

• Not a completely secure way of transmitting sensitive codes
• Requires input and can be annoying if you miss the notification
• Dependent on internet or mobile service being available

The Verdict –

Email and SMS take second spot due to ease of use and how ubiquitous mobile phone use is. It’s quick deployment and no set up time means that users can get in fast while feeling comfortable that this second step has made their account more secure. It’s also bolstered by the usual ability to request another if you hadn’t received one already or have misplaced it.

This tops the authenticator app in our opinion as if you have notifications enabled the one-time code can be accessed very quickly, cutting out the need to download a separate authenticator app or access it every time you’re required to log in again. However, if the account requires a higher degree of security based on its data sensitivity, you may want to consider the authentication app above this.

How To Design It –

As a combination of email and SMS can deliver the best chance of being received, we recommend upon sign in:

1. A webpage with a message to indicate that a one-time code has been issued to your preferred communication method. Text should be clear and easy to understand. An open text box with an instruction to enter the code received here should be prominently placed.
2. You could incorporate an option to send to the secondary contact method. This shouldn’t be placed prominently as to cause someone to get a different method issued without reading the statement properly. This could be done via a radio button which switches the verification method, or even a less bold link to click to populate alternatives.
3. The email should state the passcode and indicate any essential information about sharing this code.

3rd. Authentication Apps

Similar to the email and SMS one-time codes, authentication apps have become a prominent method to verification. Accessible via your smartphone, the apps serve the purpose of generating time-based security codes for the second leg of authentication. This can be seen with various CMS’, all of which have plugins that utilise authentication apps to verify users. Apps themselves are offered by providers like Google, Microsoft and Twilio.

How does it work?

Set up: You will need to first have given the user an account before instructing the user to download a integrated authentication app. They will then need to register this account on the app, whether by QR codes or entering a specific key, before being able to get their first code.

At the time of using it: Once you’ve submitted your username and password, the site or app will ask for a 2FA code. The user will then need to navigate to the smartphone app, find the relevant site your looking to access and insert the code (time-based or otherwise) that’s against it.

Pros for the user –

• Free
• Simple to use (once set up)
• Codes are not static
• Highly secure
• Difficult to compromise or intercept

Cons for the user –

• Set up takes more steps for users when compared to other methods
• Everyday use can be frustrating having to navigate to the app

Verdict –

Although there are fewer cons for this method, we’ve placed it third on the basis that it can be a little cumbersome UX wise. We’ve given it high points on security, with it being harder to intercept than email or SMS, and for generally having non-static codes.

However, having to open your app every time and copying the code into the other device is not as seamless as it could be. As codes can be time-based, you won’t be notified of a code when you try to sign in like push notifications, preventing an quick look to copy the code. This is the main advantage from a UX standpoint that the top two have over authentication apps.

How To Design It –

Authentication apps require API’s to link an application to an authenticator. Upon getting the API’s, the aim will be to make clear to the user what they will need to download an app and register your user.

We suggest adopting a QR code-first method, whereby you could link to the app store via a QR code, while also utilising the QR code scanner for a fast way of registering a user. This method has the requirements of a web page with instructions and a QR code, and then a follow up page for the user to insert their code to sign in for the first time.

This can then be incorporated into the regular login process, requesting a username and password, before then asking for a 2FA code from the desired app.

4th. Physical Keys

Physical keys and fobs feel like they’re straight out of a spy movie, and probably because they are one of the most secure methods out there for two factor authentication.

Pros for the user –

• Almost impossible to replicate unless you steal the physical device itself, most secure option until biometrics becomes more mass market
• Operates offline
• (If providing an automatic token over a code) Works as soon as it’s plugged into your device
• Can be used for mobile, desktop and more
• Can’t be intercepted over email or SMS

Cons for the user –

• Can be lost or damaged
• If stolen then recovering access is extremely difficult
• It’s possible to forget it when you need it or its relevant adapter
• Can be costly
• Not widely used

Verdict –

Although it’s the most secure method in this list, where it currently falls down is on the UX side. Although it’s great for accessing specific devices and custom files, it’s not widely used in the industry due to cost and how cumbersome it can be to use a physical authenticator.

How To Design It  –

With it being more of a product experience, what we recommend is making it as difficult to forget and as quick to initiate as possible. Elements like designing with an ability to attach to key rings, having NFC or Bluetooth login capabilities can all be game changers, preventing any loss while also quickly allowing sign in at a tap of the device.

5th. Security Questions

Probably the method most of us are familiar with. Whether it’s asking what’s the name of our best friend or last pet, security questions can be an easy way of preventing instant log in when a password (alone) has been compromised.

How does it work?

For services using security questions, they can be presented as a follow up screen, with an open text field for answering a specified user question. This takes advantage of personal data beyond our password or which may not be compromised.

Pros for the user –

• Free
• Simple to implement and answer
• Doesn’t require extra downloads or long set up
• Fairly widespread use

Cons for the user –

• If you forget, then you will likely have to get in contact with customer services
• If a data breach includes security questions then your entire account will be compromised too
• The answer is static and not time dependent
• Can take time if it’s a long answer
• Can be attacked by Brute Force tactics if they know your password already

Verdict –

Although security questions are straightforward to use and can be good on the UX front, they have drawbacks. For teams using the same account, using one person’s security question can be painful due to it not being personal to them. Alongside this, we’re most concerned about it being a static answer. As it’s not generated at the time from somewhere else, the security question stays the same. If a data breach occurs, your security question could well have been taken too leaving your customers vulnerable.

In terms of UX, it may be simple and may not require logging into another app or copying a code, it’s still not as fast as options like push notifications in terms of seamless access.

How To Design It –

If you’re going to implement security questions we recommend trying to make it as easy as possible for teams and individuals alike.

The security question interface need not be complicated. A question heading and an open text field that validates the answer is all you need for individuals. For teams, you may want to have security questions for each user of your system. E.g. Tom will get x, while Jane will get y, can prevent singular questions that only certain members can answer.

(Unranked) Biometric

With over 70% of smartphones coming equipped with fingerprint sensors (Android Authority), use of biometrics is slowly becoming an increasingly popular way of logging into mobile apps. Utilising assets only the user has, e.g. face scans and fingerprints, biometrics is finding itself applied as an outright first line of account defense as it’s near impossible to replicate.

With that said, we haven’t ranked biometrics in this list just yet is as it hasn’t established itself as a secondary authentication method, nor might it ever be as it may replace the need for 2FA completely. 

There are some great applications of biometric sign in, for example modern smartphones and use of face and voice for creating accounts with banks like Starling. They can be very quick and produce the fast user experiences we as UX designers crave, but at this moment, at a significant cost. We’ll wait and see how biometrics take shape and if they do start influencing two factor authentication.

Ready to revamp your digital customer experience?

How you use two factor authentication can be just one step in your aim for good UX design. Whether it’s a new app or an existing website, the team at PixelTree have all the expertise to make your UX simple, clean, and memorable.

For organisations with an existing app/website/experience, get in touch to claim a free 1 hour UX audit.

For organisations with a new app/website/experience, tell us more about your project on our contact form.