The Basics of Form Design

Designing the appropriate user interface for a Windows application is still part art and part science. In the Windows Forms world, a user interface is a collection of images, controls, and window elements that all work in synergy. Users absorb information through the UI and also use it as the primary vehicle for interacting with the application.

The task in front of any developer when creating a user interface is primarily one of balance: balancing simplicity of design with the features that the application is required to implement. Also thrown in the mix is the concept of standards, both formal and experiential.

Note

Although we use the term developer in this chapter, much of the UI design and layout process is actually squarely in the camp of the designer. Although many development teams don't have the luxury of employing a full-time UI designer (developers handle this area on many teams), this is rapidly becoming a key competitive differentiator as software development firms look to distinguish their applications and rise above their competitors at the "look and feel" level.

Considering the End User

You simply can't start the design process unless you understand how the application will be used and who its intended audience is. Even applications that contain similar feature sets might need to provide significantly different user experiences. An application designed to store medical information might have the same data points and functions but would likely have a different persona if it was designed for the average consumer as opposed to a physician or registered nurse.

Use cases and actual usability labs are both great tools for understanding user expectations, and they provide great data points for preserving that function versus simplicity of design balance.

Location and Culture

Location and culture figure into the equation as well. The typical form application used in the United States would cater to this culture's expectations by anticipating left-to-right, top-to-bottom reading habits. In this environment, the most important elements of the UI are typically placed in the most prominent position: top and left in the form. Other cultures would require this strategy to change based on right-to-left and even bottom-to-top reading traits.

Most controls in Visual Studio 2005 directly support right-to-left languages through a RightToLeft property. By setting this property to an appropriate RightToLeft enum value, you can indicate whether the control's text should appear left to right, right to left, or should be based on the setting carried on the parent control. Even the Form class supports this property.

In addition to the RightToLeft property, certain controls also expose a RightToLeftLayout property. Setting this Boolean property will actually affect overall layout within the control. As an example, setting RightToLeftLayout to true for a Form instance will cause the form to mirror its content.

Tip

Search for "Best Practices for Developing World-Ready Applications" in MSDN for more detailed information on how to design an application for an international audience.

In addition, simple things such as the space allocated for a given control are impacted by language targets. A string presented in U.S. English might require drastically more space when translated into Farsi. Again, many controls support properties designed to overcome this design issue; setting the AutoSize property on a control to true will automatically extend the client area of the control based on its contained text.

Understanding the Role of UI Standards

Applications must also strive to adhere to any relevant standards associated with their look and feel. Some standards are documented for you by the platform "owner." Microsoft, for example, has a set of UI design guidelines documented within MSDN. The book Microsoft Windows User Experience, published by MSPress, is included in its entirety within MSDN. By tackling topics such as Data-Centered Design, Input Basics, and Design of Graphic Images, this book provides a structured baseline of UI design collateral for Windows application developers.

Design guidelines and UI standards are often specific to a given platform. The current look and feel expected from a Windows application trace primarily back to the "new" design that debuted with Windows 95. Windows XP further refined those expectations. Now, Windows Vistathe next generation operating system from Microsoftwill feature an entirely new set of user experience guidelines.

Tip

For a peek at the future of UI, take a look at the Windows Vista Developer Center: http://msdn.microsoft.com/windowsvista/experience/. This page includes a summary of the Windows Vista experience and also includes a link to the revised UX guidelines.

Visual Studio 2005 surfaces some of these design guidelines and standards to make it easy to develop conforming interfaces. For instance, default button heights match the recommended standard, and Visual Studio assists developers with standard control positioning relative to neighboring controls by displaying snaplines as you move controls on the form surface. We cover this topic more fully later in this chapter.

De Facto Standards

Sometimes the influence of a particular application or suite of applications is felt heavily in the UI design realm. One example here is Microsoft Outlook. There are various applications now in the wild that mimic, for instance, the structure and layout of Microsoft Outlook even though they are not, per se, email applications. The Microsoft Outlook designers struck a vein of usability when they designed its primary form, and now other companies and developers have leveraged those themes in their own applications. A similar comment can be made about the visual appearance of toolbars made popular with Microsoft Office 2003.

Although there are limits, Visual Studio enables developers to achieve the same high-fidelity UIs used in Microsoft Office and other popular applications. In fact, if you look at the official Windows Forms website, you'll see demo applications written with VS2005, showcasing how you can develop replicas of the Microsoft Outlook, Quicken, or even Microsoft Money facades (visit the "Samples" page at http://www.windowsforms.net).

Planning the User Interface

Before you embark on the design process in Visual Studio, it is probably a decent idea to first draft a mockup of the form's general landscape. This can be a simple pen and paper sketch; what we are looking for is a simple, rough blueprint for the application.

As a sample scenario, consider a Windows Forms application written for Contoso customer service representatives. The application needs to expose a hierarchical list of orders placed with Contoso, and it should allow the reps to search on orders and edit data.

Preliminary Design

A few basic components have been established as de facto standards for a Windows form: Menus, toolbars, and status bars are all standard fare and can certainly be leveraged within this fictional order application.

Beyond those staples, you know that you need to list orders on the screen and also provide for a region that will show order details. By borrowing liberally from an existing layout theme a la Microsoft Outlook, you might arrive at a tentative form layout plan like the one shown in Figure 14.1.

Figure 14.1. Initial layout plan.

It is important to pay some attention to the concept of resizing: How will the form's constituent controls respond relative to one another when a user resizes the form? What if a control element is resized because of a language change or a change in the underlying data? By fleshing out some of the resizing design intent now, you can save a mountain of work later. The prototype sketch in Figure 14.1 includes some simple text to remind you how to accommodate the different form regions during resizing.