Description

The login page allows a user to gain access to an application by entering their user ID (or an alternative authentication method) and password.

Open

Usage & Behavior

General guidelines

The login page is presented to users in the following scenarios:

• When a user wants to gain access to an app.

• When a user has logged out voluntarily. They will be automatically redirected back to the login page.

• When a user has been logged out due to inactivity. In this scenario, when the user logs back in they should be redirected to the last page they were on, before being logged out.

Structure

The functional part of the login page is the login form section. It is comprised of 3 parts:

• Application branding.

• User ID and password capture.

• Navigation and form submission.

Part	Details	Visuals

Part	Details	Visuals
Application branding	Contains: Verint brand logo. Application name.	Open
User ID and password capture	Can contain: User ID input field. Password input field. Typing in the password field will show circular placeholders for security unless the show password button is used. A Change username link. This allows the user to return to the previous page in case they want to log in with a different use ID. A Show/toggle password button, to allow the password to be entered in plain text. Informational and error messages.	Open   Open
Navigation and form submission	Can contain: Form submission Dialog Buttons. A Register account link (where feature is enabled). A Forgot password link (where feature is enabled). A Reset Password link.	Open

Progressive authentication

LUX uses a 2-step authentication flow:

User ID capture	Password capture
Open	Open

The user ID should be requested upfront with a Continue button to move forward. From this point the user will either:

• continue to an external single sign-on (SSO) flow, or

• they will be presented a local password field.

SSO

• Single sign-on (SSO) enables users to log in to multiple, unrelated products through one authentication portal, rather than using a unique username and password for each product.

• SSO login can be applied in one of two ways:

  • Where possible, the system will identify the SSO user ID automatically. In this case the user will be taken to their organization’s SSO flow (rather than the local Verint password capture screen).

  • In case this is not possible, the login page will include the relevant SSO login buttons (e.g. Facebook, Microsoft etc.).

SSO direct flow

Open

User registration

• Self service user registration enables users to register for access to any Verint application that offers ad-hoc user registration rather than only user provision via system administration.

• User registration is triggered by clicking the New user? Register link on the login page.

• Clicking the link opens a popup dialog with the registration form. Different applications may have different input fields.

User registration examples

Open Open

Password reset

• Users can reset their password by clicking the Reset password link underneath the password field.

• Clicking the link opens a popup dialog displaying the relevant password reset form.

Password reset examples

Open Open

Placement and Positioning

LUX recommends a centered positioning for the login flow, with a fluid responsive design that adapts to the available UI space and the device being used.

Full layout

A fixed width login form in the center of the screen (with a fluid width background). This creates a simple entry point for users. Users can focus on their primary goal of logging in to the application. A brand-approved background texture should be used.

Open

Responsive layout

A fluid login form occupying the full width of the screen.

• A dynamic UI which provides natural support for variable screen sizes.

• Inputs and buttons should also have a fluid width.

• All footer information should be stacked vertically instead of horizontally.

A plain white background should be used, as UI real estate is scarce. Complex background illustrations are not appropriate as they may impact the performance of the initial page load on cell networks.

Open

Default State

The default state of the login form should be empty with no pre-filled fields (as shown above).

Browser password managers or plug-ins may affect the default state.

Validations and errors

Informational messages	Error messages
Open	Open

Info messages

Info messages should be short, clear, and concise, and should be used to convey any critical information that may be relevant to the user.

They are positioned as the first item in the login form, beneath the branding.

Info messages may consist of things such as:

• Expected or current application(s) down-time.

• Brief or important versioning information.

• Logged out due to inactivity (depending on application and domain).

Error messages

For consistent information and error handling:

• Only enable the login button when the password field is not empty.

• Do not give users an error if they enter an email or username that is not valid until after they have submitted the form on the password page. This protects valid email addresses and usernames from being exposed and helps to keep the product secure.

• Do not render more than one error message per failed login.

Error messages should be displayed beneath the password field once a login attempt has been made. If the login attempt fails:

1. the page should be reloaded,

2. the error message should be rendered,

3. the password field should be cleared,

4. the input focus should be returned to the password field, and

5. the submission button should be disabled.

The following error messages are suggested. (More specific messages for authentication errors may be used with the approval of global architecture).

Best practices

Do:

• Disable all login fields after the user ID or password is submitted. Re-enable them once form submission is complete, and either succeeds or a login error is presented.

• Follow platform recommended form elements and structures for login forms. (See Web Example Structure). This enables password managers and 3rd party user-installed plug-ins to operate as expected. These plug-ins and password managers may change the default state of the login form.

Do not:

• Include additional marketing content on the login page. By navigating to the login page, users have already shown intent to log in, so additional marketing content about the product is unnecessary and will only serve to distract from their primary goal.

Accessibility Compliance

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Design

Zeplin link	Screen thumbnail

Zeplin link	Screen thumbnail
https://zpl.io/bWqxgBp	Open
https://zpl.io/VxLZRKX	Open
https://zpl.io/2jQJ35A	Open

Code

Open