My quick tips for UI design and another example

Here are some quick tips that I keep in mind for user interface design, bearing in mind that I'm not a graphic designer (so don't be too harsh on me!). I also found another user interface sample in the project archives.

Style

Here are my six style rules (they are not so much rules as guidelines really) that I use when creating or making over a web or Lotus Notes user interface.

1. Rule of thirds

Most of my websites and notes apps are divided up into thirds, three columns or variants thereof. It's a well know composition technique that has been around a while.

http://desktoppub.about.com/cs/pagelayout/qt/rule_of_thirds.htm

2. Complementary Colours

There are a set of colours that work best together, so when I'm deciding on which colours I usually choose from a pallette of complementary colours. If you're not up on you primary colours and matching blends then do what I do and use the following websites to get a pallette to work with.

http://www.easyrgb.com/index.php?X=HARM
http://www.colourlovers.com/

3. Restrict the numbers of colours

That's right. just because there are 12 colours that work well together, doesn't mean that you should use them all. Between 3 - 5 colours are a good combination that tends to be less distracting. That doesn't include a violator.

4. Consistent Fonts

Keep the fonts consistent. That is, try to keep the different types of fonts to maybe one or two types and ensure that they are both a serif or both san-serif. Ty not to mix the types. There are instances where mixing and matching can work, but typically that seems to be websites of traditional printed materials like newspapers that have a long history of serif fonts.

5. Alignment

Nothing stands out more that something that isn't lined up. Alignment that is inconsistent looks sloppy, unordered and distracting to the user. I believe that most user scan the screen and alignment helps to scan the information quickly.

http://www.design-lib.com/alignment-in-graphic-design-gd.php

6. White space

Pay attention to the space around your UI elements, do they looked like a can of sardines or could you park a bus between them. Playing around with your whitespace proportions can make all the difference, try it until the spacing feels right - then stop.

Whitespace is often used to create a balanced, harmonious layout

http://www.alistapart.com/articles/whitespace
http://interfacematters.com/2009/03/cheap-ui-trick-add-whitespace-with.html

Function

Here are my five functional guidelines.

1. Hide the irrelevant and clutter

If the user isn't suppose to click on that button, then hide it. If that information on the screen is not important at this stage of the workflow, then hide that too. Have you ever sold a house and removed all the clutter, cleaned the surfaces and made it look like a show home ? Do the same to your UI.

2. Consistent behavior

I don't like to surprise the users, if they click on one export button and it asks for a filename and fills in a default, the any other export buttons should do the same. In essence when they perform an action they should have the same experience.


3. Simplify the choices

Don't give the users 5 different ways to do something, that's four extra ways that they have to remember and recall. Sure, provide some level of personalisation in the way the user can interact, but the fewer the underlying choices the better.

4. Remove Mild Annoyances

Things that are midly annoying in development and user testing, will be hell for users that have to use the application daily and for long periods of time - so spend some time fixing up those minor annoyances.

5. Proactive help

Set defaults. For example, if you are writing an export routine, set a default filename, set the default fields and options. Show context sensitive examples to give the user somewhere to start. It might mean a bit more coding, but just think of the amount of time that a user would waste repeating the same thing, over and over.

Sample from the archive

As promised, here is a user interface make over from the archives, that included some (but not all) of my guidelines.

Form. Note rule of thirds, colours, alignment and whitespace.