Why Are Login Buttons So Tiny?

By Borke Obada-Obieh

Ever wondered why the “Sign In” or “Log in” button/link appears almost invisible on a website? Isn't it weird that the first task users would want to carry out on a page appears as one of the tiniest links on the website? Sometimes, it’s almost as if the website designers designed the Login button as an afterthought. Tiny Login buttons is a popular trend employed by most websites. However, this shouldn't be the case, as most times users are left with the task of trying to figure out where exactly the login button is, in the midst of so many other information offered on the site. 

Most times the Login/Sign in button appears extremely tiny on the right-hand side of websites, alongside many other distracting information. See snapshots below, 

Figure 1: Shows the Sign In link for MSN.com

Figure 2: Shows the Log In link for Wordpress.com

Sometimes the Login button appears very tiny on the left hand side of the website as shown on popular e-commerce site E-bay, 

 Figure 3: Shows the Sign In link for Ebay website

Sometimes the SignIn button appears further down the page as shown in Myspace homepage below, 

 Figure 4: Shows the Sign In Button for myspace.com

Othertimes, the login option is entirely hidden. Users would have to look for it under other menu options. See snapshots of Apple’s home page below, 

Figure 5: Shows the home page of Apple.com with the hidden Sign In option

 Figure 6: Shows the home page for Apple.com, revealing the tiny Sign In option that is visible only when the Menu item above is clicked

Even some banks have opted for tiny login button for their online banking transaction. This can be seen on the snapshot of the Bank of Montreal home page below,

Figure 7: Shows the Sign In link of the Bank Of Montreal's website

Most times the tiny login buttons are usually confused with the huge Sign Up button because somewhere in the users mind, the huge button has to be the Sign In button. This is seen in the case of Facebook and Pinterest's website. (See Figure 8 and Figure 12)

 Figure 8: Shows the tiny Log In Button on Pinterest home page conflicting with the huge Sign Up Button

What is common with all the websites' snapshots displayed above is the tiny Login or Signin option appearing among other information at strange positions on the websites. However, the designing of websites this way wasn't always the case. There was an era when login buttons were not so tiny. And these buttons were either centralised or placed at positions that were visible to users. See examples of such websites below, 

 Figure 9: Youtube’s Homepage in 2005, showing a big and visible Login Option on it’s homepage[2]

 Figure 10: Youtube in 2016, showing the tiny sign in option

Figure 11: Facebook in 2004, giving users the visible option of login in or signing up [2]

Figure 12: Facebook in 2016 with the tiny login option and huge Sign up option

Figure 13: Myspace in 2009, with the huge login and sign up options  in comparison to myspace in 2016 as seen in Figure 3 [2]

The tiny Login button design violates major usability principles as stated in Dr. Timothy C. Lethbridge class notes [1]. The principles violated includes, 

PRINCIPLE 1: Ensure that the user always knows what he or she can and should do next.

Ensure that the user can figure out the affordance (what commands are available and are not available).

Make the most important commands stand out [1].

PRINCIPLE 2:  Ensure that the UI’s appearance is uncluttered.

Avoid displaying too much information. 

Organize the information effectively[1].

Most tiny login buttons appear as tiny options in cluttered websites. As a result of the Signin buttons being so tiny and sometimes hidden, the sequences users have to follow to achieve a task as simple as login in becomes complex and strenuous. Users often have to fumble through other many options on a website, in order locate the Sign in button.

PRINCIPLE 3: Use understandable encoding techniques.

Colour, shading, emphasis, grouping (no flashing)[1].

Apart from using a tiny Login button, some sites such as Wordpress.com matches the color of the button with the color of the background, making the Sign in button harder to located.(See Figure 2). 

PRINCIPLE 4: Ensure that the sequences of actions to achieve a task are as simple as possible.

Reduce the amount of reading and manipulation the user has to do.

Website users could easily confuse huge Sign up button as the Sign in button. Some users may have to complete the Sign up form before realising they are Signing up not Signing into the website. 

SUGGESTED SOLUTION 

Signin/Login buttons should be a centralised option on every website. Let every user know they are capable of Login into a website, and be able to do so with ease. Suggested design can be see in Figure 14, which is a snapshot of Linkedin's Login page 

Figure 14: Recommended Login/Signin Design 

If other information need to be displayed on the home page along side the Login option, then the Login option displayed above can be moved to the right or left side of the website. However the design should remain as shown below, and not reduced to a tiny button.The colours used for the design should be in high contrast with the background colour. The Sign up button on the other end should be smaller in size.  I truly believe this will greatly improve user’s experience on websites.


References
[1] Dr. Timothy C. Lethbridge. Class Notes titled “Core Usability Engineering Concepts”
[2] http://archive.org/web/web.php