Easy way to detect clutter in User Interfaces

Learn the screen scratch technique to easily identify visual clutter and noise in user interfaces.

There is an easy technique to identify visual clutter in GUIs that I would like to share with you. It is so simple that everybody can apply it quickly and everywhere. The technique is called Screen Scratch.

As you might have noticed, UI toolkits like Swing, AWT and SWT (among others) paint their components using colors that emulate a pseudo-3D image and produces a depth impression on the screen. This is exactly what we explore with this technique.

Imagine that your fingers could feel these 3D levels while you move them along the screen: how deep would your fingers vibrate? If you could “feel” a high degree of vibration, chances are that the screen is cluttered and needs to be revised. On the other hand, if you could notice just a few levels of depth, the screen is probably well designed and there is no visual noise.

It is important to remember that the goal of this technique is to identify components, borders and lines that should not stay together and were added by some developer without UI design skills. As a first example, take a look at a software tool called wGetGUI. Its screen is so cluttered that we would feel it as a piece of sandpaper.

Figure 1: Two possible arrangements of the same panel

With this technique we can easily spot the clutter on the UI due to the excessive number of borders and nested panels.

In general, the only borders that should be left on the GUI are component borders, since they bring important information to the users. Therefore, don’t try to change or remove them unless you know what you are doing.

Another point to which we have to pay attention is the emerging GUI styles available everywhere. Have you ever seen those beautiful shiny and glossy components that bring a soft and elegant UI to almost any software?

elegant Figure 2: Elegant Look-and-Feel with glossy components.

Components like the ones above would make our nails slide smoothly on the screen and this could be a problem to this technique. In this case, pay special attention to borders and other lines that are too close to each other. In fact, this is something that cannot be easily disguised even when the appearance of the components are well designed. Take a look at the nested borders of the JTabbedPane components above. Okay, this is just a demo app, but it should be clear to everyone that it contains lots of clutter.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s