User Names & Passwords
Last updated: September 14, 2015 at 17:56 pm

Fields for users to log in to your site.


Visual example of the element:


What problem does this element or pattern solve?
Usernames and password fields have unique requirements and formatting which warrant their own page. Because of the complexity of the log-in process and its numerous use cases, many sites direct their customers to a stand-alone log-in page. Conversely, just as many present log-in tools on multiple pages. Regardless of the option you select, use this section to define universal behaviors and styling for these two related field types.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web

An example of this element or pattern in production:


Detailed specifications

Specifications To Consider

  • If you have a special “log-in” pattern in the Fixed Items section that details business rules such as these, you should cross-reference it here.
  • When setting up a new account, how will you communicate special requirements for valid usernames and passwords such as minimum character count or the need for a symbol or number? (Ghost text? Tool tip? Secondary label line?)
  • Will you add “remember me” functionality so users do not have to re-enter their username or password? How is this information saved?
  • Will your site mask password entry, or display the password characters? If display, must the user check an opt-in box? If the opt-in box is selected, is that setting saved?
  • How many failed password attempts do you permit before a user is locked out? How long is the lockout period?
  • If you have user-selected usernames, how is the user told his/her name is available?
  • Do you use a system such as Captcha to prevent automated login attempts? If so, how is it implemented?


Location of assets to build this element or pattern
Location of UX or visual design assets
Location of development code repository


Additional details
Information on research, user testing, or usability reports:

Not Applicable (Remember: no field should be blank!)

This element or pattern may also be known as:
login, log in, log-in box, user name, user/pass, name/pass, u/n pass, ID and password, ID/pass, log on, login info, security, gateway, authorization
Related elements within this Style Framework:

Not Applicable (Remember: no field should be blank!)



Owners and governance
UX or design 0wner
John Designowner
Email: design.owner@yourcompany.com
Business or marketing owner
Mary Businessowner
Email: business.owner@yourcompany.com
Development owner
Mike Devowner
Email: development.owner@yourcompany.com


Other information
Please include any other relevant information about this element or pattern:
Not Applicable (Remember: no field should be blank!)


Comments & Questions

Leave a Reply