Three Point Checklist For a Great Windows 8 Metro App

Over the past few months I’ve spoken with a variety of customers about Windows 8 and worked with them to shape their app strategy. It’s a process that begins by first defining their business requirements, then identifying the features that support those requirements, and finally mapping those requirements to a Windows 8 app.

Take for example a company that wants to build an app to search for jobs. The app should allow a user to search for a job and be notified of new jobs. Those requirements would, at a minimum, get mapped to using the search charm, geolocation, and live tiles + notifications.

After we have a rough scope of the app, the next question the customer usually asks is “what makes a great metro app?”. The answer to this question is littered throughout the documentation on the Windows 8 Dev Center and I strongly urge you to read, and then re-read, everything you can. However, customers are always busy so they just don’t have the time to RTFM Winking smile.

This is my three point checklist that I share with customers to help guide them on what I think makes a great Windows 8 metro app from design to interaction to consumption.

Clean & Clear

Clean and clear should be the mantra every designer chants when building their wireframes and visuals. Metro apps are about a compelling user experience — that  can only be achieved when the app is clean and clear. The app should have a clean layout with little to no distractions so the user knows exactly what to expect and what’s expected of them. Utilize whitespace to frame content and use the App Bar to reduce clutter. The app should also be clear about what’s important and what’s not. The user should be able to easily follow the information hierarchy to get to the content they want. Follow the metro design principle of using subtle changes in typography (i.e. size, weight and color) to establish structure and importance.

Touch Friendly

Windows 8 is touch first (but it still works great with mouse and keyboard) and defines a brand new touch language that  permeates through all metro apps making them feel consistent and familiar. Apps should use the built-in controls where possible but when it’s not they should be designed for fingers, which are bigger than mice. The rule of thumb is to stay above a hit target of 7x7mm for most actions, and use a larger target of 9x9mm for actions that have severe consequences like deleting. Larger hit targets with at least 10px padding between targets helps the user avoid accidental taps due to fat fingers.

Optimize View

Windows 8 apps will be viewed in a variety of different ways. It will depend on the orientation/grip, the device (i.e. tablet, desktop, TV), the resolution and the user (i.e. snapped view). It’s a lot to think about but don’t worry because the platform also makes it easy for you. My guidance here is to optimize the app’s design based on the natural grip the app lends itself to, always provide 3 sets of assets to scale, and create a simple but functional snap view that keeps the user engaged by retaining context.

 

Next Steps…

For more details on each of these check points head over to the Dev Center and check out the design guidelines.

Both comments and pings are currently closed.

Comments are closed.