In-depth analysis: Internet login interface interaction design and login interface

Source: Internet
Author: User

In-depth analysis: Internet login interface interaction design and login interface

Regardless of the design of web pages or mobile apps, it is important to find a balance between small and beautiful pages and functional complexity. This article analyzes the design of mobile APP forms to see how designers can achieve a small and beautiful balance between design and interactive experience.

  I. Ultimate Subtraction

This is a product of a logon box that is different from the conventional design ideas. This is not a usual logon window. It only retains the input of the user name. You only need to press the Enter key to confirm. It jumps out of the box in the logon interface design, and the color is eye-catching and simple.

II. Compelling user interface

1. Blur background

Recently, the application of fuzzy background has sprung up, because the application of fuzzy background not only makes the entire website more humane, to a large extent, the atmosphere of the website is highlighted. The following example shows a charming login interface. The Blurred background is designed with simple icons and thin lines. The color of the background image and the color of the button are very different from the same color, allows the interface to be integrated into a whole.

2. Dark Background

When we see the following case at a glance, the bright input box attracts all attention. The background image that has been implicitly processed makes the login form the visual center of the page. Nothing can distract the user's attention. This is not only a high-quality sensory experience, but also a comfortable user experience.

 

3. Flat solid background

I'm fascinated by the flat design in the following cases. The basic style should have been monotonous and boring, but if it is well matched in color, the flat login interface will become lively and playful.

3. Clear Visual Line

Human Visual browsing is generally an "L" line of sight, meaning from top to bottom, from left to right. The design of the form interface places great emphasis on user guidance. When an interface does not emphasize too many elements, then the visual browsing order of the form conforms to the "L" pattern and basically meets the user's psychological expectation. Therefore, you do not have to think too much about and search for it. You can simply and efficiently complete the filling and submission of form items.

Analysis of website login interface design: the beauty of the balance between design and interactive experience, and things about the Internet. User experience design

The usage of login and registry tickets is very high, and the design of a form is not a simple task. The user experience must be considered. Some people like to put registration and login on a page, and some like to use AJAX to demonstrate the effect without refreshing. There are a lot of tricks. In short, everything starts with the best user experience. The design is endless! Even a registry ticket is worth further research. If the user experience is not emphasized, the website will lose a large number of users.

1. Reduce user input

Generally, the registration rate decreases accordingly for each field added to the Registry.

It is very troublesome for a user to enter the email address twice or repeat the password during registration, especially on the mobile phone. In fact, users generally use their frequently used mailboxes and passwords for registration, so it is not easy to forget. Entering a password to complete registration is more in line with people's expectations. However, to prevent password input from being different from the user's expected password, users can view the plaintext password. If you forget your password one day, you can retrieve it through your email address. If you enter the password twice, the loss of users is more likely.

2. Information Registration tips

Providing valid information prompts for end users is the best method in user experience design, especially when the user registration information has multiple input domains, when fields that need to be filled in may be ambiguous, these message prompts can reduce users' time to think and guess. There are multiple forms of prompt information, you can flash a note on the top of the page, or let the hidden message jump out of the bubble box.

The design performance gives the registry list a special character, and the interface design is the user experience. More prompts can prevent users from entering the information again due to incorrect input.

 

3. reduce users' mandatory operations

Is the User Authenticated upon login or registration? I don't think we should take it if there is no major security problem. The verification code is displayed only when the user inputs an error for a certain number of times. (You do not have a verification code at the beginning, or you are not allowed to log on if your input is incorrect ). However, most of your technical partners will tell you that "security" is a big problem, so we often cannot "indulge in system security setbacks for a good experience of details "... Analysis of website login interface design: the beauty of the balance between design and interactive experience, some things on the internet 4. Incorrect password input memory

When a user enters a wrong password for the first time, the system saves the memory of the wrong password entered by the user after judging the error. When the user enters the wrong password again, the system automatically prompts "Incorrect password" on the client ". This reduces the user's Misoperation and reduces the number of tasks submitted to the server. Because the entered password is displayed as * You cannot directly see the exact input result. In many cases, it is true that the user remembers wrong or fails to enter the correct password.

When AnyForWeb creates more attractive Web forms for customers, we always constantly ask ourselves: Do I have the patience to fill out the forms? What makes forms easier for users? These questions won't always find the perfect answer, but if we constantly think about these questions and try our design from the perspective of users, we believe that at least the direction is correct. In short, login registration is "one door", one door that truly connects products and users, so that products can reflect more value to users.

Therefore, this door must be wide enough, the threshold is low enough, the door is always open, and the memory enters and exits every time...


Why is interaction design enough?

I have written similar articles before. I want to write too many things and I have not understood the results. So I will re-write a set of tutorials, including "Understanding interaction design", "functional scope of interaction design", and "common methods of interaction design 」...... Several chapters share my understanding and experience in this industry. Yixieshi.com (Why is interaction design available? What can interaction design do?): What are some things about the Internet? 1. What are the elements of successful Internet products? ① When your Boss needs to be a product, it must first be achievable, which is also the reason why the core programmer architects are generally well treated, because they are productivity. A successful product must first have an implementation model. Something about the internet ② What is the product doing? "Is it convenient for users to make them play well ?" Of course not. The ultimate goal of the product is to make profits. Your leadership only cares about this. How can we make a profit and make a sustainable profit. This requires the second element-the business model. Some things on the internet ③ is the product successful with the implementation model and business model? In the past, but now the times are different, and most applications have no technical difficulties. In this enterprise, there is no shortage of systems, there is no shortage of products on the Internet, and users do not understand the technology, what do you rely on to win users? A strong operation team can only promote one peak value. The most fundamental thing is to need the third element of the product-the user model. Like water, the user model can make a product, this allows products to go further and destroys products with excellent business models. Article 2. How to improve the user model? Yixieshi.com ① let's take a look at the traditional development process: project initiation → programming → testing → beautification. Most of the products made here tend to be programmer-oriented implementation models or business models of marketing planning, the design is to add some colors on the icons (for example, global resources, you can open your eyes). Basically, there is no concept of a user model. Yixieshi.com ② to improve the user model, the development process of most companies has been improved, basically based on this process: project initiation → demand analysis → design → programming → test the Internet. This process improves the capability requirements for demand analysts and designers, this combination must be highly integrated with the user model on the premise of implementing the model. The problem is that, if designers only have visual design capabilities, most of them are engaged in the design of Internet product interfaces, all of which are from the art class, and their understanding of the business is weaker than the performance requirements, basically, the visual draft is produced based on the line diagram of the product personnel, and the optimization of the page structure cannot be promoted at all. Then the finished products are biased towards business needs. It's okay to have a comprehensive product manager. If you have a business-oriented product manager, you can only let the stupid things continue. For example, if the conversion rate is low and the bounce rate is high, the product manager may think that the main reason is that the design draft atmosphere is insufficient and the buttons are not big enough. The real reason is that the visual draft made by the designer based on his wireframe is insufficient for goal orientation and action calling. Pipeline assumes that there are a large number of designers with product planning and visual performance capabilities. However, the efficiency of communication with products is very low, and the following problems may occur: 1. difficult communication; 2. high modification cost; 3. the completion time cannot be estimated; 4. unable to persuade the other party; 5. project time is not allowed. Lifecycle 3. solution-UCD ideas about the internet in order to solve the above problems, the UCD concept is gradually accepted and recognized by everyone, among them, the most driver job-interactive design is independent of such a big environment. We can take a look at the main organizational structure of UED, a major Internet company: compared with the previous process, there are more positions in user research and interactive design, these two positions play a major driving role in the process of product concepts and implementation. Internet things 4. how to develop and integrate the interaction design into the development process first, let's sort out the two problems encountered in the previous process: 1. imperfect user model; 2. communication barrier: the user model is incomplete. To improve the user model, two processes are required: ① business model framework is in the conceptual stage of the product, the interaction designer needs to focus on the user interface and the overall structure. This process is called "Framework Design". Framework Design is a navigation architecture and process design based on user goals. The main output of interaction at this stage is the navigation architecture diagram, stream... the remaining full text>

What is the difference between the interaction design of the software industry and the Interaction Design of the Internet industry?

The interaction between the software industry and the Internet industry is based on requirements, but the scope of consideration is different.

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.