Today I will write about some techniques to declutter a user interface. This is not directly related to a specific kind of media, it applies to user interfaces in general, no matter if you are developing games, websites or bank terminals

Why?

On a clean and simple user interface it is much easier to find the functions you need. Without distractions through unnecessary elements they don’t need to search for the right elements, they catch your eyes.

It is easier for the user to get along with a clean user interface, and much more fun. If you care about your users, you should care about your user interface.

How?

Remove Features

Removing features have the biggest impact on the decluttering process. But of course, they are the most painful. But sometimes it is more effective to strip out less important features to make your core features outstanding.

Think about the features of your application. Don’t just implement everything that comes to your mind, just because it would be cool-to-have.

I can highly recommend reading the Feature Selection chapter of Getting Real which deals with that topic.

Interface Profiles

Many applications are used in different ways by different kind of people. If you cannot simplify the software and still serve the needs for all your clients, you may think of breaking down your interface into smaller ones.

Each of these interfaces will serve a smaller range of purpose and can thus be simplified on its own.

Restructure Menus

Some features are used less frequently than others. And of course users should be able to do more frequently used tasks faster than less frequently used ones.

When you are using menus to provide access to your features you should think about their structure. Are more frequently used tasks available with a few clicks? Is the your menu intuitive and logically structured?

In my opinion the new Microsoft Word menu (the image above) is a huge improvement regarding the menu structuring.

Color, size and contrast

As stated above, some tasks, buttons and links are more important than others. Beside the structure of menus you can use many other ways to emphasize some elements while lighten lesser used ones.

You may use color or contrast to empathize the the most important link.

You can also change the size to make some options standing out. In this case 37signals highlighted their pricing plan that is suitable for most of their clients.

The images are screenshots taken from the Campfire website.

Make use of hover effects

Sometimes you can get a much cleaner look by just hiding elements until you need them. The example above overlays a users users avatar with some options to interact with him, instead of adding them constantly to the user interface.

Conclusion

I think with these few techniques you can greatly improve user interfaces. So please tell me if you could make use of this article, and of course tell me about your suggestions and extensions as well.

Regards,

Dennis