Classic Movies and Books

Learn Software Development

All about the processes involved in software development

Search this site
Google
 

User interface design tips

Filed Under UI, Tips, Design | Posted on January 22, 2008




The field of User Interface Design is a fairly complex field; to get a good design that is attractive to the user is an incredibly tough task. However, it is always helpful to review some good tips that can help in this matter. So, here is a compilation of user tips from studying various resources:

- Make sure the design is simple, logically organised and well labelled.
- Avoid cluttering the screen with data that is irrelevant to the operator.
- Where appropriate present information graphically, such as with analogue meters or moving bars, rather than alpha-numerically. Present numerical data only when the operator needs to know exact values. This is especially true for rapidly changing readings.
- Consistency, consistency, consistency. Put your buttons in consistent places on all your windows, use the same wording in labels and messages, and use a consistent color scheme throughout. Consistency in your user interface enables your users to build an accurate mental model of the way it works, and accurate mental models lead to lower training and support costs.
- Line up numeric values and always show clear labels with units.
Be prepared to hold the line. When you are developing the user interface for your system you will discover that your stakeholders often have some unusual ideas as to how the user interface should be developed. You should definitely listen to these ideas but you also need to make your stakeholders aware of your corporate UI standards and the need to conform to them.
- Don’t use all uppercase and keep the number of fonts to a minimum.
- Explain the rules. Your users need to know how to work with the application you built for them. When an application works consistently, it means you only have to explain the rules once. This is a lot easier than explaining in detail exactly how to use each feature in an application step-by-step.
- Group related items, perhaps by drawing a box around them.
- Make sure the results of pressing a control button are absolutely clear.
- Navigation between major user interface items is important. If it is difficult to get from one screen to another, then your users will quickly become frustrated and give up. When the flow between screens matches the flow of the work the user is trying to accomplish, then your application will make sense to your users.
- In Western societies, people read left to right and top to bottom. Because people are used to this, should you design screens that are also organized left to right and top to bottom when designing a user interface for people from this culture? You want to organize navigation between widgets on your screen in a manner users will find familiar to them.
- Use colour conservatively, conventionally and consistently.
- Understand the UI widgets. You should use the right widget for the right task, helping to increase the consistency in your application and probably making it easier to build the application in the first place.
- Align fields effectively. When a screen has more than one editing field, you want to organize the fields in a way that is both visually appealing and efficient. The corresponding labels should be right-justified and placed immediately beside the field. This is a clean and efficient way to organize the fields on a screen.
- Use a muted, neutral colour for the background, such as grey or blue.
- Minimise the number of colours and make these as distinct as possible.
- Justify data appropriately. For columns of data, common practice is to right-justify integers, decimal align floating-point numbers, and to left-justify strings.
- Don’t make colour the sole source of information - use labels or position to clarify.
- Your design should be intuitable. In other words, if your users don’t know how to use your software, they should be able to determine how to use it by making educated guesses. Even when the guesses are wrong, your system should provide reasonable results from which your users can readily understand and ideally learn.
- Use a group of Radio button when you have multiple choices and you only want to select one and only one choice. Use a Check box when you have only 2 choices, this or that, and no more.
- ComboBox is a more compact GUI control to house multiple choices, so it is more suitable for large number of choices, so all choices can be shown in the same space that is needed by one choice, while Radio Button groups tend to show all the available choices in the web form, or windows form.
- Use a group of Radio button when you have multiple choices and you only want to select one and only one choice. Use a Check box when you have only 2 choices, this or that, and no more.


Leave a Reply