User Interface Is As Important As Code

Ever hear the phrase, “lipstick on a pig”? It applies to a vain attempt to make something ugly look pretty, as in “putting a fresh coat of paint on that water-damaged, termite-eaten, water leaking house is like putting lipstick on a pig.”

The software world often has the opposite problem, let’s call it “a swan wearing galoshes”. There are an amazing number of great software applications out there that I don’t give a second look at because their user interface is horrible. Everything from inconsistently positioned buttons, ugly icons, poor spelling, cramped interfaces, badly explained features or hideous splash screens. By that same token there are also quite a few products and applications that do get used simply because they look good, even though they might not work quite as well as their ugly competitor.

One of the reasons for this is because developers are usually horrible designers. While we can coax the most amazing things out of a few lines of code we often can’t pair two colors together in a pleasing way. Worse is that many times developers think they are actually artists… and they’re not. They’ll beam at you while they show off the latest splash screen or icon and you’ll be trying to hide your sudden need to gouge out your eyes.

Another reason is just time, developers will get so excited creating a feature that they’ll just drop buttons all over an interface. Perhaps they’re a control freak and they’ll feel the strong need to make every single option a control on the main form. Perhaps they just don’t care, as long as it works, what does it matter how it looks? Well, if that reasoning applied I doubt there’d so many different brands, models, colors and types of cars. Perhaps that person really doesn’t care how it looks, then again they are probably wearing bland or ill-fitting clothing, perhaps slightly stained, most likely not matching.

The sad thing is a lot of these issues can be avoided with just a little effort.

1. Think of the UI from the beginning. This means both in terms of usability, design, time and budget. Don’t leave this part towards the end. Actually add it to your task list with a real amount of time instead of just assuming the UI features will magically appear at the end.

2. Don’t use temp images or icons, even as placeholders. In the software world there is no such thing as a temporary placeholder. Pick a silly splash screen or funny icon or just a “quick button for testing” and there is a good chance your application will go out the door just like that. People grow used to things rather quickly, even the most hideous of icons. They will also mentally check that off a “to-do” list in their head so if you later say you need to spend some budget on a graphic designer they’ll usually just say, “what about what you already have?”, even if it does cause the elderly to void their bowels.

3. Use stock icons. There are several great icon sets available for purchase these days, as well as custom icon design. Visual Studio 2005 even comes with a huge set of high quality icons for use. Please, use these. View the price of the icons not as “some pretty things” but as you would a component. I’ve spent anywhere from $50 to $500 on various development tool add-ons and dropping $49 for some icons seems like a pretty good deal.

Do not attempt to make your application look different by using your own custom icons unless your’s are actually good. I’ve seen apps where the toolbar is littered with mutant variations of standard open/save icons with some vile gradient or abstract take on “Open”. All of those fail because while you may enjoy making your app look like some Dali painting your users would much rather have a consistent look and feel, including icons, across all of their applications.

Here are a few links to get you started:

StockIcons, IconBuffet, IconShoppe, glyFX

4. Use the OS as a guide. While you might not be able to afford a designer I bet the devs of your OS could. If you’re stuck on how certain controls should work or look then go to your OS and find something roughly similar. If you have other applications that you like the look of by all means get inspired by them, though if they have a distinctive interface be careful not to rip it off.

5. Be consistent. If one option dialog has all the labels ending in a colon (like “Password:”) make sure EVERY dialog in your application follows that convention. If one form has all of it’s controls 8 pixels from the left make sure ALL of them do. Even if you hate how the original forms look you still need to be consistent, or change all of them. Nothing makes an application look more shoddy than dialogs that all look slightly different.

You know how you can tell when someone has slept in the same clothes they’re wearing? How no amount of smoothing and splashing of water and combing of hair really gets rid of that disheveled look? That’s how an application that isn’t consistent looks, you may not notice it at first but it is making an impression, and not usually a good one.

Given the stiff competition in the software world today you really can’t afford to release ugly applications anymore.