I know you want to make your application better and easier to use. But short of complete redesign what do you do? Even if you are starting now what do you do?

Making software that is easy to use is as much art as it is science in my opinion, so every single tip that I can find that I can use immediately is immensely useful.

Here are two things you can apply to your apps now to make them better, and they come from Brandon Walkin’s Managing UI Complexity post. I encourage you to read his whole post since it is very insightful.

1. Alignment and Visual Hierarchy

Aligning elements in a user interface to a simple, consistent grid, will go great lengths in reducing the appearance of complexity. The use of strict alignment and a thoughtfully laid out grid can turn an interface from chaotic and overwhelming to harmonious and appealing.

This is best illustrated by following screenshot that compares Microsoft Expression Blend and Adobe Lightroom:

LightroomVsExpressionBlend

Notice how vertical lines show UI complexity caused by alignment. This is something you can act upon now. Take a screenshot of your dialogs, fire up Paint or Photoshop and draw alignment lines as shown in image above. If you end up with spaghettis, you know you can improve alignment and make your UI better.

2. Visual Noise and Contrast

The amount of visual noise in an interface has a great deal of impact on the perceived complexity of the interface. And contrast plays an important role with respect to visual noise. Using lower contrast UI elements reduces visual noise which will often reduce the effective complexity of the interface, as you’ll see in the next couple of examples.

Here is screenshots that illustrates this point:

AdressBookComparrison

Important to notice is that noise created by borders for each text box control added considerable perceived complexity to the form. If you can simply by removing them and showing them on as needed basis will improve the perceived complexity.

Same applies to contrast. Here is image that also shows contrast difference between Lightroom and Expressions Blend, less contrast, less perceived complexity. Pay attention to difference in text contrast between these two:

Contrast

These are two tips you can use today to improve your UI. Go, do it! Hat-tip to Brandon.

Tagged with:
 

Unusual User Interface Design

Take a look at this UI design from Mac application Bodega:

Bodega Application Window

Note how they use window awning to simulate storefront, which is what that application does. It helps you discover applications for Mac, like virtual store. Even the advertisement signs are hanging up there and they wave with nice animation as you move the application window around. Nice touch.

It is unusual design but it does look good, it is fresh and you won’t confuse it with something else. What more can you ask for?

Tagged with:
 

Looking for something?

Use the form below to search the site:

Still not finding what you're looking for? Drop a comment on a post or contact us so we can take care of it!

Visit our friends!

A few highly recommended friends...

© 2009 Denis Basaric: DevComponents Blog