Hello, my name is Sun, and I am currently working as a product designer and UX designer in the United States. In this video, I will teach you four key principles that must be followed when designing buttons. When you design software or a digital product, you always design an interface that interacts with the user. Some users can immediately recognize which parts can be interacted with, but others often don't know where to press. In that case, you will experience the inconvenience of having to spend time looking for the button and the part where such interaction is possible. On the other hand, such users also find such buttons very easily in real life. An easy example is elevator buttons, or all the switches at home or in the car. Even these users can easily find the buttons. It's easy to know how that button works. So, one key principle that must be followed when designing buttons, it is to design the button to look like a button. The buttons that appear on the screen are designed so that they feel like they can be pressed like in real life. The flat design used to be popular, and that was when the Metro interface first came out. At that time, NNG (Nielsen Norman Group) conducted user testing, and the results showed that the performance evaluation was surprisingly low by 22%. Because I didn't know which part to press, so I got lost. That's why people emphasize style rather than content in the design of this time. It was evaluated that the design caused confusion because users did not know which part to press. It was a design that made users think more about the interactions in the product. So how can I make a button look like a button? One way is to take UI ideas from things around me in real life. So, the point here is that when creating a product with a button, it would help if you did not make it difficult for users to find the button. It seems like all buttons in real life can be pressed. We are adding a visual cue so that people can immediately recognize that it is a button. For example, there is a light inside, or it protrudes a little more compared to other surfaces, or it looks like it can be pressed. However, people like us who design interfaces within the screen often omit the Three Dimensions. Three Dimensions Because we design a UI that removes this in-depth part, users become very confused, and eventually, we ended up writing something like "Press here!" on paper by hand and attaching the paper like this. When designing a button inside the screen, it would help if you considered various cases such as when the button is pressed, when the mouse is hovered over, or when the button is unusable and the design the style for all of these cases. And another bonus is that if you do web design, if you put a button in it, I recommend designing it in a way that also shows the Hand Pointer. "Of course, this isn't basic?" You might think this, but this should also be decided by the (UX) designer. Developers change the shape of the pointer by doing additional coding. Otherwise, clickable buttons often just appear in the shape of a cursor. Also, when it comes to text inside buttons, it is better to use language that is used in real life. So, it is better to use languages that are familiar to users. For example, when I see button texts like "Add to cart," I can easily understand them when I see them for the first time. In real life, people usually go to the supermarket and use carts a lot. Since everyone has the concept of a cart, where you put the necessary items and go to the checkout counter to pay, even online, when you say "Add to cart" on the screen, people say, "Oh, here's what I want to order or the items I want to order." Just put it in. You can add food, and it's easy to understand. It would be good to improve user understanding by maintaining consistency between what is on the screen and in real life. And don't design something that isn't a button like a button. The second key point is when designing buttons, design them to a size that is large enough to be pressed, and when there are multiple buttons, add space between the buttons so that people can easily press them. The button size is set so that it can be easily tapped on small screens such as mobile screens. The worst button sizes I've seen it recently are mostly in game advertisements. The X button was too small and it was hard to find because it was so small. I want to close that screen, I want to close the ad screen, but I remember that part was challenging. It gets so annoying that I wonder if they made it small on purpose to prevent me from closing the game screen, and when I see that screen, I don't use the app at all. I throw it away. Like this, just one small button can make the user leave. This could be a case of providing a bad experience for users. So, when deciding on the button size, you must consider the human finger size when designing it. In addition to buttons, all elements that go into Touch Control, such as sliders, etc. Otherwise, various elements of the + and - buttons may apply. The definition of Finger Size is defined differently depending on the platform. So when designing the platform, follow the platform guidelines Google Material Design Guidelines In the case of iOS, it would be a good idea to determine the button size by referring to the Human Interface Guidelines and the Platform Guidelines. Also, pressing the wrong button can be one of the UX issues that irritate users. If the buttons are too close together, the probability of pressing a different button is very high. It would be a good idea to add some padding and space around the button to reduce the probability of pressing it incorrectly. The third core principle is to design buttons that people can easily understand and use. This means that when users try to make a selection in a situation where several buttons are listed, they read the button labels and think about each action. But if those two buttons If the text content is similar, people wonder what the difference is, but they also think and worry about which button to click. And because you're afraid of making a mistake, you even hesitate to press the button. So, it is important to list the buttons in a language that people can easily use and find and distinguish them well. If you use similar text like this, one tip is to get help from icons. So, languages that are used in a similar way don't just include text, but also use icons in it. That's why the buttons are differentiated. In this way, you should avoid confusing users as much as possible when pressing the button. The fourth and final core principle! Please design all buttons so that they are clickable. Sometimes, developers make you click by linking only the text or the icon itself. So, in my case, I added a Ghost Button style X icon and handed it over to the developer. However, during later testing, I received feedback that it was too difficult to press the close button. So I looked and found that the developers only linked to the X icon itself. So then I knew So, I knew that when a designer presses a button, it would help if you specify and notify the target area that is being touched. So, in order to do that, you need to design using button elements when designing, and let them know that it is a button element. If you do not set the Touch Target Area, developers will only see the icon, so you will have to link only the icon image and click it to take action. If you use the icon button style, it would help if you informed the developer that "this is a button." can And please make sure to let us know that this is the Touch Target Area. You have to ask for a link in the button style. So, you must inform them that the text is neither a link nor an image link. Button design has a huge impact on user experience. So, you have to be very careful when designing. So, if you think about and apply these basic principles when designing, your users will be able to understand and use your product more easily. It may be very obvious principles, but when designing, think about whether you are observing and applying all of these basic principles. Or, if you already know the principles, it is time to check whether these principles are applied well in your button design. I think it would be a good idea to take some time to check. Thank you so much to everyone who watched the video today. See you in the next video. Bye!
