Controls

Controls are UI elements that your users interact with on your app's main window area. See visual
examples of controls in Windows-based, desktop apps and get links to guidelines for each control.

Balloons inform users of a non-critical problem or special condition in a control.

Check boxes allow users to make a decision between two or more clearly differing choices.

Command buttons allow users to perform an immediate action.

Command links allow users to make a choice among a set of mutually exclusive, related
choices.

Drop-down lists and combo boxes allow users to make a choice among a list of mutually
exclusive values.
Group boxes allow users to see relationships among a set of related controls.

Links allow users to navigate to another page, window, or Help topic; display a definition;
initiate a command; or choose an option.

List boxes allow users to select from a set of values presented in a list that is always visible.
With a single-selection list box, users select one item from a list of mutually exclusive values.
With a multiple-selection list box, users select zero or more items from a list of values.

List views allow users to view and interact with a collection of data objects, using either
single selection or multiple selection.

Notifications inform users of events that are unrelated to the current user activity.
Progress bars allow users to follow the progress of a lengthy operation.

Progressive disclosure controls allow users to show or hide additional information

including data, options, or commands.

Radio buttons allow users to make a choice among a set of mutually exclusive, related
choices.

Search boxes provide users a way to locate specific objects or text quickly.

Sliders allow users to choose from a continuous range of values.

Spin controls allow users to change incrementally the value within its associated numeric
text box.

Status bars display information about the state of the current window, background tasks, or
other contextual information.
 Tabs present users with related information on separate labeled pages.

Text boxes allow users to display, enter, or edit a text or numeric value.

Tooltips label an unlabeled control.

Infotips describe an object to which the user is pointing.

Tree views allow users to view and interact with a hierarchically arranged collection of
objects, using either single selection or multiple selection.
 

Commands
Commands are actions users can take while using your app. Learn the guidelines for adding
commands to your app's menus, ribbons, and toolbars.
In this section

Topic Description

Menus Menus are hierarchical lists of commands or options available to users in the
current context.

Ribbons Ribbons are the modern way to help users find, understand, and use commands
efficiently and directly—with a minimum number of clicks, with less need to
resort to trial-and-error, and without having to refer to Help.

Toolbar Toolbars are a way to group commands for efficient access.

s

Text
Text includes any text users can see in your app. Review these guidelines on the use of UI text, style,
and tone for your apps.
In this section

Topic Description

User User interface text appears on UI surfaces.

Interface
Text

Style and Tone in writing is the attitude that the writer conveys to the reader. It's not
Tone necessarily what you say, but how you say it. Tone is intended to create a
specific response or emotion in the reader; it creates a personality that can
either engage or repel users.
 
You can also find specific text guidelines in the Text or Labels sections for Controls and Windows.

Messages
Messages are any kind of message users need or want to see as they use your app. Learn how to
present errors, warning, confirmations, and notifications in your app.
In this section

Topic Description

Error An error message alerts users of a problem that has already occurred. By
Messages contrast, a warning message alerts users of a condition that might cause a
problem in the future. Error messages can be presented using modal dialog
boxes, in-place messages, notifications, or balloons.

Warning A warning message is a modal dialog box, in-place message, notification,

Messages or balloon that alerts the user of a condition that might cause a problem in
the future.

Confirmations A confirmation is a modal dialog box that asks if the user wants to proceed
with an action.

Notifications A notification informs users of events that are unrelated to the current user
activity, by briefly displaying a balloon from an icon in the notification
area. The notification could result from a user action or significant system
event, or could offer potentially useful information from Microsoft
Windows or an application.

Interaction
Interaction is the variety of ways users interact with your app, including touch, keyboard, mouse, and
so on. Use these guidelines to create intuitive and distinctive experiences that are optimized for
touch but work consistently across input devices.
Design for a touch-first experience

First and foremost, design your app with the expectation that touch will be the primary input method
of your users. If you use the platform controls, support for touchpad, mouse, and pen/stylus requires
no additional programming, because Windows provides this for free.
However, keep in mind that a UI optimized for touch is not always superior to a traditional UI. Both
provide advantages and disadvantages unique to the technology and application. In the move to a
touch-first UI, it's important to understand the core differences between touch (including touchpad),
pen/stylus, mouse, and keyboard input. Don't take familiar input device properties and behaviors for
granted, as touch in Windows 8 does more than simply emulate that functionality.
As you'll soon discover, touch input requires a different approach to UI design.
Compare touch interaction requirements
This table shows some of the differences between input devices that you should consider when you
design touch-optimized Windows Store apps.
Factor Touch interactions
Precision The contact area of a fingertip
is greater than a single x-y
coordinate, which increases the
chances of unintended
command activations.
The shape of the contact area
changes throughout the
movement.
There is no mouse cursor to
assist with targeting.
Human Fingertip movements are
anatomy imprecise, because a straight-
line motion with one or more
fingers is difficult. This is due
to the curvature of hand joints
and the number of joints
involved in the motion.
Some areas on the touch
surface of a display device can
be difficult to reach due to
finger posture and the user's
grip on the device.
Objects might be obscured by
one or more fingertips or the
user's hand. This is known as
occlusion.
Object Touch uses a two-state model:
state the touch surface of a display
device is either touched (on) or
not (off). There is no hover
state that can trigger additional
Mouse, keyboard, Touchpad
pen/stylus interactions
The mouse and pen/stylus Same as
supply a precise x-y mouse.
coordinate.
Mouse movements and Same as
pen/stylus strokes supply mouse.
precise x-y coordinates.
Keyboard focus is explicit.
The mouse cursor, pen/stylus Same as
cursor, and keyboard focus mouse.
all assist with targeting.
It's easier to perform a Same as
straight-line motion with the mouse.
mouse or pen/stylus because
the hand that controls them
travels a shorter physical
distance than the cursor on
the screen.
The mouse and pen/stylus Finger
can reach any part of the posture and
screen while any control grip can be
should be accessible by the an issue.
keyboard through tab order.
Indirect input devices do not Same as
cause occlusion. mouse.
A mouse, pen/stylus, and Same as
keyboard all expose a three- mouse.
state model: up (off), down
(on), and hover (focus).
Hover lets users explore and
 visual feedback. learn through tooltips
associated with UI elements.
Hover and focus effects can
relay which objects are
interactive and also help with
targeting.

Rich Supports multi-touch: multiple Supports a single input point. Same as

interaction input points (fingertips) on a touch.
touch surface.

Supports direct manipulation No support for direct Same as

of objects through gestures manipulation as mouse, mouse.
such as tapping, dragging, pen/stylus, and keyboard are
sliding, pinching, and rotating. indirect input devices.
 
Note
Indirect input has had the benefit of more than 25 years of refinement. Features such as hover-
triggered tooltips have been designed to solve UI exploration specifically for touchpad, mouse,
pen/stylus, and keyboard input. UI features like this have been re-designed for the rich experience
provided by touch input, without compromising the user experience for these other devices.
We provide some general user interaction guidelines here and cover device-specific guidelines in
these topics.

 Touch
 Mouse
 Pen
 Keyboard
 Accessibility

Visuals for feedback

Appropriate visual feedback during interactions with your app helps users recognize, learn, and
adapt to how their interactions are interpreted by both the app and Windows Visual feedback can
indicate successful interactions, relay system status, improve the sense of control, reduce errors, help
users understand the system and input device, and encourage interaction.
Visual feedback is critical when the user relies on touch input for activities that require accuracy and
precision based on location. Display feedback whenever and wherever touch input is detected, to
help the user understand any custom targeting rules that are defined by your app and its controls.
Optimize for accuracy

Touch input involves the entire contact area of the finger. This contact geometry is used to
determine the most likely target object. Size your controls to ensure a comfortable UI with objects
and controls that are easy and safe to target.
 Size, space, and position your controls to help eliminate finger and hand occlusion, where the UI is
obscured by the user interaction itself.
Position menus, pop-ups, and tooltips above the contact area whenever possible.
Constrain for confidence

Avoid, or minimize, sloppy interactions by using UI constraints.

 Snap points can make it easier to stop at desired locations. Snap points specify logical stops
in your app content. Cognitively, snap points act as a paging mechanism for the user and minimize
fatigue from excessive sliding, swiping, or rotating. With them, you can handle imprecise user input
and ensure a specific subset of content or key information is displayed.
 Directional "rails" that emphasize the axis of motion (vertical or horizontal).

Avoid timed interactions

Interactions should not be distinguished by time. The same interaction should have the same
outcome regardless of the time taken to perform it. Time-based activations introduce mandatory
delays for users and detract from both the immersive nature of direct manipulation and the
perception of system responsiveness.
Timed interactions typically depend on invisible thresholds like time, distance, or speed to determine
what command to perform. Timed interactions have no visual feedback until the system performs the
action and users must reach arbitrary and invisible thresholds to achieve a result. Instant visual
feedback during interactions make users feel more engaged, confident, and in control.
Interactions that directly affect objects and mimic real world interactions are more intuitive,
discoverable, and memorable. They don't rely on obscure or abstract interactions.
Note: An exception to this is where you use specific timed interactions to assist in learning and
exploration (for example, press and hold). Using appropriate descriptions and visual cues has a great
effect on the use of advanced interactions.

Windows
Windows are the main "canvases" or UI surfaces of your desktop app, including the main windows
itself and pop-ups, dialogs, and wizards. Follow these guidelines when deciding which surface to use
and how best to use them.
In this section

Topic Description

Window This article covers default placement of windows when initially displayed
Management on the screen, their stacking order relative to other windows (Z order),
their initial size, and how their display affects input focus.
 Window Frames Most programs should use standard window frames. Immersive
applications can have a full screen mode that hides the window frame.
Consider using glass strategically for a simpler, lighter, more cohesive
look.

Dialog Boxes A dialog box is a secondary window that allows users to perform a
command, asks users a question, or provides users with information or
progress feedback.

Common The Microsoft Windows common dialogs consist of the Open File, Save
Dialogs File, Open Folder, Find and Replace, Print, Page Setup, Font, and Color
dialog boxes.

Wizards Despite that wonderful, whimsical name, wizards are not really a special
form of user interface, and they have only a particular range of utility.

Property Property window is the collective name for the following types of user
Windows interfaces (UIs):

Property sheet: used to view and change properties for an object or

collection of objects in a dialog box.
Property inspector: used to view and change properties for an object
or collection of objects in a pane.
Options dialog box: used to view and change options for an
application.

Visuals
Visuals include the visual elements other than the controls. These guidelines help you make decisions
about layout, fonts, color, icons, and so on in your app.
In this section

Topic Description

Layout Layout is the sizing, spacing, and placement of content within a window or
page. Effective layout is crucial in helping users find what they are looking
for quickly, as well as making the appearance visually appealing. Effective
layout can make the difference between designs that users immediately
understand and those that leave users feeling puzzled and overwhelmed.
 Fonts Users interact with text more than with any other element in Microsoft
Windows. Segoe UI (pronounced "SEE-go") is the Windows system font.
The standard font size has been increased to 9 point.

Color Color is an important visual element of most user interfaces. Beyond pure
aesthetics, color has associated meanings and elicits emotional responses.
To prevent confusion in meaning, color must be used consistently. To
obtain the desired emotional responses, color must be used appropriately.

Icons Icons are pictorial representations of objects, important not only for
aesthetic reasons as part of the visual identity of a program, but also for
utilitarian reasons as shorthand for conveying meaning that users perceive
almost instantaneously. Windows Vista introduces a new style of
iconography that brings a higher level of detail and sophistication to
Windows.

Standard Standard icons are the error, warning, information, and question mark icons
Icons that are part of Windows.

Animations Strategic use of animations and transitions can make your program easier to
and understand, feel smoother, more natural, and of higher quality, and be more
engaging. But the gratuitous use of animations and transitions can make
Transitions
your program distracting and even annoying.

Graphic Graphic elements show relationships, hierarchy, and emphasis visually.

Elements They include backgrounds, banners, glass, aggregators, separators,
shadows, and handles.

Sound Sound is the audio element of the user experience. When used
appropriately, sound can be an effective form of communication that
establishes a non-verbal and even emotional relationship with your users.
Sounds can be used alone or as a supplement to visual UI. For example,
adding a sound effect to a notification increases the likelihood that it will
be noticed, especially if the user isn't looking at the screen when an event
occurs.

Experiences
Experiences are the common experiences and use cases for all apps, like set up, first run, and
printing. Learn about the best practices fro creating these experiences and communicating your app
brand.
In this section

Topic Description

Software Branding is the emotional positioning of a product as perceived by its

Branding customers. Successful branding requires skillful crafting of a product image,
and is not achieved just through product logos and color schemes.

Setup Users don't enjoy installing software, so modern setup experiences need to
be simple, efficient, and problem-free.

First In the ideal first experience, users install your program and use it
Experience productively immediately, without answering a bunch of questions or
learning a bunch of things.

Printing Printing is the user experience on paper. It's easy to overlook, but it is an
important part of the overall user experience.

Windows Environment
The Windows environment is the onscreen work area provided by Windows, analogous to a physical
desktop, and the operating system's core extension points. Learn how to leverage the desktop,
taskbar, notification area, control panels, help, and user account control for your app.
In this section

Topic Description

Desktop The desktop is the user's work area for their programs. It's not a way to
promote awareness of your program or its brand. Don't abuse it!

Taskbar The taskbar is the access point for programs displayed on the desktop.
With the new Windows 7 taskbar features, users can give commands,
access resources, and view program status directly from the taskbar.

Notification The notification area provides notifications and status. Well-designed

Area programs use the notification area appropriately, without being annoying
or distracting.
Control Panels Use control panel items to help users configure system-level features and
perform related tasks. Programs that have a user interface should be
configured directly from their UI instead.

Help Use Help as a secondary mechanism to help users complete and better
understand tasks—the primary mechanism being the UI itself. Apply these
guidelines to make the content truly helpful and easy to find.

User Account A well-designed User Account Control experience helps prevent unwanted
Control system-wide changes in a way that is predictable and requires minimal
effort.