The devil hides in the details: The interactive button big thing

When a product completes the core requirements, we can slowly get ready to start studying the details.

A product can talk about details at almost every level: it also covers what is seen on the surface and is not visible on the surface. The details on the surface are simple enough to take time to do, to try, to make mistakes and to fix them. But the details such as product positioning, user experience and so on, often rely on the accumulation of long-term experience, research and user feedback, it is difficult to clearly understand which side how to make and modify.

I have done some graphic design, profoundly understand that "if something will be held by others to see the details, then each part of the details must be pursued carefully." A poster leaflet printed out, easily copied hundreds of copies of thousands of, and then thousands of people tens of thousands of people to watch, think of this will have to carefully handle every detail on the screen. So designers often spend a whole afternoon, not why, just is to stare at the manuscript on the screen, slowly to fine-tune each title on the screen, each text font and color, size and spacing, kerning and line spacing ... Wait a minute.

I have also been involved in a number of animation creation, profound experience of "and if something to move up, need to take into account the details will be more": "such as the 10 laws of animation, objects on the ground when the deformation (different materials, different animation style of the performance will affect the degree of deformation), animation character performance when the preparatory action ... And so on, although not do not affect the overall performance, but the lack of it will make viewers feel less flavor.

And after the production of the user interface. Once again, "if something can interact with the user, the details that need to be added are multiplied". Because we can never expect the user to do something beyond your expectations at which point in time.

The pursuit of detail is a time-consuming task, but we have to have the attitude of pursuing detail.

The interactive details of the button

The most common interactive element on a Web page: A button, a button on a Web page typically contains three interactive effects: normal, Hover, and active (pressed). Typically, web designers use the three-image replacement to do this (whether using three separate images or using CSS Sprite).

There was a time when Flash SWF became the popular darling of the Internet, and the visual creation interface made many creators less repulsive, and became one of the software that many web designers must learn. Preset button elements in Flash also provide the same interactive effect: up, over, and down (where the fourth hit is the sensing area). Because of the animation features of Flash, users can add animation elements to each state, allowing users to add dynamic effects to the interaction of the button.

OK, now we can add a dynamic effect to the button, such as the following situation: We put in over inside a black color block animation section. The animation effect is triggered when the user moves the mouse over the button:

In the interactive experience of a lot of lively, but there is something missing: Because over the block detection is "when the mouse moved to the block" trigger the animation effect, and when the "mouse away from the block" but there is no corresponding to the shadow, resulting in the whole animation effect is hard to be truncated.

The devil hides in the detail (the devil is in the details), if we want to get a complete experience, we must take into account this easily overlooked part, that is, not just the cursor to move to the top of the button animation effect, the effect of cursor departure is included in the design considerations of one of the details, The ideal state is shown in the following illustration:

To take this effect into account, you have to use program control to achieve the goal (whether it is flash or css/javascript, etc.). Through the control of the program language can effectively achieve the desired effect, so that the designer's creative imagination is more extensive, but also have the ability to make good use of the picture, so that the creative elasticity is low, and another browser and platform support degree problem.

More details

"If something is able to interact with the user, then the details are multiplied," as in the same example, after we slow down the animation, we find another question: "If the user is halfway through the animation, the mouse will leave the other place?" Take the following button symbol as an example, the animation will be abruptly cut off (because the shadow is forced to jump out to the next shadow).

In contrast, it is safer to do so, because when the user's "cursor leaves the induction area that is forced to interrupt the animation show" will not encounter the problem of animation scheduling: Imagine if the cursor left, the animation is also slow to perform, the user quickly repeat the cursor entry, departure, entry, leave the action, Is it another disaster? Given the problem, if you use program control, you must carefully consider the details of this section.

A small button, with a simple animation, but because of the involvement with the user to interact with the part, that will involve so many "details" out. Although the pursuit of details is time-consuming, most of the time I am afraid will be considered "this part does not affect the product function", "This is not the core of the product" and so on and was hastily brought. But as the famous designer Charles Eames said, "the details themselves are not details, they are the essence of the product." "They have been thoroughly tempered, carefully designed by the design of the chair style, until now are still brilliant design."