I had the privilege of speaking at the Philly .NET Code Camp 2012.1 at Penn State Abington this past Saturday. My talk was titled Filling in the UX Gaps in Metro Style Apps, which should sound familiar since that was the title of my TechBASH presentation. However, I’ve modified the presentation quite a bit since then so the new title for it is Metro Design Fundamentals. The modifications I made were mostly related to beefing up the section on design inspirations and spending a bit more time talking about just how important design is to Metro style apps. Your app isn’t going to make it into the store without taking UX and design into account. This stuff’s important!
Thanks again to the folks at Philly .NET for allowing me to speak at this great event. I had a blast!
You can download the slides here: Metro Design Fundamentals (PDF, 18MB)
When I posted the “Better Grid Application” template for Metro style app development in XAML, I posted the wrong file. It was an older version of the template. Sorry about that. I have updated the file in the original post but here is the link again:
Better Grid Application template (.zip file, 7 MB)
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 for this somewhere soon as well so it is easier to get any updates I make to it.
Update: I originally uploaded an older version of the template. I have uploaded the correct version now. Sorry about that!
Download presentation slides (.pdf file, 10.8 MB) Download the Better Grid Application template (.zip file, 7 MB)