20 Signposts on the Road to Becoming an Excellent UI (User Interface) Designer

Introduction: Interface designer Joshua Porter published this article in his blog, which lists 20 user interface design principles. These principles are what designers need to follow in their design work, and they can provide designers with better guidance.
The existence of an interface promotes interaction
The existence of the interface enhances the interaction between users and our world. They can help users clarify, illustrate, enable, and display relationships, which not only allows us to do things efficiently, but also allows us to manage our applications and access related services. The act of designing interfaces is not an art, but there are rules to follow. Well-designed interfaces can inspire, evoke, and strengthen our connection to the world.
Clarity is a very important task Clarity is the first and most important task in interface design. If you want the interface you design to be effective and liked by people, you must fully understand what the interface is and why people use it. You must be clear about the interaction of the interface with the user, such as when the user uses it, they can anticipate what will happen and successfully interact with it. Some interfaces are not clearly designed and although they can meet users' temporary needs, confusing interfaces have no future. A clear interface inspires people to engage with it and drives them to take further action.
Protect your user’s attention at all costs We live in a world of interruption. In daily life, there are always many things that distract our attention, making it difficult for us to concentrate and read quietly. So being able to grab attention is key. So don't let the clutter around your important apps distract people's attention... Remember the importance of a clean screen to attract attention. If you must display ads, please display them before users read them. Protecting and respecting users’ attention not only makes users happier, it also makes your advertising more effective. Therefore, in order to design a good interface, protecting the user's attention is a prerequisite.
Ensure user control Humans tend to enjoy having control over themselves and their environment. Software that is inconsiderate of others takes away control from users and forces them into unplanned interactions that are not only uncomfortable for them but can also have unintended consequences. Ensure the user's control ability, let the user decide the system status by themselves, and with a little guidance, I think you will achieve your desired goal.
Direct manipulation is best
When we can directly manipulate the physical objects of our world, the best interface design is nothing at all. But this is not easy to achieve, because when designing the interface, the icons we add are often not necessary. For example, we overuse buttons, graphics, options, attachments and other cumbersome stuff so that we end up manipulating UI elements instead of doing the important things. And the original goal? To simplify and enable direct manipulation... Therefore, in interface design, we need to use as little interface encapsulation as possible and understand as many natural human gestures as possible. Ideally, the interface design should be simple and give users a sense of direct operation.
There should be a theme on each screen Every screen we design should have a single theme, which not only allows users to use its true value, but also makes it easier to learn, more convenient to use, and easier to add or modify when necessary. The screen would become cluttered if it supported two or more themes. Just like a written article should have a single theme and a strong argument, so should our interface design, which is its raison d’être.
Keep Secondary Actions A screen with a single primary action can have multiple secondary actions, but they need to stay secondary! The reason your article exists is so people can share it on Twitter, etc…, so a lot of things exist for people to read and understand it. Therefore keeping secondary actions can improve vision and help the primary action to be achieved.
Natural Transitions Few interactions last forever, so thoughtful design considers the next step in the interaction. Consider what the next interaction will be like and support it with design. It's a bit like a dialogue, providing a basis for deeper conversation. Don’t overwhelm users when they’ve already completed the steps they need to take. Give them ways to proceed naturally to achieve their goals.
Well-deserved People are most comfortable when behavior conforms to expectations. We feel a good relationship with other people, animals, things, or software when their behavior consistently matches our expectations. This is also what design that deals with people should do. In practice, this means that users should be able to predict how interactive elements will behave without giving it much thought. If it looks like a button, it should act like a button. Designers should not try to be clever on basic interaction issues, but should be creative at a higher level.
Differentiate what’s important Following from the previous point, if visual elements behave differently, then they should appear differently. Conversely, if the behavior is the same, then the performance is the same. These two points are also always necessary. To maintain consistency, junior designers often use the same visuals (often reusing code) for elements that should be differentiated, when in fact it is more appropriate to treat them differently.
Clarify the hierarchy If there is a clear browsing order for visual elements, then their hierarchical relationship should be made clear. That is to say, if users browse the same things in the same order every time, without a clear hierarchy, they will not be able to tell where the key points are, and it will eventually appear messy and confusing. It is difficult to maintain a clear hierarchy when the design is constantly changing because all elements are relative to each other. If all is stressed, then quite a bit is under-stressed. If a particularly important element is to be added, the designer may want to consider resetting each element to achieve a clear hierarchy again. Most people don’t pay attention to visual hierarchy, but it’s the easiest way to enhance your design.
Proper organization As John Maeda said in his book "Simplicity", proper organization of visual elements can simplify things and help others understand your expression more easily, such as the inclusion relationship of content. Organization based on position and direction can naturally express the relationship between elements. Properly organizing content can save users a lot of thinking. They don’t have to figure out the relationship between elements because you have already shown it. Don’t force users to make that distinction; instead, let designers make it clear with organization.
Use color with caution The colors of the physical world change as the light changes. The scenery we see when the sun is shining brightly and when the sun is setting is very different. Colors are easily changed by the environment. Therefore, color should not be the decisive factor in design. Color can be eye-catching and serve as a guide, but it should not be the only element that makes the difference. When reading a long article or sitting in front of the computer for a long time, a plain or dark background color should be used except for the content that needs to be emphasized. Of course, bright colors can also be used, depending on the reader.
Display sequentially Only necessary content is displayed on each screen. If users need to make a decision, present enough information for them to choose and they will find the details they need on the next screen. Avoid the tendency to over-explain or to present everything at once. When possible, place the selection on the next screen to present information in a step-by-step manner. This will make the interaction clearer.
Built-in Help
In an ideal user interface, help would not be necessary because the user interface would effectively guide the user through the learning process. Something like “Next” is actually “help” embedded in the context and appears in the appropriate place only when the user needs it.
The designer’s task is not to build a help system where users need it, but to shift the responsibility of discovering user needs to users and let them find answers to their questions in the help system. Instead, you should make sure users know how to use the interface you provide and let them be guided and learn from the interface.
Moment of truth: Zero state
A user's first experience with an interface is extremely important, and often overlooked by designers. In order to better help users quickly adapt to our design, the design should be in the zero state, that is, the state where nothing happens. But this state is not a blank canvas, it should be able to provide direction and guidance to users to help them quickly adapt to the design. There will be some friction in the initial interaction process, but once users understand the rules, there will be a high chance of success.
Valuable Existing Problems People seek to solve existing problems, not potential or future problems. Because, don't design interfaces for hypothetical problems, observe existing behaviors and designs, and solve existing problems. This is definitely not the most exciting thing, but it is the most valuable thing because users are using your interface.
Great Design Is Overlooked Great design has a strange property: it is often ignored by its users. One reason for this is that the design is so successful that its users focus on completing their goals and ignore the interface they are facing. In the end, they achieve their goals perfectly so that they don't need to react to any situation. As a designer, this goal is achievable, and when our designs are excellent, we won’t receive a lot of flattery. Great designers will enrich themselves with excellent designs, because satisfied users are often silent.
Multi-field design Vision, graphic design, typography, copywriting, information structure and visualization, all these knowledge areas should be part of the design. Designers should have some knowledge of this and even study it specifically. Don't look down on this knowledge, but learn a lot from it to improve your work ability. Designers need to have a long-term vision and be able to learn from seemingly unrelated things, such as: publishing, programming, bookbinding, skateboarding, firefighting and even karate.
Design must have a purpose In most design fields, the key to successful interface design is that users are using it. Just like a beautiful chair, although it is exquisite, but it is uncomfortable to sit on, users will not use it, and it is a failed design. Therefore, interface design is not only about designing a usage environment, but also about creating a work of art worth using. It’s not enough for an interface to satisfy its designer’s vanity: it has to be useful!
This article was translated by Gao Song, Zhang Yong and Wei Bing.

<<: Detailed explanation of the significance of standard commit msg in JavaScript development

>>: Implementation script for scheduled database backup in Linux

Detailed explanation of Angular component projection

20 Signposts on the Road to Becoming an Excellent UI (User Interface) Designer

Detailed explanation of Angular component projection

How to bypass unknown field names in MySQL

MySQL database connection exception summary (worth collecting)

Implementation of element input box automatically getting focus

Nginx uses Lua+Redis to dynamically block IP

In-depth explanation of Session and Cookie in Tomcat

Detailed explanation of the visualization component using Vue to compare the differences between two sets of data

JS quickly master ES6 class usage

js to realize the production method of carousel

How to use Antd's Form component in React to implement form functions

Recommend

html opens a new window with a hyperlink and can control window properties

Summary of MySQL date and time functions (MySQL 5.X)

How to migrate the data directory in Docker

Fixed a bug caused by scrollbar occupying space

HTML Tutorial: Collection of commonly used HTML tags (5)

Mysql method to copy a column of data in one table to a column in another table

mysql IS NULL using index case explanation

Summary of common docker commands (recommended)

vue-cli4.5.x quickly builds a project

Use of MySQL truncate table statement

HTML text box (text) is not available in multiple ways to achieve read-only

Share 5 JS high-order functions

Detailed explanation of the solution to the error in creating a user and granting permissions in mysql8.0

The spacing between multiple divs with inline-block is different from the programming method

Computed properties and listeners details