In-depth analysis: Internet login interface interaction design things_html/css_WEB-ITnose

No matter the design of a web page or a mobile APP, a very important point is how to find a balance between smallness and beauty and functional complexity. This article briefly analyzes mobile APP form design to see how designers achieve a small but beautiful balance between design and interactive experience.

　One. The ultimate subtraction

This is a login box product that is different from conventional design ideas. This is not a login window in the usual sense. It only retains the input of the user name, which can be confirmed by pressing Enter. It breaks out of the rules and regulations in the login interface design, and the color matching is eye-catching and simple enough.

 Two. Eye-catching user interface

1. Blurred background

Recently, the use of blurred backgrounds has sprung up, because the use of blurred backgrounds not only makes the entire website appear more humane ization, and to a large extent, it sets off the atmosphere that the website wants to express. The case introduced below is a charming login interface, designed with minimalist icons and thin lines on a blurred background. The tone of the background image and the color of the buttons are carefully selected in the same color system, so that the interface is harmoniously combined into one overall.

2. Dark background

When we see the case below at a glance, the bright input box attracts all the attention. The dark background image makes the login form the visual center of the page, with nothing to distract the user. This is not only a high-quality sensory experience, but also a comfortable user experience.

3. Flat solid color background

I am fascinated by the flat design in the following cases. The basic style should appear monotonous and boring, but if the colors are carefully matched, the flat login interface will become lively and playful.

 Three. Clear vertical visual lines

People’s visual browsing generally follows an “L” shaped line of sight, meaning from top to bottom and from left to right. The design of form interfaces attaches great importance to guiding users. When an interface does not emphasize too many elements, then the visual browsing order of the form conforms to the "L"-shaped rule and basically meets the user's psychological expectations. Then, users don’t have to think and search too much, and can simply and efficiently fill in and submit form items.

A brief analysis of website login interface design: the beauty of balance between design and interactive experience, some things about the Internet IV. Pay attention to user experience design

The usage rate of login and registration forms is very high. The design of a form is actually not a simple matter. User experience is something that must be considered. Some like to put registration and login on one page, and some like to use AJAX to display without refresh effect. Anyway, there are many tricks. In short, everything is based on the best user experience. Design never ends! Even a registration form deserves a closer look. If user experience is not taken seriously, the website will lose a large number of users.

1. Reduce user input

Generally speaking, every time a field is added to the registration form, the registration rate will decrease accordingly.

It is very troublesome for users to be asked to fill in their email address twice or re-enter their password when registering, especially on mobile phones. In fact, users generally use their usual email and password to register, so it is not easy to forget. It is more in line with people's expectations to enter a one-time password to complete the registration. However, in order to prevent the password input from being different from the user's expected password, a method can be used to allow the user to view the plain text password. Suppose a user forgets his password and can retrieve it through his email. Filling it in twice will more easily lead to user churn.

2. Information registration prompts

Providing effective information prompts for end users is the best way in user experience design, especially when users fill in information during registration. Multiple input fields, and when the fields that need to be filled in may be ambiguous with each other, these message prompts can reduce the user's thinking and guessing time. There are many ways to display prompt information, such as flashing a small sticky note at the top of the page, or letting hidden messages pop up in a bubble box.

Design performance gives the registration form its characteristics, and interface design is the experience that users feel. More prompts can prevent users from having to re-enter due to input errors.

3. Reduce mandatory operations for users

Are users verified when logging in or registering? I think if there is no major safety issue, try not to do it. The verification code will only appear when the user enters incorrectly a certain number of times. (It does not mean that there is a verification code from the beginning, nor does it mean that users are prohibited from logging in if they enter too many errors). But it seems that most of the time your technical partner will tell you that there is a big problem with "security", so many times we cannot "condone the security frustration of the system for the sake of a good experience in details"...A brief analysis of website login interface design: design and The beauty of balance in interactive experience, some things about the Internet 4. Wrong password input memory

When the user enters a wrong password for the first time, the system will save the wrong password entered by the user after judging the error. When the user enters the wrong password again, the system will automatically prompt "Incorrect password" on the client. This reduces one misoperation by the user and also reduces one task submitted to the server. Because: the password input display is * and you cannot directly see the exact input result. In many cases, the user remembers it incorrectly or enters it incorrectly.

When AnyForWeb builds more attractive web forms for customers, we are always asking ourselves: Do I have the patience to fill out the form? What can be done to make the form easier for users? We won’t always find perfect answers to these questions, but if we keep thinking about these questions and experience our design from the user’s perspective, then we believe that at least the direction is right. In short, login and registration are "a door", a door that allows products and users to truly communicate with each other, and allows products to reflect more value to users.

So this door must be: wide enough, low enough, open all the time, remember every time you go in and out...