How to streamline the user interface

Simple, easy to use, friendly and intuitive. These words are often mentioned, but they are often forgotten in the course of their implementation. This is due to the complexity of the software's functionality. How to deal with the complex function of software can determine its fate. A complex interface lets the user know how to operate. If you reduce the complexity of the operation and streamline the interface, the user experience of the software is greatly improved.

Remove unwanted functionality

The study found that 80% of users only use the software 20% function. And those useless features not only waste development time, but also make the software more difficult to use (these features on the user's blocking effect is greater than useful value). The software tries to do everything possible. And a successful software should be concise and capable, can be individually intelligent to solve a single problem.

Streamlined software can be achieved by cutting functionality. The default removal method is used to determine whether a feature is necessary to be retained. Really filter all the functionality of the software. If this feature does not help most users complete their day-to-day tasks, you can exclude them. The removal function is difficult, when the finishing up to see the user's smooth use of software. You'll know how much it's worth doing.

Hide Complex Parts

If you can't get rid of a complex feature, hide it. Typically, features that are infrequently used occupy more screen space than those that are often used. An excellent interface should ensure that the most commonly used functions are in the most prominent position, hiding the features that are not commonly used.

When we redesign the CMS system, we can not remove a complex function: the bulk editing function. In previous versions, there was an entire row of bulk edit buttons on the main screen. Occupy about 30% of the screen, but we find that very few people use this feature. Our solution is to place a small icon and display a value next to the Drop-down list for a few options. Click on the icon or number to display the Drop-down list. It saves a lot of space in this way and does not interfere with the most basic functions that users use.

minimization of visual disturbances

We have discussed ways to reduce the complexity of the interface by removing and hiding them. But reducing the complexity of "visual perception" is also important. Minimizing visual interference makes the interface look easy to use. Two ways to reduce visual interference are: blank and contrast.

Whitespace is the gap between elements. It should be your default layout tool. One of the classic rules: don't place other design elements if you can use whitespace. If you layout in this way, you will be surprised to adjust the blank of the interface to complete the layout.

Although the use of blank more and more, but also to the extent possible to ensure that there is a sense of contrast. Design theorist "DDD" said: Designers should use the smallest visual changes to express ideas. In fact, this means that there is a sense of primary and secondary between elements.

you can see that the modified version has a very heavy black line, which is different from the previous border. That version of visual interference is smaller? A large amount of white space reduces visual interference and makes people feel more comfortable. Do subtraction, reuse, recycle

When software is formed, problems often occur in the various combinations of programs. Problems can often be solved in the same way. The same component should be used in the interface. Two benefits of using the same component: reducing the time required for development; giving people a consistent experience, if users learn to use an action, they can apply the same actions to other activities.

During the design of the CMS, we spent a lot of time on form validation. We use the red box to invalidate the area, and even add a red balloon to show how many errors there are in each part of the form.

In the subsequent development process, we added a version comparison feature to the requirements list. Instead of creating an entirely new framework, use it to improve on existing frameworks. We marked the modified form with a blue box and marked the area with a blue balloon. In this way we quickly deploy to the user already familiar interface.

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

Blank state refers to the appearance of the interface without data, such as user first use software. As designers, we spend most of our energy on designing how best to present content, but often forget how to show no data.

It is important to establish a reasonable default value. The blank state of the software is usually the first impression of the user, and the user is given a first impression of whether or not to use the software. A good blank state can help users learn how to use the software and help them learn the basics of using the software for the first time.

Versions's Mac version apparently put a lot of thought into the blank state of the program. At the first run, the program highlights the functions that two people might use.

Repeat: Do not forget the blank state!

Related Display

We've seen a lot of confusing, complex software. However, it is somewhat difficult to effectively reduce the complexity of the program.

Invoice Machine interface is very simple. The example shows that it is very frugal and focused on detail. Freckle just make sure you can track your time. The simplicity of the interface flashes vitality and makes routine tasks interesting. Image Spark Black-white gradient. The interface has little visual interference and is easy to use. Ballpark has a concise interface, with the color does not jump.


Krop, its core on two forms: address and keywords.

The whole purpose of the

Fever website is to reduce the distance between your blog and your interest. It is implemented in a very simple and unique way. Screenr is a stunning simple screenshot and is posted to Twitter software. It is noteworthy that there is no function it has, but other similar software has features that it does not have.

Squarespace is doing a good job of hiding complex features. Although it is the network's release platform, it hides the function in a concise interface.

summarize the unnecessary functions, then hide the features that can't be lost, reduce visual noise and reuse elements, and help users with whitespace;

Chinese Address: http://blog.uxredesign.com/interactive-design/minimizing-complexity-in-user-interfaces/

Original address: http://www.smashingmagazine.com/2009/10/07/minimizing-complexity-in-user-interfaces/