User interface design: A simplified approach to user interface design

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 operating interface, the user experience of the software is greatly improved.

Remove unwanted functionality

The study found that80% 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. To 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 worthwhile it is to do it.

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.

Minimize visual interference

We have discussed ways to reduce the complexity of the interface by removing and hiding them. But 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 contrast.

Whitespace is the gap between the elements. It should be your default layout tool. One of the classic rules: If you can use whitespace, don't place other design elements. 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 even 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 process, 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.

Reusing 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 considers whether or not to use the software through first impressions. 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 again: Do not forget the blank state!

Related Show

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

The interface of Invoice Machine is very simple. The example shows that it is very frugal and focused on detail. Freckle just make sure you can keep track of your time. The simplicity of the interface flashes the energy and makes the routine task interesting. Image Spark Black-white gradient. The interface has almost no 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 site 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 of the software that is posted to Twitter. 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

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

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/