Login Page is The Face of Product Brand
Apart from the landing page where all the information regarding the product offering is shown, login page is also the face of product brand, sitting in between product promotion flyer (landing page) with the actual products and giving the strong product impression during the onboarding process. Potential customer might reluctant to even start the product trial if the login page is not convincing. Login page layout and design must be algined with the brand identity.
Imagine an health insuarnce SaaS but have “funky” login page layout and design like instagram. Potential user might having doubt about the product capability and integrity.
Login page must loaded fast enough in less than 3 seconds before the potential user abandon (exit) the page. High resolution image with flashy graphics should be avoided as it may increase the login page size and affecting the website load time.
Login page layout look book
Login page are generally composed from three UI elements including
- login form using username and password
- SSO (single sign on) login (gmail, apple, facebook or github)
- registration links (if the user prefer to not use the SSO
All of these three UI element are absolute neccesary to have maximum chance of getting new potential leads/user. Having only username and password as authentication (login) method might hinder some user that opted to have fast login/onboarding using their existing email/social media account.
In otherhand, the traditional username and password option can’t be removed as there are some people that have concern with their anonymity and prefer to use their 2nd or 3rd email/social media accounts.
Below are the common layout which often found on digital product login page.
Two Column Layout
Two column login layout giving wide space for maximum branding purposes. One column to display the main login form and the others can be used for the product branding. Some product put the login form on left side like digital ocean and aws cloud, while some product put the login componentformon the right side.
— which position is the best for login form?
Most human languages (except arabic) are written from left to right. People are naturally read the text from left to right. Based on that behavior, it is recommended to put the login form on the left and put the branding or production information on the right side.
Only Form Layout
Centralized login form giving more relax and non formal vibe to the user
Login form with various sign-in options will be placed on the center of the page. Leaving no space to place product information. Most of social media like facebook, X or instagram use such layout as it giving non formal vibes.
Central login form make the background can be easily adjusted to blend with the brand identity / marketing campaigns.
Integrated Login Form on The Page Header
Conventional login form on the website header
The most conventional (old-school) layout for login page is having the form located at the website header. Often found on online forum that use phpBB as the engine/framework.
Alternatively, the login form is displayed inside a hidden dropdown. It will shown up if the user click “login” menu.
Generally its not recommended to use this style/layout as it make the header to be complex and human can only focus one one thing/objectives at once.
