Three buttons behind the small see big interactive thinking

The most common requirement for first-in-interactive design work is to put the button. Putting buttons seems like a super simple thing nothing but the design of the button style, positioning button position, determine the status of the button and feedback and so on, but little do not know its "though small, spite", small button design also contains a lot of interactive design thinking, of course, in addition to the design itself, can also see how to balance the development, Products and the needs of all users.

So, this article will show you how to do the "put button" in your work through three real but abstract examples. The truth is that the case comes from the actual combat, abstraction is the extraction of thinking but the scene is all virtual, lest disclose confidential. Interestingly, three of them are supposed to be related to time and limitation.

　　Case A

Virtual scene: An order page, merchandise orders are listed in the form of cards, each card has a number of operation buttons below, such as payment, cancellation, complaints and so on. According to the rules, the complaint button must not be available until 2 days after the order has been generated.

Current situation: The current design of the product line is, several buttons at the same time to render clickable state, when the complaint button is available within the time period, click will go to a complaint page to fill in the complaint application; When currently in the period of not complaining, Complaints button click the window to remind users: there are XXX time to initiate complaints.

Objective: When presenting this case, we want to make this process more natural, do not let the user click to tell the user that this feature is not available, rather than from the user's interaction expectations (if the button is available, interactive expectations should be to implement the corresponding function).

Design process:

At the beginning of this case, my first reaction is that if a button is currently unavailable, it should be hidden, the scene button is still very crowded, clearly can not use the thing why should be placed in the interface to attract attention?

But obviously, this first feeling has serious mishap. First of all, for a button or function, tell the user that this thing is not available, and do not tell the user has this function, is completely different. In particular, a button that is available/unavailable in two states is very risky to hide at a particular time-you don't know how much of a function is needed.

So we went through the data and the previous design. The first conclusion is that the click rate of this button is not low (more than 10% users, and the total PV of this page is very high), followed by the previous attempt to put this button directly in the hidden design, but immediately attracted a large number of customer service complaints-users can not find the entrance to the complaint where.

So it seems that data and history programs help us eliminate the first approach, which is to hide the buttons directly. How about putting the button in the dust when it's not available?

The advantage of the ash is that the user can see the existence of the function at a glance, and know that the function is temporarily unavailable. But here's the problem, how do you know when this button is going to be a little bit? One solution is to add a copy reminder to the gray button and another to click on the gray button to give a copy of the note, but the former does not seem to have enough space for the show, and the latter looks good ... But it seems to be back to the original point? (later also discussed a number of more complex schemes, such as the last half day ash, earlier hiding, etc., but we can not judge the user's real time point of feeling and expectations.) )

So the final conclusion is that there is no fatal problem with the current online form and there are not too many complaints about the experience, and the choice of keeping the style on the line is unchanged, taking into account development costs, design costs, and iteration cycles.

Feel like walking around and going back to the same place? It is often the case in practice that a designer may not have the best experience in judging certain content through instinct and intuition, but after data collection, self-criticism and cost assessment, it seems that it is best to keep the status quo.

Summary: This case tells us, design do not always think of finding fault, the first reaction often may miss a lot of details, think clearly before doing action.

　　Case Two

Virtual scene: After the business or merchandise complaints, users need to choose the reasons for complaints, such as bad attitude, price changes, out of stock and so on. Among them, in some special time period, if the commodity itself is a second kill goods, users to initiate complaints can not choose "out of stock" reasons.

Current status: There is no such function on the line, that is, all the reasons for the complaints are optional, the choice of components using picker, probably the following figure style (the most common is the choice of time).

Objective: For the "Out of stock" of the reasons for the interactive processing, so that it in a specific period of time (product seconds kill phase) can not choose, and to remind users related.

Design process:

At first glance and the case a very similar, but in fact, the difference is quite large. Case one belongs to the designer's spontaneous attempt to improve the experience, while case two does clearly define the business needs and needs to integrate the functionality into the existing solution. When you get this demand, the first thing you'll see is about two pages that you can design, a complaint page and a complaint Reason selection page (these two are not usually directly together, but the latter is likely to appear in the form of a bomb layer, and of course it may be new), and then flash through several possible solutions.

Plan one, in the complaint page ahead of the copy disclosure, tell the user "out of stock" reason is not optional, at the same time when the choice of reasons for the page will be "Out of stock" option ash;

Scenario Two, reason select the "Out of stock" button of the page is normal optional, after the selection through the window to remind users that the reason is not available, and restore the default for the reason to choose;

Option three, only the design Reason Selection page, in the "Out of stock" option to provide copy such as "Temporarily not selected", and put the gray options.

After a detailed understanding of the requirements background, scenario three was first excluded. The reason is very simple, its own ash has been said to be not optional, "temporary" copy of the content expressed too little, neither show the reasons for the election, nor tell the user when to recover the complaint option. At the same time, we learned that the feedback of the copy will be longer, about more than 10 Chinese characters, the button itself space is limited, and directly in the cause of the mosaic "temporarily not" also will have a bit of technical costs.

Scenario two is smooth on the flow, but like the one mentioned in the case, we generally expect the user to anticipate the result of the interaction before the operation, rather than having the optional button click and then notify the user that it is not optional.

At the same time consider scheme one, for button ash has a problem to consider, you can see the wireless end of this wheel-type selection component, its own ash can do is to play a question mark, in fact, and the development of communication after the discovery is indeed impossible to achieve. Finally, the comprehensive consideration, or the adoption of programme two.

Summary: Through case two, we can see that the design often has an optimal solution, but always because of the technical costs, other business reasons of the impact of compromise, the final solution may not be the best interaction, but the overall efficiency is indeed the highest. This also shows that the new people do not easily experience the analysis of other products, because you do not have these real restrictions, the conclusion is also in the castle.

　　Case Three

Virtual scene: Some operations are time-sensitive, such as a limited sale of a commodity, if not yet to the time of the payment node, payment function is not available, then the payment button can be optimized processing.

Status: When the product is not in the payment period, the payment button is hidden.

Target: Do not let the user find the Payment button, make the operation smoother, visibility more strong.

Design process:

And case one, this is also a designer spontaneous want to improve the experience of the process, there are other businesses need to transform these pages, can this button to hide the process optimization it? Reason to believe that everyone can understand that the function of the hidden, is not the best way.

Take a closer look at the style on the line we found that this case is not quite the same as the case. The most important point is that the time of payment is a countdown, that is, even if the payment button itself is hidden, but there are still near the copy reminder is not in the payment time, so users are not easy to confuse.

A simpler solution would be to expose the pay button and put it in the dust. It looks like three cases are on the gray bar today. After discussion between the interaction group and the product group, it was agreed that it would be more appropriate to put the unavailable payment buttons on the fly, and that the user would be more likely to understand the text reminders on the line.

But the final conclusion of this case is somewhat unexpected, first of all, because all of the similar businesses on the line have adopted the option of hiding the Disable button, if the transaction is to be changed, all the other changes (time cost), and secondly, the button component in the early development process, did not design, develop the status of the State, That is, there is no gray style, if you want to do, you need to redesign and development (development costs); Finally, the online hidden style has been around for a long time, most users have been accustomed to it, and there is no general feedback to indicate cognitive difficulties (user understanding cost). So, the conclusion is to keep the line style.

Summary: Sometimes the design is right, everyone is approved, but there will still be a variety of factors to come to the constraints. Especially in the larger product team, the rapid pace of business, the demand for more, online tight, such optimization experience is often not high priority. At the same time, many friends may say a button, add a disable style and what is the difficulty? However, many team process rules lead to business work is a line, component optimization new style is another line, want a step to do both things are not easy to imagine.

What about the simple three buttons that make you dizzy? The difficulty of interactive design is often the coordination of experience, product and development, compromise, and finally achieve a balanced state. From small see big, small button we can cope with, slowly can face big problem.