Analysis of Web site login interface Design

Source: Internet
Author: User

Regardless of the design of Web pages or mobile apps, it is important to find a balance between small beauty and functional complexity. In this paper, the design of mobile app form is analyzed to see how designers achieve a small and beautiful balance between design and interaction experience.

A. The ultimate subtraction

This is a different from the conventional design ideas and get the product of the login box, which is not the usual sense of the login window. It only retains the user name input, just press ENTER can be determined, jumped out of the login interface design of the rules, color matching is enough eye-catching and simple.

Two. Compelling user interface

1. Fuzzy background

Recently, the use of fuzzy background has sprung up, because the use of fuzzy background not only makes the whole site more humane, and to a large extent to foil the atmosphere of the site to show. The following case is a fascinating landing interface, in a vague background with minimalist icons and thin lines to design, background image tones and button color is very determined to select the same colors, so that the interface harmoniously combined into a whole.

2. Dark Tone Background

As we look at the following case, the bright input box attracts all the attention. Darkened background map makes the form of a login a visual center of the page, and nothing can distract the user's attention. This is not only a quality sensory experience, but also a comfortable user experience.

3. Flattened solid color background

I am fascinated by the flat design in the following case. The basic style should be monotonous and boring, but if the color is carefully matched, the flat login interface will become lively and playful.

Three. Clear visual longitudinal line

People's visual browsing is generally "L" type of sight, meaning from top to bottom, from left to right. The design of the form interface is very focused on the user's guidance, when an interface is not too much emphasis on elements, then the form of visual browsing order in line with the "L" type of law is basically in line with the user's psychological expectations. Then, users do not have to think and find too much, can be simple and efficient completion of the form of a single fill and submit.

Four. Focus on user Experience design

Login and Registration Form usage is very high, a form of design is actually not a simple thing, user experience is something that must be considered. Some like to register and landing are placed in a page, some like to use Ajax without refreshing effect to show, anyway, a lot of tricks, in short, everything to the best user experience as starting. The design is endless! Even a registration form is worth studying carefully. If you do not value the user experience, it will cause the loss of a large number of users Web site.

1. Reduce user input

In general, each additional field in the registry will decrease the registration rate accordingly.

It is very troublesome for users to be required to fill out their email address two times or repeat the password when registering, especially on the phone. In fact, users will generally use their own common mailbox and password registration, so it is not so easy to forget. Entering a password to complete the registration is more in line with people's expectations, but in order to prevent password input and the user's expected password is different, you can use to allow users to see the plaintext password. Suppose that the user forgets the password can be found through the mailbox, and then fill in two times more easily lead to the loss of users.

2. Information Registration Tips

Providing effective information to end users is the best way to design the user experience, especially when the user registers the information with multiple input fields, and when the fields that need to be filled out may cause ambiguity, these messages can reduce the user's thinking and guessing time. There are a variety of presentation forms that can be flashed at the top of the page, or allow hidden messages to jump out of the bubble box.

The design performance gives the registration form the characteristic, and the interface design is the experience that the user feels. More tips can prevent users from entering errors because they need to be typed again.

3. Reduce the user's mandatory operation

Does the user authenticate when signing in or registering? I think if there's no big problem with security, try not to take it. The authentication code appears when the user enters a certain number of errors. (It is not the first to have the authentication code, nor the user input error more to prohibit login). But it seems like your technical partner will tell you most of the time "security" is a big problem, so many times we can't "indulge the system's security frustration for the good experience of the details ..."

4. Wrong password input memory

When the user enters an incorrect password for the first time, the system saves the user's input error password at the same time after judging the error, and when the user enters the wrong password again, the system automatically prompts the "password error" on the client. This reduces the user's one misoperation and also reduces the task that is submitted to the server side at a time. Because: the input of the password is not able to directly see your exact input results, there are many times it is true that the user is wrong or wrong.

Anyforweb in creating more compelling Web forms for customers, we are constantly asking ourselves: do I have the patience to fill out a form? What can make a form easier for users? These questions don't always find the perfect answer, but if you keep thinking about them, To experience our design from the user's point of view, we believe at least the direction is right. In short, login registration is "a door", a door to allow products and users to truly exchange, so that products can give users more value to reflect the door.

So this door must be: wide enough, the threshold is low enough, always open, memory every access ...

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.