User Interface Blog

Microsoft tries to encourage developers to create a high quality, consistent Windows Vista user interface UI. Therefore Microsoft published the Windows Vista User Experience Guidelines. The goals for the officials Microsoft® Windows Vista™ User Experience Guidelines (or “UX Guide”) are to:

• Establish a high quality and consistency baseline for all Windows Vista-based applications.
• Answer your specific user experience questions.
• Make your job easier!

The following sections describe the top interface rules of the UX Guide:

1. Use the Aero Theme and System Font (Segoe UI)

You should use the Windows themes and the standard System Font Segeo UI. Microsoft Typography has developed the font by using the advantages of Cleartype for making it more readable.

Microsoft uses this new font in Vista with 8pt and Office 12 with 9pt per default. The following screenshot display a comparison between Segeo UI and Tahoma fonts.

Click to view the image in full size.

2. Use common controls and common dialogs

You should use the common controls and common dialogs to achieve an accessible, high-quality and consistent UI in your application. The following screenshot displays the Open file, Save As and some standard buttons.

3. Use the standard window frame, use glass judiciously

Use the standard window frame. The new “Aero Glass”, as seen in Vista translucent window frames, is an important part of the new aesthetic.

Optimize for resizable windows using a standard screen resolution of 1024 x 768 pixels, but also support 800×600 pixels.

4. Use icons and graphics consistent with the Windows Vista style and quality

Render icons in all sizes needed but optimize their design for the sizes most often seen by users. For example, Explorer can display icons up to 256 x 256 pixels, but toolbar icons are limited to 24 x 24 pixels.

5. Use task dialogs for new or frequently used dialog boxes and error messages

Dialog boxes are the most fundamental form of user communication. Dialog boxes with a clear main instruction and explicit, self-explanatory commit buttons make that communication much more effective.

6. Use Aero Wizards

Aero Wizards replaces Wizard ’97 with a cleaner, simpler, better-looking design with theme support. Its page layout is much more flexible and can be resizable

7. Use Explorer-hosted, navigation-based user interfaces, provide a Back button

Navigation-based user interface—characterized by staying in a single window and having a Back button in the upper-left corner—allows users to navigate easily, efficiently, and confidently; they can always ‘go back’. Even traditional applications that don’t inherently ‘navigate’ can often benefit from providing in-frame navigation.

8. Use the standard Windows Search

With the Search feature, users can quickly locate specific objects or text within a large set of data by filtering or highlighting matches. In Windows Vista, Search is part of all Explorer windows and appears and behaves consistently, making it easy to find and recognize.

9. Use the Windows Vista tone in all UI text

Use the Windows Vista “tone” to inspire confidence by communicating to users on a personal level by being accurate, encouraging, insightful, objective, and user focused. Don’t use a distracting, condescending (for example, “Just do this…”), or arrogant tone.

10. Clean up the user interface

Remove clutter, unify surfaces visually, and make the UI look well organized and thought through.

11. Use notifications judiciously

When used correctly, notifications are an effective way to keep users informed. Notifications are ideal for useful, relevant, non-critical information because their peripheral, non-modal presentation doesn’t break users’ flow.

12. Reserve development time for “fit and finish”!

To deliver high-quality fit and finish, build in time to attend to UI details. Scheduling time for a visual clean-up at pixel level, layout corrections (alignment, spacing), and other visual “fit and finish” is as important as it is to schedule time for bug fixing and other types of quality control.