Patterns

Login

Usage

Principles

Simplicity, security, and usability are important design principles for the login pattern. They give us a seamless user experience, ensure ease of use, protect your information, and provide convenience.

Simplicity

Keep the login process straightforward and easy to understand, minimizing complexity and steps required from the user.

Security

Implement robust security measures to protect user credentials and sensitive information, such as password encryption and secure communication protocols.

Usability

Design the login interface with a focus on user experience, making it intuitive and easy for users to enter their credentials and navigate the login process.

Provide login options for a versatile and user-friendly login experience, ensuring users are not limited to a single choice.

Saved credentials

Streamline login with saved credentials for a seamless user experience.

Bank-ID

Secure and convenient identification for easy authentication and transactions.

QR-code

QR codes for a quick and easy way to access your account.

User feedback

Provide visual feedback to indicate successful login or any relevant information to the user.

Example of user feedback

The loader is an example of feedback that prompts you to start your Bank-ID to continue the login process preferable with supporting text.

User identification

Our main login is Bank-ID, but if that is not the case, include fields for users to enter their credentials, such as username or email and password.

Password recovery

If the user forget their login credentials we offer a solution to help you recover access and continue seamlessly.

Error

Errors can occur in the login process due to various reasons. It’s important to communicate to the user so that they can correct it.

Incorrect password

If you enter an incorrect password, you will receive an error message indicating that the password is incorrect. Please double-check your password and try again.

Incorrect SSN

If you enter an incorrect social security number, you'll see an error message with feedback on how to resolve the issue.

Error Dialogs

If an error occurs during login, a dialog will provide specific information and guidance to resolve the issue.

Example of how an error dialog can look like.

Content

Do

To ensure easy access and visibility, it is recommended to showcase the login functionality early in your view, preferably in the top header.

Don't

Avoid burying the login feature deep within your website or application. It should be visible and accessible for the users.

Two entry points

A– User icon, when clicked a user menu opens.
B – This takes you directly to the login view.

When clicked on the user icon (A), a user menu opens, and the primary action within this menu is the login call to action to provide a clear and easy pathway.

Formatting

The login anatomy aims to provide a user-friendly and secure experience, ensuring users can easily authenticate their identities and access the desired services or features.

A – Login options.
B – Title (Svenska Spel tone of voice).
C – Call to action options, Bank–ID on this unit or another unit.
D – Cancel.
E – Option to become a customer (if you’re not already one).
F – Information about Bank-ID.
G – Legal information about secure login and fraud prevention.
H – Svenska Spel Logotype (Sender).
I – Legal text.
J – Scrim (The purpose of a scrim is to improve legibility and focus on the foreground content by reducing the visual prominence of the background.).

Grouping

Group information correctly to maintain a seamless user experience. By organizing related content together, users can easily find what they need and navigate effortlessly. This enhances clarity, reduces cognitive load, and improves overall usability. Proper grouping ensures intuitive exploration and prevents confusion.

A - These are the information/elements we want the user to interact with.
B - This group contains secondary important information.