Login Widget
Last updated: September 11, 2015 at 22:57 pm

Sequence and behaviors associated with your customer's login experience.


Visual example of the element:


What problem does this element or pattern solve?
Like the shopping cart, you may opt to funnel all your customers to a single login page. However, you may also decide it is better to have smaller login widgets that can be accessed on demand from various pages. While such login tools may seem simple at first glance, they have an extensive number of use cases and highly varied functionality that can make their layout and coding extremely complex.
It applies to these platforms:

Desktop Web, Tablet Web, Smartphone Web, Desktop App, Tablet App, Smartphone App

An example of this element or pattern in production:


Detailed specifications

Sample Content

  • Will you always funnel users to a stand alone login page (like Amazon.com) or will you have widgets on multiple pages to permit login while in path? Or will you use both?
  • Will your login widget be initially hidden and then expanded on click? Or will it be displayed persistently? Will it be accessible from the global header or just at select points within the path?
  • What features will be included or omitted from the widget compared to your main login screen? Will users be able to create a new account from the widget? Will they be able to retrieve a lost user name or password? Or will those two instances re-route the user to your stand-alone page?
  • Like many other complex elements, the login interaction may need to vary greatly from device to device. Provide business rules and define the behaviors and visual styling for all devices.


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:
username/password widget, login block, login module, authorization, sign in, sign-in widget
Related elements within this Style Framework:


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