Excellent landing box design needs: simple and clear button highlighting

We usually encounter most of the internet is those kinds of input boxes, as a site to become a member of the first step, the login box you must be dealing with every day.

This article compares the major SNS and community website Login box, to see exactly how the Login box is considered "excellent".

The general eye movement habits of human reading are from left to right from top to bottom.

So the lower left corner and upper right corner of a page are considered to be the blind spot area.

1. Microblogging site of the landing interface comparison

Sina Micro Blog

Mailbox password and other hints text directly embedded in the input box, very concise and consistent with the visual habits from the down, while highlighting the "immediately register Micro bo" to attract users to register.

Tencent Weibo

In addition to the "instant microblogging" this big button is eye-catching, the landing button to the right there is a registered connection. At the same time, Tencent landing using its own products QQ mailbox and micro-blog, etc. do not support the external community such as MSN login (everyone knows)

NetEase Micro Blog

Registration button text and style are basically the same as Sina, but the input box does not prompt the user what the "input", at the same time, "Next automatic landing" has not been selected by default, the product details of the design need to spend a little more effort.

Microblogging sites need to attract a large number of users to register to seize the community so will focus on the "register" this link, from the detailed degree of detail of product design to see Sina > Tencent > NetEase

2. Electronic Commerce type Landing interface comparison

Taobao

I appreciate Taobao's design is Taobao this logo and landing button are orange design, the user's browsing habits will be fully met, and your eyes will be between the two orange objects jump.

Every guest

Where customers and Taobao department of the same landing

This kind of website conforms to the principle of "repetition" of the design principle, that is, the style is unified, and the Table alignment page is compact.

3.LBS Community

Street side

The landing button at the side of the street is very prominent using the "Sina Weibo landing" one by one correspondence, while registration is also particularly conspicuous

Muttering

Muttering to the landing button is not prominent, while the "Log in with other accounts" more Drop-down Select operation Registration connection is not obvious

4. Other

The most tease to know

and 37signals

Comparison of the above types of websites, excellent landing box to tell the user a simple "How do I Do", the button needs to focus on highlighting (contrast principle), at the same time Taobao department of the color reuse is very consistent with the user's reading habits.

Summary points:

1. The text on the compact interface is clearly separated from the user's reading confusion by the content

2. Reuse of the same color or material can be consistent with the site style and lead users to click

3 alignment must be conditional

Good design and products need to be done by heart, and everything may become different when it comes to seeing things differently.

Author: Torres

Article Source: douban.com/note/