User Interface Technologies

This topic provides a brief survey of the Microsoft technologies for developing UIs for Windows-based applications. It provides the information required to help you determine whether to use a particular technology, and identifies where you can find more information about it.

This topic describes the following technologies:

User Interface Technologies for Unmanaged Applications

This section describes the Microsoft technologies for developing UIs for unmanaged Windows applications. These technologies are intended for experienced C/C++ developers who are familiar with WindowsAPI programming concepts, and who are using the Microsoft Windows Software Development Kit (SDK). Some technologies have additional prerequisites such as knowledge of graphics programming issues or familiarity with the basics of Component Object Model (COM) programming.

Windows Controls

Windows controls are user interface elements that are used in conjunction with another window (typically a client window or dialog box) to enable the user to interact with an application. Many of the elements that make up the UI of a traditional Windows-based application are Windows controls, including items such as menus, scroll bars, buttons, list boxes, tree views, and so on.

Windows controls are supported by all versions of Windows. However, because the run-time components that support the controls have evolved over time, some controls and features introduced in later versions are not supported in earlier versions. Applications need to detect the versions and use only the available features.

You should use Windows controls if you want to create a traditional UI for an unmanaged Windows-based application that runs on a wide range of Windows versions.

For more information, see Windows Controls.

Visual Styles

Visual Styles are specifications for the appearance of controls. For example, a Visual Style can define the overall appearance of controls, and enable software developers to configure the visual interface of those controls to coordinate with an application’s appearance. Additionally, Visual Styles provide a mechanism for all Windows-based applications to standardize an application’s appearance.

Visual styles are supported on WindowsВ XP and later, and they only affect the appearance of the standard Windows controls and the Microsoft Win32 common controls.

You should use Visual Styles if you need to change the appearance of the standard Windows controls and common controls to match the look of your application UI.

For more information, see Visual Styles.

Windows Ribbon Framework

The Windows Ribbon framework is a rich command presentation system for Windows-based applications. It consists of a ribbon command bar that exposes the major features of an application through a series of tabs at the top of an application window, and a context menu system. The Windows Ribbon framework is supported on the following Windows versions:

• WindowsВ Vista with Service PackВ 2 (SP2) and Platform Update for WindowsВ Vista
• WindowsВ 7 and later
• Windows ServerВ 2008В R2
• Windows ServerВ 2008 with Service PackВ 2 (SP2) and Platform Update for Windows ServerВ 2008

You should use Windows Ribbon framework if you want to implement a command UI that is an alternative to the layered menus, toolbars, and task panes of traditional Windows applications.

The Windows Ribbon framework is intended for developers who are proficient in COM programming.

Windows Animation Manager

The Windows Animation Manager supports the animation of UI elements by providing a powerful animation engine and a standardized programmatic interface. The platform simplifies the development and maintenance of UI animation sequences and enables developers to implement UI animations that are consistent and intuitive. Windows Animation can be used with any graphics platform including Direct2D, Microsoft Direct3D, or Windows GDI+.

The Windows animation framework is supported on Windows Vista with Platform Update for Windows VistaWindowsВ Vista with SP2 and Platform Update for WindowsВ Vista, and WindowsВ 7 and later.

You should use Windows Animation Manager if you want to add animation sequences to the UI of an unmanaged Windows-based application.

Desktop Window Manager

Desktop Window Manager (DWM) is a Windows run-time component that supports desktop composition, a feature introduced in WindowsВ Vista. Through desktop composition, DWM enables visual effects in the UI, such as glass window frames, 3-D window transition animations, Windows Flip and Windows Flip3D, and high resolution support.

DWM exposes an API for controlling many of the visual effects associated with desktop composition. For example, an application can display thumbnails, apply a translucent and blurred effect to the client area of top-level windows, control the transparency and transition effects used in the non-client region of windows, and so on.

DWM is supported on WindowsВ Vista and Windows ServerВ 2008.

You should use DWM if your application needs to access and control the visual effects associated with desktop composition.

Windows Automation API

The Windows Automation API helps developers create applications that are accessible to the widest possible audience, including people with vision, hearing, or motion disabilities. The API works by exposing information about the elements that make up an application user interface. Assistive technology applications such as screen readers can use the information to present the UI in a way that can be used by people with disabilities.

The Windows Automation API consists of two separate API frameworks, Microsoft Active Accessibility and Microsoft UI Automation. Microsoft Active Accessibility is a legacy API that was introduced in WindowsВ 95 as a platform add-in. UI Automation is the successor to Microsoft Active Accessibility, and is a Windows implementation of the UI Automation specification.

Full support for Microsoft Active Accessibility is built into WindowsВ XP and Windows ServerВ 2003. Microsoft Active Accessibility is also supported on WindowsВ NTВ 4.0 with Service PackВ 6 (SP6) and later, and WindowsВ 98. UI Automation is supported on the following operating systems: WindowsВ XP, Windows ServerВ 2003, Windows ServerВ 2003В R2, WindowsВ Vista, WindowsВ 7, Windows ServerВ 2008, and Windows ServerВ 2008В R2.

If your application contains custom controls or other custom UI features, you should use the Windows Automation API to ensure that the custom controls and features are fully accessible. In general, developers need a moderate level of understanding about COM objects and interfaces, Unicode, and Windows API programming.

Speech API

The Microsoft Speech API (SAPI) provides a high-level interface between an application and speech engines. SAPI implements all the low-level details needed to control and manage the real-time operations of various speech engines.

The two basic types of SAPI engines are text-to-speech (TTS) systems and speech recognizers. TTS systems synthesize text strings and files into spoken audio using synthetic voices. Speech recognizers convert human spoken audio into readable text strings and files.

You should use SAPI if you want to implement a UI that enables the user to interact with your application through TTS and speech recognition in addition to the standard input devices such as the keyboard, mouse, and display.

Magnification API

The magnification API (MAPI) is used to magnify portions of the screen, and to apply color effects and other transforms. This API is primarily intended for assistive-technology applications that enlarge parts of the screen to make them easier to see.

MAPI is supported on WindowsВ Vista, WindowsВ 7, Windows ServerВ 2008, and Windows ServerВ 2008В R2. It is intended for developers who are familiar with graphics programming concepts.

For more information, see Magnification API.

Resource Compiler

The Microsoft Windows Resource Compiler is an application development tool used to add UI and other resources to a Windows-based application. A resource is any non-executable data used by an application, and includes such things as dialog boxes, menus, strings, cursors, icons, bitmaps, and so on. The resource compiler is included in Microsoft Visual Studio and the Windows SDK.

For more information, see Resource Compiler.

User Interface Technologies for Managed Applications

This section describes the Microsoft technologies for developing UIs for managed Windows applications that run in the context of the .NET Framework. For more information, see .NET Development.

Windows Forms

Windows Forms is a graphical application programming interface for creating managed Windows applications that are based on the .NET Framework. In Windows Forms, a form is a visual surface on which you display information to the user, and through which you receive input from the user.

You build Windows Forms applications by adding controls to forms and developing responses to user actions, such as mouse clicks or key presses. A control is a discrete UI element that displays data or accepts data input. Windows Forms contains a variety of controls that you can add to forms: controls that display text boxes, buttons, drop-down boxes, radio buttons, and even Web pages. Windows Forms also supports creating custom controls.

For more information, see Windows Forms.

Windows Presentation Foundation

Windows Presentation Foundation (WPF) is the successor to Windows Forms. WPF is a presentation system for building and rendering user interfaces in Windows-based client applications and browser-hosted applications. The core of WPF is a resolution-independent and vector-based rendering engine that is built to take advantage of modern graphics hardware. WPF extends the core with a comprehensive set of application-development features that include Extensible Application Markup Language (XAML), controls, data binding, layout, 2-D and 3-D graphics, animation, styles, templates, documents, media, text, and typography.

WPF is included in the .NET Framework, so you can build applications that incorporate other elements of the .NET Framework class library. WPF is supported on WindowsВ Vista, WindowsВ 7, Windows ServerВ 2008, Windows ServerВ 2008В R2, and is also available for WindowsВ XP with Service PackВ 2 (SP2), and Windows ServerВ 2003.

Silverlight

Microsoft Silverlight is a powerful development platform for creating rich media applications and business applications for the Web, desktop, and mobile devices.

Based on the .NET Framework, the free Silverlight plug-in works across multiple browsers, devices, and operating systems to bring new interactivity to the Web. With extensive layout and styling options, powerful communication protocols, robust data access, and support for user interaction and high-definition media, Silverlight helps create fast, smooth, and visually rich customer experiences. Silverlight applications can be developed quickly with the Microsoft Web Platform, Visual Studio, and Expression Studio.

Expression Blend 3 + SketchFlow

Expression Blend 3 + SketchFlow is a visual tool for designing, prototyping, and creating sophisticated user interfaces for WPF and Silverlight desktop and web applications. You build an application by drawing shapes, drawing controls such as buttons and list boxes, making the pieces of your application respond to mouse clicks and other user input, and styling everything to look uniquely your own.

UI Automation for Managed Applications

UI Automation is an accessibility framework for Windows, available on all operating systems that support WPF.

UI Automation provides programmatic access to most UI elements on the desktop, enabling assistive technology products such as screen readers to provide information about the UI to end users and to manipulate the UI by means other than standard input. UI Automation also allows automated test scripts to interact with the UI.

Designing a User Interface

This section describes in detail some of the tasks associated with designing a UI for a Windows application.

Introduction

UI design can be divided into three essential elements : functionality, aesthetics, and performance.

More often than not, the primary focus during application development is functionality. Is the application usable? Does it enable users to complete tasks? However, functionality is only a part of the story.

Aesthetics describe how things are shown and presented, the style in which things are communicated to the user. Aesthetics are very subjective and much more difficult to quantify than functional requirements and performance metrics. Aesthetics typically come down to simple choices—how colors complement each other or how UI elements convey their meaning—that often affect the way a person feels about something and influence how successful they are using it.

Performance is measured by not only speed, but also reliability. If an application looks and feels great, is easy to use, but crashes repeatedly, it likely won’t be very successful. The application has to provide a user with full confidence in its reliability.

The following are some design phase tasks that can contribute to a successful UI for a Windows application.

Functional Requirements

Consider the following suggestions early in the design phase to optimize the user experience across the broadest audience possible:

Follow UI design guidelines.

Become familiar with the Windows User Experience Interaction Guidelines and refer to them often as the design, implementation, and testing of the application UI progresses.

Ensure that the UI is accessible.

Be sure to integrate accessibility into the UI design from the beginning of the product lifecycle. Retrofitting accessibility can be extremely costly because part of accessibility development requires attention at the architectural level. For more information, download the Engineering Software for Accessibility eBook.

Support the international marketplace.

Windows includes technologies that enable support for many cultures and written languages in a Windows application. If the application is targeting the international marketplace, it is important to include internationalization support in the UI design from the beginning of the project. For more information, see Internationalization for Windows Applications.

User Analysis

A critical step in designing a successful interface is attaining a basic understanding of what users need and want from an application before writing any code. Remember, potential users of an application are already doing their job in some way and existing tools and processes should be understood as fully as possible. Do not design without fully considering these issues.

The simplest and most informal approach is talking to the intended users of the product. Get information directly from the source–avoid using managers or executives as proxies for actual consumers. Consider having small groups of developers and program managers pay informal visits to users in their workplaces where there is an opportunity to discuss how they work and gather details of the issues they face with their current tools.

Remember, do not to ask leading or biased questions as this will directly affect the quality and validity of the user feedback. Keep the following in mind when composing questions during this phase:

• Who are our users? What skills and knowledge do they have?
• What different sources of data can we use to understand their experience?
• What goals and tasks will they use our product to complete?
• What assumptions are we making and how can we verify them?
• What sources of data do we have? (Usability studies and heuristic evaluations are good places to start.)

Problem Statements

Once all user feedback has been collected, analyze and distill it into related issues and requirements. Try to avoid thinking about solutions at this point. Make sure the problems are fully identified, not just the symptoms.

It is often helpful to compose a list of one sentence problem statements (from the users perspective) for each issue or requirement. For example, «Resize edit box width to 15 characters» is not a problem. But «It is too difficult to type in long search terms» is a valid problem statement. The difference is dramatic. Try not to define the solution and the problem at the same time: often the real problem is lost. In this example, there may be many other ways to solve the problem of search terms, including changing the size of the edit box. Always keep alternative solutions in mind.

The following are additional examples of problem statements:

• It is difficult to navigate from one section of the Web site to another.
• Users have to wait too long for the software to load.
• Our security error messages are difficult to understand.
• The registration page has too many questions, and users often abandon it.
• Finding a specific product on the site index is too hard to complete.

If the problem statements are broad enough, there are likely to be many innovative and creative ways to solve them.

Priorities

The act of taking a list of items, and ranking them by priority, defines a release. Without clear priorities, teams may fight and argue over what things should be done and what things should be cut. The work involved in setting priorities should be easier with the research complete, but it’s always a challenge.

Setting priorities requires the ability to evaluate on at least three criteria: schedule, team, and business. There may be a predefined schedule set for the project, which limits the size and scale of the work that can be done. A problem that is likely to require rewriting half the code-base should not be attempted during a small release cycle.

The makeup and nature of a team defines what kinds of work can be done. What other commitments does the team have? Is there a designer or usability engineer on the team? What skills with Web or UI design does the team have? Last, and most important, are business considerations. What are the revenue goals for this project? Who are the competitors? What are the advantages of solving certain problems? What partnerships can be forged? Any other considerations should also be identified before prioritizing the list.

Once prioritized, the list of problem statements sets the direction for the product and ensures that development is targeted in the right areas.

Conceptual Design

Typically, the UI is not addressed in the conceptual design phase. However, this phase does require a thorough business model with complete user profiles and usage scenarios which are imperative for a successful user experience.

Logical Design

The logical design phase is when the initial prototypes that support the conceptual design are developed.

The specific hardware and software technologies to be used during development are also identified in this phase, which can determine the capabilities of the UI in the final product. For more information, see User Interface Technologies.

In addition to the development tools, the various hardware requirements and form factors that are to be targeted by the application should be identified.

Physical Design

The physical design phase determines how a UI design is to be implemented for the specific hardware and form factors that were identified in the logical design.

It is during this phase that hardware or form factor limitations might introduce unexpected constraints on the UI that require significant refinements to the design.