The Importance of Good UI Design

UIArticle

I have noticed that some software seems to fall into one of two categories from past experience:

1. Fantastic UI design, with less than optimal functionality.

2. Fantastic functionality, with less than optimal UI design.

The obvious desired outcome for most developers would be to have an equal combination of both; good clean UI with efficient functionality.  With just a little attention to detail, your UI can become much more consistent, and provide a much better user-experience.

Some developers put a massive amount of time and effort into the actual coding of their software, and then in an attempt to get it out to the public as quickly as possible, spend only a minimal amount of time on the UI, almost as if it’s some kind of afterthought.

A more practical approach would be to wait an extra week before releasing you software to the world, whilst you thoroughly polish your software to perfection.  This way you can be confident end-users will receive a positive impression (as opposed to a negative one due to lack of attention to detail).

Using defensive programming techniques (checking for every possible exception / error) also makes for a more professional user-experience.  Frantically clicking all the controls in your software as fast as possible, combined with rapidly banging away on the keyboard, are both excellent ways of generating an exception / error – which you can then provide a handler for, thus preventing the dreaded error messages from being presented to the end-user.

Spend a decent amount of time to check the less interesting components of your software, and then reap the rewards in your finished masterpiece.

Pixel Perfect Alignment

Try to make the controls in your window align correctly (where UI design permits). 

If you decide to have a left margin of 20 pixels in your window – ensure that all controls adhere to this designated alignment. This will prevent inconsistency, which with a little more attention to detail, would not have existed.

Text Styles

Try to use just one or two fonts in your software, and also try to prevent mixing the text presentation of button controls between lowercase, titlecase, and uppercase.

Having one control which uses titlecase text, next to another identical control using lowercase text, will make your UI look inconsistent.

This can once again create the undesired impression of lack of attention to detail.

Punctuation & Grammar

If punctuation and grammar are not your forté, ask someone else to spend 5 minutes reviewing your software for any textual mistakes – you will thank them for it afterwards!

Good grammar and punctuation will portray the impression of a professional, well made piece of software, of which you can be proud.

Native Controls

Although it may be personally satisfying to create your own graphical buttons etc. it can often make the software look non-consistent with the actual OS.

By using native controls, and using the same style as the OS uses – your software will appear to blend in, and portray a much more professional looking end result.

UI guidelines are usually available online, and will help to ensure that your software visually corresponds to your OS – resulting in a much more natural user-experience.

Colour Scheme

Having a consistent, neutral colour scheme throughout your UI, can help to create a modern, clean impression.

Garish colours often distract from the actual content (anyone remember websites from the early 90’s, which used flashing yellow marquees on a purple background?)

Another recommendation, is to ensure that controls are easily identifiable as such.  Normally, text areas for example have a white background. If you decide against this, it may not be immediately apparent that it’s a text area, and thus cause confusion for your end-users.

Descriptions & Explanations

Some professional developers seem to forget to put instructions as to how to use the actual software.  What may seem obvious to a professional developer, may be completely unintuitive for a regular, non-techie end-user.

Declutter. Declutter. Declutter!

On a similar note to the one above, having too many controls in one window can totally perplex the end-user, and cause your software to appear far more complicated than it actually is.

I personally, have downloaded software, only to delete it again within a few minutes, due to being bombarded with options (often containing no accompanying explanation).

Although you may have absolutely no problem with a gazillion options which make your software more powerful, it may be a better idea if you somehow split up the UI into smaller segments containing less controls.

This affords you the ability to retain all the power of your software, without overpowering your end-user.

I personally, would rather my end-users found a function a week later (which they never knew existed), than be initially bombarded with too many options, resulting in them thinking it’s too complex, thus seeking an easier to use option from another developer.

Obviously, if your target audience can handle all that information, then there is no problem.  But once again, non-techie end-users may feel overwhelmed and move on.

Natural Language

When displaying information, try to use natural language, as opposed to verbosity or sparsity.

This will make it much more natural for your end-users to understand exactly what is going to happen, or what is expected of them.

For example: A button control which states SORT ALPHABETICALLY, is a lot clearer than SORT or even worse SORT THE INFORMATION IN THE LISTBOX ABOVE ALPHABETICALLY.

Keeping middle ground in your textual explanations appears to be much more natural than short robotic descriptions, or long-winded rambling ones.  Simply try to make the text clearly descriptive, without becoming too verbose, or too sparse.

Whitespace is King

Try to separate your content using white space, as opposed to boxing everything up.

This will serve to create the illusion of less information for the end-user to absorb, and also make your window look a lot less cluttered.

Having every pixel of screen space used up with controls often comes across as a bit overpowering.

Maximize Content Dimensions

A lot of software seems to have its content miniaturised in order to present more info.  This often makes end-users squint at the screen in order to read the actual content.

Making listbox rows just a few pixels bigger for example, can make all the difference between readability and frustration.

Consistency Throughout

Try to keep your UI as consistent as possible.  In other words – if you decide to have uppercase text for buttons, then make sure all buttons are in uppercase.

If you have a beep sound when an error occurs – have all errors make the very same beep sound.

If you have an error message box presented in a certain manner – have all error message boxes presented in the same manner.

etc. etc. etc.

Conclusion

In order to sum things up, if you keep your software clean, uncluttered, neutral, symmetrical, grammatically correct, and easy to understand – you can rest assured that you have done everything within your grasp to provide the best possible user-experience.