A good login design – A designers perspective on working with Azure AD B2CReading time 5 minutes

Numerous studies have indicated that users tend to abandon a service within 10-20 seconds if they experience a poor User Experience, making the Login page the first crucial point of contact with a new application.

As different apps have different logins, designed by different individuals, investing in a well-designed authentication solution can greatly benefit users, eliminating the need to recall numerous login processes and credentials.

At Zure, we specialize in Azure and typically recommend Azure AD as our preferred authentication solution.

This blog post will discuss my perspective on Login design, specifically in the context of Azure AD, with a focus on Azure AD B2C.

A consistent experience across solutions and services

Before going deeper into the design itself, some considerations about Azure AD in general from a designer’s point of view.

On the enterprise level when you offer multiple services that might be used through multiple devices, you can easily end up offering a mix of different kinds of Login experiences, which can lead to a confusing overall experience. With Azure AD there are 2 options to choose from.

Azure AD B2B is mainly targeted towards business users. It is good for organisations that want to be able to authenticate either internal users or external users from partner/supplier organisations that use the Microsoft ecosystem. But at the same time, the customization options for the login experience are quite limited.

Azure AD B2C is better for more customer-facing solutions and interactions with consumers. Where B2B is part of Azure AD, B2C is a separate service that offers much more options in the form of customisation. For a designer, there are actually numerous possibilities that can be taken into consideration when designing the flow and these can then be implemented in the form of custom policies, which allow the customisation of the flow and used features. From a development point of view, custom policies require a lot more work and testing, but on the flip side, they can help in creating a much more robust end-user experience, which usually pays back when looking at the total lifetime costs.

It all starts with the Welcome

For this case example, I intentionally selected a mobile solution as there are some additional considerations when we use Azure AD B2C as the identity management solution. Basically, 90% of the flow would be the same if we would have the same login on a website, but on mobile, there are some additional considerations.

When building a 100% native application with a built-in login, you can directly offer the user the needed form fields to enter their information, but with an external authentication service (like Azure AD B2C) you might need to re-direct them to the login service.

Be clear about what is the first step and what will happen.

It is better that the user know that the application will access another service, instead of that this would be a surprise. mobile platforms have also built-in verifications that help the user to feel secure when moving between applications

Login

Utilizing a built-in browser option within the application helps the user to stay within context as they are not directed away from the application.

Continue being clear and precise. Explain what is expected and what are options the user has. Keep the form design simple and easy to read.

Giving the user the option to see the password helps the user to have confidence that they enter the right password and it is entered correctly. In general, this can reduce frustration and help the user to have confidence that they are using the right password. It also enhances the application’s accessibility.

Accidents happen

Accidents happen. The user might misspell their email or password or just forget what password they have used in the service. Guiding the user easily through this inconvenience is important, but at the same time, security should not be neglected.

If there is an error then this needs to be communicated clearly. But from a security perspective, it is still better not to clearly tell in which field the error is, but instead refer to the login information in general.

The option to reset a password should be clearly shown at all times so that it is easily accessible and shows a way out of the problematic situation.

Guide the user

Resetting a password is not business as usual and can be an annoying extra step for the user. Due to this, it is really important to make the process as simple and clear as possible, but at the same time take necessary steps to keep it secure.

When a user needs a new password, then explain what will happen. Guide the user through the process step by. In each step inform the user what is expected from them in order to resolve the situation.

Don’t forget the email

Remember to consider the overall flow and each interaction the user might take during the process. Services like Azure AD provide standard emails that support the process, but more than often they are just plain and simply bad, with more focus on a system rather than the user perspective.

Keep the design simple. Provide enough information and highlight the most important content. Be clear about why the user is receiving the email, who is it from and what actions they can take based on the email.

Conclusion

Be clear, be consistent and be precise.

While a strong access management solution is commonly recognized as a critical business requirement for security purposes, the login experience is often undervalued. However, it serves as the initial impression that users receive, and a bad first impression can’t be undone.

Simplifying the visual elements helps to direct attention towards the content and login process, ultimately creating a more positive user experience. Small details contribute to a good first impression, and reducing the possibility of confusion can guide users towards accessing what matters most.

For a more customized and user friendly login experience, particularly for customer-facing applications running on Azure, Azure AD B2C is a better choice over B2B.

If you happen to be more interested in the technical side of Azure AD and B2C, then I highly recommend reading blog posts from my colleague Joonas, who is a wizard in all things Azure AD and access management.

Want to hear more from our Design team? You can find all our Design related blog posts here! >