User Interface Design
Tips, Techniques, and Principles
A fundamental reality of application development is that the user interface
is the system to the users. What users want is for developers to build
applications that meet their needs and that are easy to use. Too many developers
think that they are artistic geniuses – they do not bother to follow user
interface design standards or invest the effort to make their applications
usable, instead they mistakenly believe that the important thing is to make the
code clever or to use a really interesting color scheme.
Constantine points out that the reality is
that a good user interface allows people who understand the problem domain to
work with the application without having to read the manuals or receive
User interface design important for several
reasons. First of all the more intuitive the user interface the easier it
is to use, and the easier it is to use and the less expensive to use it.
The better the user interface the easier it is to train people to use it,
reducing your training costs. The better your user interface the less help
people will need to use it, reducing your support costs. The better your
user interface the more your users will like to use it, increasing their
satisfaction with the work that you have done. In this article I
- Tips and Techniques
- UI Design Principles
- Concluding Remarks
1. Tips and Techniques
The following tips and techniques that I have learned over the years should
- Consistency, consistency, consistency. I believe the most
important thing you can possibly do is ensure your user interface works
consistently. If you can double-click on items in one list and have
something happen, then you should be able to double-click on items in any
other list and have the same sort of thing happen. 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
- Set standards and stick to them. The only way you can ensure
consistency within your application is to set user interface design
standards, and then stick to them. You should follow Agile Modeling (AM)’s
Apply Modeling Standards practice in all aspects of software
development, including user interface design.
- 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
- 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
- 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. Because different users work in different
ways, your system needs to be flexible enough to support their various
interface-flow diagrams should optionally be developed to further your
understanding of the flow of your user interface.
- Navigation within a screen is important. 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.
- Word your messages and labels effectively. The text you display
on your screens is a primary source of information for your users. If your
text is worded poorly, then your interface will be perceived poorly by your
users. Using full words and sentences, as opposed to abbreviations and
codes, makes your text easier to understand. Your messages should be worded
positively, imply that the user is in control, and provide insight into how
to use the application properly. For example, which message do you find more
appealing “You have input the wrong information” or “An account number
should be eight digits in length.” Furthermore, your messages should be
worded consistently and displayed in a consistent place on the screen.
Although the messages “The person’s first name must be input” and “An
account number should be input” are separately worded well, together they
are inconsistent. In light of the first message, a better wording of the
second message would be “The account number must be input” to make the two
- 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. The
only way you can learn how to use widgets properly is to read and understand
the user-interface standards and guidelines your organization has adopted.
- Look at other applications with a grain of salt. Unless you know
another application has been verified to follow the user interface-standards
and guidelines of your organization, don’t assume the application is doing
things right. Although looking at the work of others to get ideas is always
a good idea, until you know how to distinguish between good user interface
design and bad user interface design, you must be careful. Too many
developers make the mistake of imitating the user interface of poorly
- Use color appropriately. Color should be used sparingly in your
applications and, if you do use it, you must also use a secondary indicator.
The problem is that some of your users may be color blind and if you are
using color to highlight something on a screen, then you need to do
something else to make it stand out if you want these people to notice it.
You also want to use colors in your application consistently, so you have a
common look and feel throughout your application.
- Follow the contrast rule. If you are going to use color in your
application, you need to ensure that your screens are still readable. The
best way to do this is to follow the contrast rule: Use dark text on light
backgrounds and light text on dark backgrounds. Reading blue text on a white
background is easy, but reading blue text on a red background is difficult.
The problem is not enough contrast exists between blue and red to make it
easy to read, whereas there is a lot of contrast between blue and white.
- 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. I have always found the best way to do so is to
left-justify edit fields: in other words, make the left-hand side of each
edit field line up in a straight line, one over the other. 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.
- Expect your users to make mistakes. How many times have you
accidentally deleted some text in one of your files or deleted the file itself?
Were you able to recover from these mistakes or were you forced to redo
hours, or even days, of work? The reality is that to err is human, so you
should design your user interface to recover from mistakes made by your
- Justify data appropriately. For columns of data, common practice
is to right-justify integers, decimal align floating-point numbers, and to
- 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
- Don’t create busy user interfaces. Crowded screens are difficult
to understand and, hence, are difficult to use.
Experimental results show that the overall density of the screen should
not exceed 40 percent, whereas local density within groupings should not
exceed 62 percent.
- Group things effectively. Items that are logically connected
should be grouped together on the screen to communicate they are connected,
whereas items that have nothing to do with each other should be separated.
You can use white space between collections of items to group them and/or
you can put boxes around them to accomplish the same thing.
- Take an evolutionary approach. Techniques such as
interface prototyping and
Agile Model Driven
Development (AMDD) are critical to your success as a developer.
Let’s start with the fundamentals of user interface design.
Constantine and Lockwood describe a collection of principles for improving
the quality of your user interface design. These principles are
The structure principle. Your design should
organize the user interface purposefully, in meaningful and useful ways
based on clear, consistent models that are apparent and recognizable to
users, putting related things together and separating unrelated things,
differentiating dissimilar things and making similar things resemble one
another. The structure principle is concerned with your overall user
The simplicity principle. Your design should
make simple, common tasks simple to do, communicating clearly and simply in
the user’s own language, and providing good shortcuts that are meaningfully
related to longer procedures.
The visibility principle. Your design should
keep all needed options and materials for a given task visible without
distracting the user with extraneous or redundant information. Good designs
don’t overwhelm users with too many alternatives or confuse them with
The feedback principle. Your design should keep
users informed of actions or interpretations, changes of state or condition,
and errors or exceptions that are relevant and of interest to the user
through clear, concise, and unambiguous language familiar to users.
The tolerance principle. Your design should be
flexible and tolerant, reducing the cost of mistakes and misuse by allowing
undoing and redoing, while also preventing errors wherever possible by
tolerating varied inputs and sequences and by interpreting all reasonable
The reuse principle. Your design should reuse
internal and external components and behaviors, maintaining consistency with
purpose rather than merely arbitrary consistency, thus reducing the need for
users to rethink and remember.
The user interface of an
application will often make or break it. Although the functionality that an
application provides to users is important, the way in which it provides that
functionality is just as important. An application that is difficult to use
won’t be used. Period. It won’t matter how technically superior your software
is or what functionality it provides, if your users don’t like it they simply
won’t use it. Don’t underestimate the value of user interface design
Effective developers find ways to work closely with their stakeholders. I'm a
firm believer in the AM practice
Active Stakeholder Participation where your stakeholders do much of the
business-related modeling using
modeling techniques. Furthermore, they should be involved with your
interface prototyping efforts as well.
We actively work with clients around the world to
improve their information technology (IT) practices,
typically in the role of mentor/coach, team lead, or trainer. A full
description of what we do, and how to contact us, can be
found at Scott W.
Ambler + Associates.