Filling in the UX Gaps in Metro Style apps

On Saturday, I gave a presentation at TECHBash about Windows 8 application design and development.  The talk introduces the Metro Design principles and shows how to apply these principles to convert a desktop application into a Metro style app.  Also as part of this presentation, I prepared a Visual Studio template for Grid Applications that improves on the user and developer experience that Microsoft delivered in their Grid application template.  I will have a series of blog posts that goes through the concepts in this presentation in detail at a later date.

If you are familiar with the Visual Studio templates for Metro style apps, you will recognize the following screenshot as the Grid Application template:

This template is fine for giving the correct layout and margins and typographic style for Metro style apps, but it doesn’t really inspire the developer to create engaging experiences.  It’s actually a bit boring and uninspiring.  The template also has some usability issues.  The mouse scroll wheel does not work in the built-in template for the main GridView.  There’s also no semantic zoom even though it would be easy to have this built-in as an option in the template.  Users will come to expect semantic zoom for this style of application since it is part of the Windows 8 touch design language.

So, I offer you a template I call Better Grid Application.  Here’s what it looks like:

It also has semantic zoom:

I’ll have more to say about the template and the design principles that went into it and my presentation in an upcoming blog post series.

In the meantime, the slides and Visual Studio template are here for your use.  To install the template, put the BetterGridApplication.zip file in Libraries\Visual Studio 11\Templates\ProjectTemplates\CSharp\Windows Metro style\1033\ and then restart Visual Studio.  The template should now show up in the Visual C#\Windows Metro style category in the New Project window.  I will also be creating a WinJS version of this template soon.  I will probably set up a repository on CodePlex soon as well so it is easier to get any updates I make to it.

Download presentation slides (.pdf file, 10.8 MB)

Download the Better Grid Application template (.zip file, 81 KB)