ZZ how to streamline user interface

Minimizing complexity in user interfaces

Simple, easy to use, friendly, and intuitive. These words are often mentioned but often forgotten during execution. This is caused by the complexity of software functions. The fate of the software can be determined by how well the complex functions of the software are handled. A complex interface will make users do not know how to operate. If you reduce complex operation processes and streamline the operation interface, the user experience of the software will be greatly improved.

Remove useless features

Research findings:80% of users only use 20% of software features. Those useless functions not only waste development time, but also make the software more difficult to use (these functions hinder users more than useful value ). The software tries its best to do everything well. A successful software should be concise and lean, and can solve a single problem intelligently.

Streamlined software can be achieved through feature reduction. The default removal method is used to determine whether a function is retained. Filter all functions of the software. If this function does not help most users complete daily tasks, you can exclude it. It is difficult to delete the function. After finishing the process, you can see that you can use the software smoothly. You will know how worth doing this.

Hide complex parts

If a complex feature cannot be removed, hide it. Generally, functions that are not commonly used occupy more screen space than frequently used functions. The excellent interface should ensure that the most commonly used functions are in the most prominent position, and the less commonly used functions are hidden.

When we redesign the CMS system, we cannot remove a complex feature: the batch edit feature. In previous versions, there were a full row of batch edit buttons on the home screen. It occupies about 30% of the screen, but we find that few people use this function. Our solution is to place a small icon and display a number next to it to show the options in the drop-down list. Click the icon or number to display the drop-down list. This method saves a lot of space and does not interfere with the use of the most basic functions.

Minimize visual interference

We have discussed how to reduce the complexity of the interface by removing and hiding it. However, it is also important to reduce the complexity of "Visual Perception. Minimizing visual interference makes the interface look easy to use. Two ways to reduce visual interference are: blank and comparison.

Blank refers to the gap between each element. It should be your default layout tool. One of the classic rules: If you can use blank spaces, do not place other design elements. If you use this layout method, you will be surprised to adjust the blank page to complete the layout.

Although the use of blank space is more beneficial, but also to ensure a sense of comparison as much as possible. Designers should use the smallest visual changes to express their thoughts, says the design thinker "DDD. In fact, this means that there must be a sense of priority between elements.

You can see that the modified version has a very heavy black line, which is different from the previous border. Which version has less visual interference? (Of course, the original is better) a large number of blank areas reduce visual interference and make people feel more comfortable. Subtraction, reuse, and reuse

When software is formed, problems often occurProgram. The existing problems can be solved in the same way. The same component should be used in the interface. Two advantages of using the same component: reduce the time required for development and provide a consistent user experience. If you learn to use an operation, they can apply the same operation behavior to other operations.

In designing CMS, we spent a lot of time on form verification. We use a red box to display invalid areas, or even a red prompt box to show how many errors occurred when entering the form.

In the subsequent development process, we added the version Comparison Feature in the requirement list. Instead of creating a new framework, it is better to use an existing framework for improvement. We marked the modified table order with a blue box and marked the area with a blue prompt box. By using this method, we can quickly deploy it on a user-already familiar interface.

Reusing elements is another way to reduce the complexity of the interface, because users can quickly familiarize themselves with the software. The blank status should not be blank.

The blank status refers to the interface without data, such as the first time you use the software. As a designer, we spend most of our effort designing the Best Presentation content, but often forget how to present without data.

It is important to establish a reasonable default value. The blank state of the software is usually the first impression to the user. The user determines whether to use the software through the first impression. A good blank state can help users learn how to use the software and help them learn the basic operations for their first use of the software.

The blank status should not be blank.

The blank status refers to the interface without data, such as the first time you use the software. As a designer, we spend most of our effort designing the Best Presentation content, but often forget how to present without data.

It is important to establish a reasonable default value. The blank state of the software is usually the first impression to the user. The user determines whether to use the software through the first impression. A good blank state can help users learn how to use the software and help them learn the basic operations for their first use of the software.

The Mac version of versions has obviously put a lot of effort into the blank state of the program. At the first run, the Program highlights the functions that two people may use.

Repeat: Do not forget the blank status!

Related presentations

We have seen a lot of messy and complex software. However, it is difficult to effectively reduce the complexity of the program.

The invoice machine interface is very simple. The example shows that it saves a lot of scalability and focuses on details.

 

Freckle only ensures that you can track your own time. Simple interfaces flash vitality, making routine tasks interesting.

 

Image spark black and white gradient. The interface has almost no visual interference and is easy to use.

 

Ballpark has a simple interface that uses no color to skip.

 

The core of Krop is two forms: Address and keyword.

 

The purpose of the fever website is to reduce the distance between you and interested blogs. It is implemented in a simple and unique way.

 

Screenr is an amazing simple screenshot and released to Twitter. It is worth noting that there are no functions, but none of the functions of other similar software.

 

Squarespace does a good job in hiding complex functions. Although it is a network publishing platform, it hides functions in a simple interface.

Summary

• Remove unnecessary functions;
• Then hide the functions that cannot be removed;
• Reduce visual noise and reuse elements;
• Use blank space to help users;

(Translation omitted)