Why do you need to move this button three pixels and the button three pixels

Why do you need to move this button three pixels and the button three pixels

Every 1 ~ The speed of translating an article within two weeks, and translating articles related to user experience design, interaction design, and Internet product design. It is inevitable that there will be errors in the translation just beginning, in addition, I will not translate the translation based on the original author's statement. Some may be changed to a more understandable vernacular. If something is wrong, please point out that I will correct it actively. Thank you.

Today, this article is about how designers can focus their team members on design details and refine product details.

------------ Below is the article translation ------------

When the product is coming soon, I (the original author) will become a perfectionist. Every element without alignment or strange interaction is my eye point. There will also be a dozen flawed implementations lined up to laugh at me. Everything looks terrible.

However, other members of the team think that the product looks quite good and basic functions are available. They will ask: "moving this button 3 px will really make our product better ?" Or argue: "The last time we fixed a very small design bug, we didn't feel any changes to the product ." Then everyone starts to think about other ideas, as well as the features of the next version.

If you are the same as me, this situation is really frustrating. As a designer, we have the responsibility to control the quality of the entire product. Although we are passive in our team, we can design exquisite, difficult, and superb details, but they cannot be implemented, tested, and put online.

How can we let engineers and product colleagues care about the design and cooperate with us to complete the design? I have struggled with this issue for N times. Here is what I have learned.

　　Not designed for design purposes

Designers know the gap between "adequate" and "Pleasing", which is why we are always entangled in details. (Littlebigdetails.com) but there is always a trade-off between creating perfect details and doing more practical functions: ensuring that the details are perfect often means slowing down the development speed.

Therefore, the reason "This looks better" is not enough. Designers need to give sufficient reasons to persuade team members to spend time revising the design.

　　Paying attention to details will increase user trust.

Users can judge the reliability of an online product through visual design, text and interaction. If you believe that user trust will affect your business, you must pay attention to the design details. Go to some academic articles about the relationship between interface design and user trust, or check out Stanford's project on website credibility.

Mint, Square, and Simple have all done well in design details and won the trust of users. They are also just starting products, but users can safely use them to store financial details, make payments, and keep accounts.

　　Focusing on details will increase product availability

Every time I see the logo of MailChimp, I will smile! The non-messy Google homepage looks very comfortable. Apple's exquisite UI to every pixel is very flattering. They both ensured the accuracy of design details and established a positive sentiment, but why is that important?

In our brain, there is a strange brain hacker-emotional state. Our thoughts are greatly influenced by our emotional status. If we feel frustrated or happy, it will affect our solution to the problem. When I am in a bad mood, it does not work when I click crazy button on a product that puzzles me. In such a frustrating situation, even if I try to do the same thing harder, it will not help me achieve my goal.

But when we are in a good mood, we feel like playing with the interface. The world is a maze for us. It is not a battle. You can see everything. Even if we encounter problems that make us confused, we are more willing to explore and find other ways to solve the problem. Donald Norman's emotional design has made a special discussion on this aspect. Of course, the focus here is: excellent product details can create positive emotional states, making the product easier to use.

　　Batch Process your work

If your product has a lot of problems that need to be fixed and wait for completion, only modifying one of them won't make you or your users feel better. This is the same as filling a hole and won't flatten a pitfall Road. You don't even notice the change.

So the trick is: deal with all the UI bugs at once! If your team also regularly finds a day to handle the latest bug, try to host a bug fixing day. As a designer, you need to count all the problems to be corrected into a list or submit them to the bug tracking platform in advance, and set the priority for the bugs.

When the bug clearing plan arrives this day, everyone can focus on solving the problems on the list one by one. Of course, you cannot solve all the bugs at once. It doesn't matter. You may find that the product has been significantly improved after one day. This will also make everyone feel great to all members, and will make everyone more focused on improving design issues in the future.

　　1.1 point polishing

I screwed up when I tried to control the product quality when creating product features for the first time. It was always good at the beginning: the engineer and I reached an agreement on the design, and I drew a prototype map for him. The next day, he showed me the program he had written, I can't bear to look straight into the results. Where is my design!

I got angry on the spot and complained about all the mistakes. As a result, he was reluctant to ask my feedback later. As the product quality further deteriorated, I became even more frustrated with the typical vicious circle.

Later, I gradually realized that when an engineer thought that a product had been completed by 90%, only 10% was completed by the designer. Now, before the product functions are perfect, even if only a few User Interface Details are completed, I feel very happy.

When engineers were present, I also tried to build agile feedback and modification mechanisms. I will say, "Pull me up when you check this ." In this way, we can correct some small errors in this process.

　　Avoid unnecessary Customization

Designing a personalized button in Photoshop is simple-this is just the tip of the iceberg. In fact, in order to ensure the perfection of the details, we need to pay a lot, for example, in addition to the normal status, you also need to have the following statuses: pressing, unavailable, preventing text highlighting on the button when you double-click the button, and so on.

I often hit an iceberg. For example, Ajax web pages require more time than traditional web pages, while mobile-end customized menus require more time than native ones. If the team does not have enough time to polish these customized UIS, using native controls may be a better choice.

--------------------------------------------------------------

The above are the skills I have learned over the past few years in promoting the design details. As far as I know, each team has different cultures and attitudes towards design quality. Therefore, some teams are willing to take the time to make the details better, and some teams are more inclined to let the product go online as soon as possible.

I am very interested in how different teams create their own quality standards. How did you get your team to agree to some design details and spend time improving the design details? Which of the following methods can be used for you? What is useless? We can discuss it together.

---------------------------------------------------------------

This article was originally published in Design Staff, a blog about entrepreneurship designed by Google Ventures.

Why did I use the Graph Search command to press the shortcut Wizard? After finding the graph, I asked him to move down the pixels in five units, but the source of the graph was still found during debugging?

Find the x in the image. The y value is the coordinate in the upper left corner of the image. to click the coordinate below the image, you should be a kY + number. 5 pixels are very small values. If the height of your image exceeds 5 pixels, it is still on the image. The offset value must be greater than the Image Height.
You write moveto kx-3, ky-5, should be to the top left of the picture offset, but this value is quite small, you may not be aware of it, change to 30, 50 to see if there is a shift.

Pixel movement of Single Image buttons

I don't know. Sorry, I can't help you.