From the mobile phone product login page design thought of

I. Architecture design and process design

I have been pursuing a simple and efficient design, especially the smelly fish this article "for the product structure design, for the user task design." He used Figure 1 to explain this point of view: first of all to ensure that the product logic results clear, accurate, and then to the user task to rack up some quick operation of the bridge.

Figure 1 "Product structure Design" and "User task design" relationships

Good process design enables the product to have a clearer structure and a better experience. My boss once raised a string of beads, said PM to our function list are like a bunch of scattered beads, and we have to do is to string up these beads, the function string up, finally presented to the user is a complete thing, has a clear structure and process.

There are still some abstractions, and I want to try to share my thinking process of architecture design and process design through the design of the mobile phone product login interface.

Second, an example

First, let's take a look at an example, see Figure 2:

Figure 21 The login interface made by a child

This page is very representative, it is similar to the request list of PM, cluttered heap in the interface. First pick the problem:

Copy is not very accurate, "account password" copy with "password" on the line, "Login account" button copy with "Login" on it, "Offline use" button, he wants to express is "anonymous login (no need account, password)".

There are too many elements on the interface to identify what you need

There is no clear task line between the hierarchy and the unknown

Does not take into account the problem of virtual keyboard occlusion

Related operations can be a little closer, such as forget the password and login button

Third, study the framework

Then we analyze the architecture, architecture, this interface, there are three main modules: login, anonymous and registration, which may be anonymous in two cases, where the performance is not required username and password situation, such as Figure 3.

Figure 3 Login Page Architecture diagram

Let's analyze login and register these two functional modules first. If the user wants to log in, then need to enter a username and password, if the user wants to no longer need to enter a password, you can choose to remember the password, if the user forgot the password, then you can give a portal let him go back to perform the password operation. Of course, these should all be built after the user has to perform a login operation. So you can hide these elements. So, since login and registration are peers, can we design this page in Figure 4?

Figure 4 The Login page takes the form of 2 entries, you can choose to login or register

The reference cases are Foursquare and 16Fun, as shown in Figure 5.

Figure 5 Foursquare login page with only two options, login or register

The advantages of this scheme are obvious, that is, the structure is clear, there will not be too many interference factors, but the disadvantages are also some, login and register two buttons or need to distinguish between, and the two function is too flat, in different stages of the product should be focused on, such as new product line, to more reasonable guide registration, mature products, To highlight the login.

To take a look at the anonymous feature, as mentioned above, there are two things about anonymity:

1, do not need a username and password, you can log in

2, need to submit user name and password, but anonymous login, do not let others see

Case 1, since you don't need a username and password to log in, why do you have to go to the login page instead of the content page? If your product is focused on the Community class, require users to log in, then or to guide the user login, if your product is a tool class, content class, want users to see the content, then you can let users directly into the software, first see the content, and so need to perform some login before the operation, Prompts the user to log on.

Situation 2, is often used in the forum, bar and so on need to anonymously post the case, then we only need to give the Post page anonymous posting check box on the line, do not need to let users in the login interface directly selected. If you want to log in to some forums, but do not want to expose the online status, you can add a status selection on the Login button button, such as Figure 6,QQ client.

Figure 6 iphone version QQ client, the login button can be selected above the state

Because our login page belongs to situation 1, the anonymous login feature is removed from the login page.

Iv. Study the process

So this time, we have to the product process to carry out an in-depth thinking, our products, is the hope that users from where? Where are we going? What kind of task flow do you want the user to accomplish in our product? I briefly analyzed, if it is to guide the process of login, the user must have an account, can only log in to access products, then the process is probably like Figure 7.

Figure 7 Mobile Phone Product login Process

Then we know, we are hoping that the user just entered the software to encounter this interface, the completion of the login, to the content. If so, should we allow users to perform the login process more quickly, that is to say, the account and password mentioned a level, user-friendly and quick operation. So I changed the design to Figure 8:

Figure 8 The login page that exposes the account number and password entry box

The reference case is the street side Web login page, see Figure 9.

Figure 9 Street Side Web login page, highlight login function

Password-related options, such as remembering the password, forget the password, where to put the appropriate? In general, the most relevant is the best to get closer. So I remember the password and forget the password is placed under the password input box, but at this time, it will appear more chaotic information, the solution is what? is to group the information, as shown in Figure 10.

Figure 10 separating the information area into a login and registering two modules, enhanced login

And if it is content-oriented, the purpose of the login is to complete some operations, then the login page often appears in the navigation bar, menu, or to perform a need to log in to the operation after the forum replies as an example, the process as shown in Figure 11:

Figure 11 When the post operation is performed, the flowchart that prompts the login

At this point, it is clear that the end of the process should not be successful login, but the next action. Rather than let a registration threshold, hit a part of the user's enthusiasm, not as good as, first the content exposed, when you need to perform some login users can perform the operation, and then guide you to login page, it is logical, no forced login feeling. In this case, you can use the form of a floating layer to complete a simple and quick login operation, as shown in Figure 12.

Figure Vimeo Login page, using the floating layer design method

Of course, you can also call the unified login page, that is, reduce costs, and maintain unity.

V. Demand or demand

The reason why this is so much, is because, this seemingly simple page, contains a lot of architecture, process thinking, including product logic, the most important, including the designer's grasp of demand.

Login page, in the end to design what it looks like, there must be no uniform standards, but, according to your product requirements, you can infer that it is how a process, which features, let us summarize, I feel quite a few points:

Tell me why (why do I log in?) Why register? ）

Don't give the user too much choice (too many choices mean too much thinking time)

Let the user go to the end of the road (process to finish, and can not have too many branches)

Follow this option for something related to an option (such as a Password entry box and a forgotten password)

The main content to weaken the login (at the right time to prompt the user to log on the line)

Architecture and process are two different things (clear architecture is the foundation, fast process is guaranteed)

Article Source: elya.cc Reprint please indicate the source link.