Login Page
Overview
The login page template is a preconfigured form and page layout for applications that need authentication. The login page enables a user to access an application by entering their authentication info.
Usage
When to use:
- When a user wants to access his application’s personal account.
- When a user logs out voluntarily or because of inactivity, they can be redirected to the login page.
Anatomy
Composition break down
| Required elements | |
|---|---|
| Main navigation | Simplified navigation with useful links and a language switcher. |
| Login panel title | A title that describe the form action (login) and can also provide the application name. |
| Form | Single or paired fields that will submit the login data. The form includes the primary action and can also suggest a helper link. |
| Optional elements | |
|---|---|
| Alternatives | Secondary action suggesting an alternative login option. This action leads to another experience/page. |
| Footer | If relevant, the footer contains a link to the sign up experience as a tertiary action. Can also contain a disclaimer text. |
Behaviour
Size, spacing and position
The Login panel maximum width is 464px. The Login panel is included in a container with 16px, centred.
Error message
Error message should appear in a alert component at the top of the form container. Error messages should be clear and concise. They should help users understand what went wrong and give users steps to resolve the error. Do not use error message specific to an input, prefer an error banner global to the form.
Multi-steps
It’s possible to use the login page template to build a multi-steps authentication flow. Use the same Login panel by adapting the content according to your steps.
Marketing content
If you need to add some marketing or illustrated content to the login page, please contact the Quantum Core Team.
Usage Guidelines
Size, spacing and position
- Don’t: change the maximum size of width, spacing, centred position.
- Do: keep the maximum width to 464px for the Login panel and be careful to use the correct padding in desktop and mobile
Clear and concise content
- Don’t: write too much text in your title or in your disclaimer.
- Do: be clear and concise in your title and use links to dedicated pages in your disclaimer for more details.
Error message
- Don’t: give user error message specific to a form field. This protects valid email addresses and usernames from being exposed and helps keep your product be more secured.
- Do: use a clear and concise error messages displayed as a global banner at the top of the form container.
Required field are obvious
- Don’t: use the required asterisk symbol
- Do: leave the asterisk symbol out from the Login panel. The form is short and the experience makes it obvious that both fields are required.
Marketing content and other branding decorations
- Don’t: add any decoration to the template. No marketing or branding decoration usage guidelines have been documented yet but we want to think about it.
- Do: If you have needs and suggestions regarding marketing content, please comment the section so we can discuss about it.