Click Here to Install Silverlight*
United StatesChange|All Microsoft Sites
MSDN
The Beta Experience

Make your applications look good on Aero


If you have seen or tested Windows Vista builds, no doubt you will have noticed the distinctive "Aero" look. It's creators describe Aero as an acronym for "Authentic, Energetic, Reflective, Open & approachable".

In our role as a developer or software vendor we want to make sure our applications are looking as as the new OS itself. So what is on our to-do list?

Vista supports themes much like Windows XP. Ensure that the Aero themes can be used by our application. Use the new System Font (Segoe UI), designed for readability on today's displays.

Use common controls and common dialogs - you should do this today, anyway.

Use the standard window frame, use glass judiciously. Get a feeling when to use the semi-transparent glass effect, and always remember that at least in the initial phase of Vista's life not every machine will have hardware sufficient to produce the glass effect.

Use icons and graphics consistent with Windows Vista style and quality. Clean up UI. Use Task Dialog for dialog boxes and error messages. Use Aero Wizards.

Reserve time for fit and finish: Make sure all the small details conform to the UI guidelines to make your dialogs looking as good as those provides by the system.

Your graphics artists should be aware of the recommend icon style and qualities. And be sure to provide icon on all the necessary resolutions for those new super-high-resolution displays.

Keep in mind, UX is not only about new controls and fancy effects. Approachable user interface design is about keeping it simple, as the following example by the Vista UX team illustrates:

Lets assume we are responsible for the a dialog in a fictitious malware scanning application. A typical solution created for Windows XP could look like this:

Obviously the "File Edit Tools" menu makes no sense so we drop it.

Is there really a need for displaying the log all the time? Most likely not, so we remove the list of log entries, giving us

a much leaner approach. From an end users point of view, it does not make sense to distinguish between "Cancel" and "Abort Scan", so we merge those two buttons

into a single "Close" button. Are the remaining buttons really necessary and as logical as they should be?

The "Schedule" button has transformed into a link - a familiar metaphor. Same goes for the detail list. Only if we did discover problems and found infected files this should be a link. The button for signature downloads was also changed into a link.

Time to read the text carefully - more technical terms like "Signatures" and "Objects" may alienate users. We replace texts with friendly, "plain" descriptions like "Suspicious files found" instead of "Objects found".

Finally with proper control styles and using the Vista System Font Segoe UI in 9+ pt size and make sure the Dialog can be displayed with ClearType.

The Windows shell team is working hard to apply those principles to all screens and dialog in Windows itself. Make yourself familiar with these concepts and start thinking user-friendly today!


More Resources for Vista UI Design:

Windows Vista User Experience Guidelines: http://msdn.microsoft.com/windowsvista/experience
MSDN User Interface developer center: http://msdn.microsoft.com/ui
Windows Vista Development Forums: http://forums.microsoft.com/msdn
Windows Shell team blog: http://blogs.msdn.com/winux


© 2009 Microsoft Corporation. All rights reserved. Contact Us |Terms of Use |Trademarks |Privacy Statement
Microsoft