Lesson 1: User Interface Design Principles

Lesson 1: User Interface Design Principles

The user interface provides a mechanism for users to interact with your application. Therefore, an efficient design that is easy to use is of paramount importance. This lesson presents guidelines for designing user-friendly, elegant, and simple user interfaces.

When designing the user interface, your primary consideration should be the people who will use the application. They are your target audience. Knowing your target audience makes it easier for you to design a user interface that helps users learn and use the application. A poorly designed user interface, on the other hand, can lead to frustration and inefficiency if it causes the target audience to avoid or even discard your application.

Forms are the primary element of a Microsoft Windows application. As such, they provide the foundation for each level of user interaction. Controls and menus can be added to forms to supply specific functionality. In addition to being functional, your user interface should be attractive and inviting to the user. The .NET Framework supports a variety of graphic effects that aid in the visual presentation of your application, including shaped forms and controls, transparent or translucent elements, and complex shading effects.

After this lesson, you will be able to

• Describe the importance of the user interface

• Explain the role of forms, controls, and menus in the user interface

• Explain the importance of composition and color in your user interface

• Explain the use of images, icons, and fonts in the interactive design

Estimated lesson time: 30 minutes

Forms, Controls, and Menus

Forms generally contain a set of related information or options that provide users with information they need to proceed. Every form is also a class, and you can create multiple instances of a form or inherit from a form. These topics are discussed further in Lesson 2 of this chapter and in Chapter 4.

Controls make information and options accessible to users. Controls such as labels and picture boxes can display information. Controls such as text boxes, list boxes, or combo boxes can both display information and accept user input. Controls such as buttons can allow the user to select a course of action. The use of controls is examined in Lesson 3 of this chapter.

Menus and toolbars provide a structured way to expose available commands to the users of your application. Menus are often incorporated to provide access to higher-level commands that might be common to all the forms of an application, such as commands to save data or exit the application. Menus can present options in a logical, consistent manner that enhances the user experience and enables rapid mastery of the application. Menu elements can be enabled or disabled to customize options available to the user at different points in the application. The use of menus is discussed in Lesson 4 of this chapter.

Composition

Composition drives the look and feel of your user interface. How your user interface is composed influences how rapidly your application can be learned and adopted. Primary composition considerations include:

• Simplicity

• Position of controls

• Consistency

• Aesthetics

Simplicity

Simplicity is an important aspect of a user interface. A visually busy or overly complex user interface makes it harder and more time-consuming to learn the application. A user interface should allow a user to quickly complete all interactions required by the program, but it should expose only the functionality needed at each stage of the application.

When designing your user interface, you should keep program flow and execution in mind, so that users of your application will find it easy to use. Controls that display related data should be grouped together on the form. Controls such as list boxes, combo boxes, and check boxes can be used to display data and allow users to choose between preset options. The use of a tab order (an order by which users can cycle through controls on a form by pressing the Tab key) allows users to rapidly navigate fields.

Trying to reproduce a real-world object is a common mistake when designing user interfaces. For instance, if you want to create a form that takes the place of a paper form, it is natural to attempt to reproduce the paper form in the application. This approach might be appropriate for some applications, but for others, it might limit the application and provide no real user benefit because reproducing a paper form can limit the functionality of your application. When designing an application, think about your unique situation and try to use the computer s capabilities to enhance the user experience for your target audience.

Default values are another way to simplify your user interface. For example, if 90 percent of the users of an application will select Washington in a State field, make Washington the default choice for that field. (You should always make it easy to override the default value when necessary.)

Information from your target audience is paramount when designing a user interface. The best information to use when designing a user interface is input from the target audience. Tailor your interface to make frequent tasks easy to perform. After your application is complete, additional user input will facilitate continued improvement.

Position of Controls

The location of controls on your user interface should reflect their relative importance and frequency of use. For example, if you have a form that is used to input both required information and optional information, the controls for the required information are more important and should receive greater prominence. In Western cultures, user interfaces are typically designed to be read left-to-right and top-to-bottom. The most important or frequently used controls are most easily accessed at the top of the form. Controls that will be used after a user completes an action on a form, such as a Submit button, should follow the logical flow of information and be placed at the bottom of the form.

It is also necessary to consider the relatedness of information. Related information should be displayed in controls that are grouped together. For example, if you have a form that displays information about a customer, a purchase, or an employee, you can group each set of controls on a tab control that allows a user to easily move back and forth between displays.

Aesthetics is also an important consideration in the placement of controls. You should try to avoid forms that display more information than can be understood at a glance. Whenever possible, controls should be adequately spaced to create visual appeal and ease of accessibility.

Consistency

Your user interface should exhibit a consistent design across each form in your application. An inconsistent design can make your application seem disorganized or chaotic, hindering adoption by your target audience. Don t ask users to adapt to new visual elements as they navigate from form to form.

Consistency is created through the use of colors, fonts, size, and types of control. Before any actual application development takes place, you should decide on a visual scheme that will remain consistent throughout the application. Avoid the temptation to show off. Extraneous use of controls or flashy visual elements only distracts users and makes your application less efficient.

Aesthetics

Whenever possible, a user interface should be inviting and pleasant. Although clarity and simplicity should not be sacrificed for the sake of attractiveness, you should endeavor to create an application that will not dissuade users.

Color

Judicious use of color helps make your user interface attractive to the target audience and inviting to use. It is easy to overuse color, however. Loud, vibrant colors might appeal to some users, but others might have a negative reaction. When designing a background color scheme for your application, the safest course is to use muted colors with broad appeal.

Always research any special meanings associated with color that might affect user response to your application. If you are designing an application for a company, you might consider using the company s corporate color scheme in your application. When designing for international audiences, be aware that certain colors might have cultural significance. Maintain consistency, and do not overdo the color.

Always think about how color might affect usability. For example, blue text on a black background can be difficult to read and, thus, impairs usability. Also, be aware of usability issues related to colorblindness. Some people, for example, are unable to distinguish between red and green. Therefore, red text on a green background is invisible to a user with this condition. Do not rely on color alone to convey information. Contrast can also attract attention to important elements of your application.

Fonts

Usability should determine the fonts you choose for your application. For usability, avoid fonts that are difficult to read or highly embellished. Stick to simple, easy-to-read fonts such as Palatino or Times New Roman. Also, as with other design elements, fonts should be applied consistently throughout the application. Use cursive or decorative fonts only for visual effects, such as on a title page if appropriate, and never to convey important information.

Images and Icons

Pictures and icons add visual interest to your application, but careful design is essential to their use. Images that appear busy or distract the user will hinder use of your application. Icons can convey information, but again, careful consideration of end-user response is required before deciding on their use. For example, you might consider using a red octagon similar to a U.S. stop sign to indicate that users might not want to proceed beyond that point in the application. A red octagon is not a universally recognized symbol of stop, however, so its significance might be lost on an international audience. Know your target audience, and tailor the use of icons and visual elements to the audience.

Whenever possible, icons should be kept to simple shapes that are easily rendered in a 16-by-16-pixel square. Complex pictures can suffer a severe loss of resolution (and thus become unusable) when degraded.

Shapes and Transparency

The .NET Framework provides tools for creating forms and controls with varying levels of opacity, using shapes other than the traditional rectangle. These tools can create powerful visual effects, but they should not be overused. For example, although it might be interesting and unique to have a text box shaped like a doughnut, such a text box might be inefficient or detract from the usability of your application. Always keep the end user in mind when applying these effects. Similarly, translucent forms can be used to allow a user to manipulate a form in the foreground while monitoring action on a background form. However, these aspects of the aesthetics of your application should always serve the ultimate purpose usability.

Lesson Summary

• Interface design is important because a visually consistent and logical interface is easier to learn and more efficient to use.

• Major elements of a user interface include forms, controls, and menus.

• A good user interface pays attention to the following considerations:

  • Simplicity

  • Positioning of Controls

  • Consistency

  • Aesthetics

• Make design decisions that invite the target audience to use your application. Be aware of the cultural significance of your choices, and keep the ideas of consistency and simplicity foremost in your mind when designing your interface.