You’re at a chic coffee shop or on a plane. Just like everyone around you, you have a tablet. Watch a movie, play a game, do the social stuff. And then while everyone starts getting bored, you flip part of your tablet and out comes a thin keyboard. May be you are also carrying your Arch Touch mouse .. your thin tablet is now transformed into a decent dev machine that’ll happily run Visual Studio for hours on battery. Non-developers get to use the desktop mode on Intel slates, thus bringing over all the productivity applications from a Windows 7 PC. All the while, the ‘Metro’ side of things stays very touch-friendly and superbly delightful for content consumption.
That, is one of the promises of Windows 8 - the next iteration of the most popular computer OS. Be excited, as this is the biggest & boldest change in Windows since 95 and there is a lot in it for developers. If you are a .NET developer, the programming paradigms in Windows 8 Metro apps should be very interesting, with fragments of it boiling over to other .NET development. XAML devs should feel right at home, as should web folks with strong HTML/JS/CSS skills. Metro apps are fun to write, in my opinion, and there is a huge potential to make a name for yourself when the Windows Store opens with Windows 8.
I have had the superb pleasure of working on several Windows 8 Enterprise LOB Metro apps for proof-of-concept, along with some very talented internal developers/designers. Unfortunately, that also means NDA and not being able to talk about stuff yet. But what I can do is share some coding experiences, since there is a decent learning curve. I will try to keep the articles short for readability & jump into what you need to make your first Windows 8 Metro app.
So, starting today is an article series on common tips & tricks towards developing real-world Windows 8 Metro apps. Over the next several weeks, you’ll see 8 articles talk about some must-do things for Windows 8 Metro app developers. Simple, to the point, with some code examples on XAML/C# stack. This post will serve as the indexed home of the series … this is what’s cooking:
Day 1: Know the ecosystem; Start
Day 2: Layout, Navigation & Visual States
Day 3: Semantic Zoom
Day 4: Controls & Styling
Day 5: Search, Share & Settings Contracts
Day 6: Data Persistence & Application Life-Cycle Management
Day 7: Use of OData or Web Services
Day 8: Live Services integration
Day 1: Know the ecosystem; Start
Now, before we sit down to write our Windows 8 Metro application, I think it is important to understand the ecosystem and make sure you are onboard personally. Question assumptions & understand why we are being asked to do something some way. Here are few pointers I find useful:
- By end of 2012, your phone, PC & Xbox-connected TV start looking very identical and you move seamlessly between the three. This is the new ‘Metro’ ecosystem and it is very conscious rebranding across MSFT products. Let us make an honest effort to understand Metro as a design language and think UX first.
- Release Preview being the latest public Windows 8 build, learn everything about the OS & UX starting HERE.
- Now, we developers obviously want to start writing apps for Windows 8. A new genre of delightful, performant & touch-optimized applications for various form factors. Bookmark the Metro Dev Center – devour all the content; lot of good stuff to learn from the documentation.
- For the first time in the history of Windows, the OS completely steps aside & let’s our Metro apps shine, edge-to-edge. This is awesome, but with power comes responsibility. It is easy (specially with the VS templates) to start making an app that looks Metro; it is rather difficult to nail the UX that Metro demands.
- Learn what makes a great Metro app HERE. As in Windows Phone, and probably more important with the bigger form factor – let’s sweat the details. Little UX tweaks have a big impact on how the user perceives a Metro app.
- The complete UX Guidelines for Metro apps can be found HERE – read well my friends.
- Let’s focus on content over chrome & information hierarchy through typographical ramp. Users will explore the app if we can delight with content.
- Remember ‘Win as One’ as a Metro design principle? While no one is forcing you, it really helps the end user if our Metro apps follow the same UX, implement the same touch gestures and integrate with the rest of the Windows 8 OS. To understand little tricks in Windows 8, start with these wonderful posts by my buddy & SilverlightShow author Michael Crump on ‘10 Things You Didn’t know about Windows 8’ HERE & HERE.
- Understanding Layout options and making the appropriate use of controls in a given context is critical. Wonderful set of UI Layout guidelines HERE.
- Utilize the App Bar (guidelines HERE) for commands, but essential navigation pieces need to be on the canvas.
Supporting multiple View States (Snapped, Full, Filled) & the Charms is not optional; but a must-do. Let us not recreate any of the Charms in our apps.
- Tiles – They are the face of your application. So, invest in making an awesome Tile, which keeps inviting the user back into your application. If at all possible, consider supporting Live Tile or Toast notifications from an outside service for a very engaging user experience. Guidelines for Tiles & Toasts can be found HERE & HERE respectively.
- Motion was another Metro design principle. Subtle animations energize the usage of our apps – so let’s add animations when appropriate to our frames/pages/controls or when using Transient UI elements. Again start HERE. Absolutely use the built-in Animations Library.
- Touch is not an after-thought in Windows 8. It is what we start out supporting in Metro apps – let’s understand all the different ways the OS does it & try to integrate/extend. Wonderful Touch interaction design principles can be found HERE. Semantic Zooming support is highly recommended if presenting a lot of list-based content and if you do not want the user to be lost – guidelines HERE.
- Last, but not least, is being Fast & Fluid – something we have imbibed from Windows Phone development. Windows 8 Metro apps are touch-optimized and demand direct fluid user interaction. Absolutely nothing can hold back the UI thread; in fact, .NET 4.5 for Metro apps is going to make it hard to write synchronous code. Spend the time to truly understand the new Async-Await pattern of asynchrony in .NET, starting HERE. Usable everywhere in making Metro apps, but also portable to other forms of programming.
Conclusion
That’s it for today. The crux of this post is to provide pointers to a lot or resources so that we developers know where to start & what to keep in mind. There is definitely much to grasp; so my mantra is to SLOW DOWN and do the right things.
See you next time as we dive into some real-world Windows 8 Metro app development principles. Thanks for reading!
About Author
Samidip Basu (@samidip) is a technologist, gadget-lover and MSFT Mobility Solutions Lead for Sogeti USA working out of Columbus OH. With a strong developer background in Microsoft technology stack, he now spends much of his time in spreading the word to discover the full potential of Windows Phone/Windows 8 platforms & cloud-supported mobile solutions in general. He passionately helps run the Metro Developer User Group (http://themetrodeveloperusergroup.com/), labors in M3 Conf (http://m3conf.com/) organization and can be found with at-least a couple of hobbyist projects at any time. His spare times call for travel and culinary adventures with the wife. Find out more at http://samidipbasu.com.