Sign In Form
Contents
Overview
鈥淪ign in鈥 is used to log into the system, or to recover lost password.
When to Use
Use this pattern when user needs to sign into the system.
Interaction and Behavior
General:
The user may 鈥渢ab鈥 to navigate the form in the following order:
First tab = active 鈥淯sername鈥 field. Second tab = active 鈥淧assword鈥 field. Third tab = focus on 鈥淪ign in鈥 button. Fourth tab = focus on hyperlink (鈥淔orgot your password?鈥) Fifth tab = return to top of the order.
Initial state:
In its initial state the sign-in module consists of
- a Welcome message
- two text fields 鈥 Username and Password
- a link to retrieve the user鈥檚 password
- a button to submit the user鈥檚 credentials 鈥 Sign in
Error state:
In the event that invalid credentials are submitted the sign-in module consists of
- an alert message informing the user that either the Username or Password is invalid
- two text fields 鈥 Username and Password, where the Username field will retain the initial entry as typed by the user and be the active field and the password field will be blank
- a link to retrieve the user鈥檚 password
- a button to submit the user鈥檚 credentials 鈥 Sign in
Password retrieval:
If the user opts to retrieve their password via the hyperlink (鈥淔orgot your password?鈥) the sign-in module will display
- the title Password Help in the style of the Welcome message from the initial state
- instructional text explaining the process for retrieving one鈥檚 password
- a text field to enter the user鈥檚 email address used at the time of registration; a button to submit the user鈥檚 email address and initiate the process 鈥 Retrieve Password
- a link to cancel the retrieval and return to the initial state of the sign-in module 鈥 鈥淏ack to Sign in鈥
Confirmation of password retrieval:
Once a user submits their email address to retreive their password, the module will provide a confirmation on the action via text in the module. * the title Password Help in the style of the Welcome message from the initial state * text confirming that an email has been sent * a link to return to the initial state of the sign-in module 鈥 鈥淏ack to Sign in鈥
Error of password retrieval:
In the event that the user enters an invalid email address, either by mistyping or by entering an unregistered email address, the module will display an alert message. * the title Password Help in the style of the Welcome message from the initial state * an alert message indicating the email address failed * a text field to enter the user鈥檚 email address used at the time of registration; a button to submit the user鈥檚 email address and initiate the process 鈥 Retrieve Password * a link to cancel the retrieval and return to the initial state of the sign-in module 鈥 鈥淏ack to Sign in鈥
Successful sign-out:
When the user signs out of the system they are presented with the sign-in module as follows
- an alert message informing the user that sign-out was successful
- two text fields 鈥 Username and Password
- a link to retrieve the user鈥檚 password
- a button to submit the user鈥檚 credentials 鈥 Sign in.
Style
Suggested specifications.
The module container should be centered in the browser and should be some percentage of the width viewport (about one-half) but no less that 450px on desktop and tablet form factors.
Initial state:
Error state:
Password Retrieval:
Confirmation of password retrieval:
Error of password retrieval:
Successful sign-out:
Assets
For any questions or additional information about the sign-in module please contact the Magento User Experience and Product Design team.
Find us on