Home Interface Services Interface Design Rules

The 10 Rules of Interface Design

The more things you have on the screen, the higher the probability that a user will get confused or distracted from their original task. This is true for both websites and software. A page with 1000 links is more likely to distract you then a page with only 4 links.

Always be very careful before adding a new link, menu item or feature. Ask yourself: Will this distract the user from what they are trying to do?

At any point in time you can optimize your user interface to satisfy a percentage of your user base. Decide what 80% are the most important and design for them first. Later add functionality to satisfy the other 20%. If you try to design for everyone you will not be able to satisfy anyone.

When a user visits your web page or uses your software they expect to flow between pages and dialogs to accomplish their task. Design your interface to flow. Top to bottom, left to right (assuming English). Extra information should be kept out of the flow to avoid being distracting.

Explain the purpose of the page or dialog with clear instructions on what to do next. Avoid forcing the user to infer meaning. Think about the types of text hints that will help people complete a page. Code for the user, not for the program. Keep in mind what the user is trying to accomplish and the information that they are likely to have. Now provide text hints to help get that information into your user interface.

When designing an interface it is often tempting to focus too much on the visual design instead of the interaction design. Start by storyboarding your interface using pencil sketches. Use block diagrams to illustrate the general layout and structure of your design. By doing this you allow yourself to iterate quickly without worrying about the visual details of your design. After this is complete review your design and explore where visual elements can help people understand what’s going on. If used correctly an image is worth a thousand words. If used incorrectly an image is worth a thousand frustrations.

Use the right control for the right problem. Do not use a drop down list to choose one of 100 countries. Do not use a link to do the job of a button. The right control makes interacting with a page easier and will keep the user moving quickly. On the web the library of controls is small so you may have to create some of these controls. If you do this be careful to use controls that would be easy to use on a web page, avoid things like interactive menus because they can often cover what the users are trying to click on.

Do not reinvent the wheel. Many of the hardest user interface problems have existing solutions. These solutions are often well understood patterns. Look for these existing concepts, patterns and metaphors before creating new ones. Some example patterns: Creating a list, ordering a group of items, selecting multiple items for a list. Entering an address. Adding things to a shopping cart. Etc..

Regardless of how good your software is, users will make mistakes. Make your software forgiving to these mistakes. Features like undo/redo, the recycle bin and auto-save help the user recover from mistakes. Design recovery features into your website or software. Make sure that if users make a mistake they have the opportunity to correct it.

The only way to really understand what people are thinking is to ask them. Always test out your design on real users, ask your friends, family or others to try your software. Watch how they use it, learn where the trouble spots are and then make modifications. Ask what is working and what is not working.

When talking with users make sure they understand that you are testing the design of the software not their knowledge or expertise. It helps to remind people that it is not their fault if they can not accomplish something with your software.

A good user interface rarely happens on the first try. Build time into your schedule to iterate your design. Each time find out what worked and what did not work. Pick out the trouble spots and work through them. A good interface takes time.

Learn more about our UI services
 

Recommended Books: