(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465400.aspx & http://msdn.microsoft.com/en-us/library/windows/apps/hh465362.aspx

While Windows 8 provides developers with the opportunity to distribute their apps to millions of users around the world, it also presents challenges when it comes to making it great looking apps. The primary challenge has to do with the fact that Windows 8 will run on a wide variety of form factors. I harken back to the days of Windows Mobile (not Windows Phone) development where, more often than not, developers would need to create a UI for each device their apps would target. Not an ideal scenario. Will developers need to do the same for Windows 8 Metro style apps? Not necessarily. After all, Windows 8 offers built-in scaling out of the box to ensure that apps and content look great. To ensure apps look great when scaled, developers just need to make sure they use a fluid layout and scalable graphics.

Below is a list of what to do and not to  do when it comes to scaling on Windows 8:

For details about about each of these, visit the MSDN source links.

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465400.aspx & http://msdn.microsoft.com/en-us/library/windows/apps/hh465362.aspx

Just a quick note, I’ll be taking a break from the Metro Pass series for the next couple of weeks as I have a number of other topics I’d like to cover.

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/desktop/hh848075(v=vs.85).aspx & http://msdn.microsoft.com/en-us/library/windows/apps/hh465410.aspx

In order for you Windows 8 Metro style app to be published to the Windows Store it must pass Microsoft’s testing process. Fortunately, for you, you can run your apps through a number of Microsoft’s tests by simply using the Windows App Certification Kit (ACK). The ACK is used to validate compliance with certification requirements, and replaces the Windows Software Logo Kit (WSLK) used for validation in the Windows 7 Software Logo program. Desktop, desktop device, and Metro style apps can be certified. The Windows ACK is included in the Windows Software Development Kit (SDK) and the Windows SDK for Metro style apps.

The ACK tests your Metro style applications in the following categories:

App failures

The app must not crash or hang. App failures, such as crashes and hangs, disrupt and frustrate customers. Eliminating such failures improves app stability and reliability, and overall, provides customers with a better experience.

App manifest

The app manifest must contain all the required attributes.

Windows security features

The app must use Windows security features.

Supported platform APIs

The app must use only APIs from the Windows Software Development Kit (SDK) for Metro style Apps.

Startup performance

The app should have a fast and responsive startup experience while consuming a reasonable amount of system resources (CPU, file IO, memory, and so on) to enable fast switching and multitasking between previously unopened apps.

Suspend performance

The app should have a fast and responsive suspend experience while consuming a reasonable amount of system resources (CPU, File IO, Memory, and so on) and making sure that resources are released efficiently.

App package resource validation

The app manifest must have valid resources defined in the resources.pri file, as explained in the App package manifest schema.

.NET version check

The app must use .NET 4.5 or later.

To be clear, desktop (non-Metro style) apps do not have to be certified to run on Windows 8. However, desktop apps, like Metro apps, must be certified in order to be listed in the Windows Store.

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/desktop/hh848075(v=vs.85).aspx & http://msdn.microsoft.com/en-us/library/windows/apps/hh465410.aspx

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427.aspx & http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx

I can’t stress enough the importance of prototype and validating your Metro apps early and often during development. You, or your team, may have a Metro app in mind. Perhaps you’ve even gone through the planning and have answered the questions raised in this series of blog posts. However, you need to keep in mind that you and/or your team are a small number of individuals. You need to know how your true end users will view your application. If you don’t, you will end up simply creating an application for yourself.

You want to be sure to start getting this feedback early on in the development process. It’s easier to address issues as they arise rather than waiting until the end of the development cycle. If you’re practicing Agile software development practices, you are (or should be) doing this already.

With that said, I’d recommend getting a good understanding of Microsoft’s UX guidelines for Metro style applications. Microsoft has spent a great deal of time and money researching, developing, and refining these guidelines, and they’re giving them to you for free, so take advantage. In particular, make sure you understand the following fundamentals:

• Splash screen:  Use the splash screen to smooth the transition between when people launch your app and when it’s ready for use. The splash screen should subtly reinforce your brand with your users, not distract them or advertise to them.
• Suspend and resume app state:  Users will switch your app on and off the screen, and Windows will terminate it in the background when it is unused. You should save and resume the app state when possible to maintain context.
• Auto-launching and “Open With”: Launch the default app for a file type or protocol from your app.
• Globalization, localization, and app resources: Windows is used worldwide, so you need to design your app so that resources, such as strings and images, are separated from their code, to help make localization easy.
• Accessibility: Make your app available to all users regardless of their abilities, disabilities, or preferences. If you use the built-in UI controls, you get accessibility for free. When you need to create custom controls.
• App help: Provide help or troubleshooting tips to your users.
• Store categories: Learn how to create great apps for specific Windows Store categories, like games or entertainment.

Mastering these fundamentals is not a substitute for the prototyping process, but they can help you avoid usability issues that may come up as part of the validation process.

Next up, about the logo.

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427.aspx & http://msdn.microsoft.com/en-us/library/windows/apps/hh465424.aspx

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427.aspx

I remember the first, of what would turn out to be many, paper I wrote on epistemology during college. For those who may not know, epistemology is the study of knowledge. It attempts to answer the following three questions:

1. What is knowledge?
2. How do we gain knowledge?
3. To what extent is it possible for a given subject to be known?

(You can read more about epistemology here.)

This particular paper was on the nature of first impressions. My contention was that while first impressions do not result in true knowledge of an individual, they do have an immediate impact on how we view, or judge, the individual in subsequent interactions. In fact, I may choose not to interact with an individual in the future due to a first impression. It’s entirely possible that my first impression of a person was in no way an accurate reflection of who the person really is (maybe he or she was having a bad day), but, having no other information at my disposal, the first impression is all I have to go on.

OK, enough rambling. What on earth does this have to do with Metro apps? Simple, you need to be very conscientious of your application’s first impression. You may have created the greatest Metro app of all time, but if it doesn’t engage the user on the Start screen, or takes a long time to load then you haven’t given the user a good reason to use your application.

Think about what you want users to think, feel, or do when they first launch your app. Refer back to your “great at” statement. Even though you won’t get a chance to personally tell your users what your app is great at, you can convey the message to them when you make your first impression. Take advantage of these:

Tile & notifications  The tile is the face of your app. Among the many other apps on a user’s Start screen, what will make the user want to launch your app? Be sure your tile highlights your app’s brand and shows what the app is great at. Make use of tile notifications so that your app will always feel fresh and relevant, bringing the user back to your app again and again.

Splash screen  The splash screen should load as fast as possible, and remain on the screen only as long as you need to initialize your app state. What you show on the splash screen should express your app’s personality.

First launch  Before users sign up for your service, log in to their account, or add their own content, what will they see? Try to demonstrate the value of your app before asking users for information. Consider showing sample content that people can play around with to understand the purpose of your app before you ask them to commit.

Home page  The home page is where you bring users each time they launch your app. The content here should have a clear focus and immediately showcase what your app is tailored for. Make this page great at one thing and trust that people will explore the rest of your app. Solve for distractions on the landing page, not discoverability.

Next up, prototype and validate.

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427.aspx

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427.aspx

So far we’ve answered the following questions as part of the Metro app planning process:

1. What’s the app about?
2. What’s the app great at?
3. What user activities will the app support?
4. What features will the app include?
5. How the app be monetized?

It’s now time to turn our attention to designing the user interface (UI) of the application.  When designing the UI for Metro style applications, there are

1. How should you organize UI content?
2. What UI surfaces and command do you need?
3. How should you organize commands?
4. How should the app be laid out in each view?

Let’s take these questions one by one.

How should you organize UI content?

Most app content can be organized into some form of groupings or hierarchies. What you choose as the top-level grouping of your content should match the focus of your “great at” statement. Choosing how you want to group your content helps you decide what pages or views you need in your app. The project templates available in Microsoft Visual Studio Express 2012 RC for Windows 8 offer the common app layout patterns that will suit most content needs.

What UI surfaces and commands do you need?

Review the flows that you identified earlier. For each flow, create a rough outline of the steps users take. During this process, you begin to see what UI you need to create and the extra details you need to figure out. You can also start eliminating extra steps. Just remember, the cleaner the flow, the easier to use.

How should you organize commands?

Use your outline of the flow steps to identify potential commands that you need to design for. Then think about where those commands should live in your app.

• Always try to use the content.  Whenever possible, let users directly manipulate the content on the app’s canvas, rather than adding commands that act on the content. For example, in the travel app, let users rearrange their itinerary by dragging and dropping activities in a list on the canvas, rather than selecting the activity and using Up or Down command buttons.

• If you can’t use the content, place commands on one of these UI surfaces:

  • In the app bar: You should put most commands on the app bar, which is usually hidden until the users bring it up.
  • On the app’s canvas itself: If the user is on a page or view that has a single purpose, you can provide commands for that purpose directly on the canvas. There should be very few of these commands.
  • In a context menu: You can use context menus for clipboard actions (such as cut, copy, and paste), or for commands that apply to content that cannot be selected (like adding a push pin to a location on a map).

How should the app be laid out in each view?

Windows 8 supports landscape, portrait, snapped, and fill views. Users can put your app in any of these views at any time, and you want your app to look and work great in each one. This means you need to plan the layout of your UI elements for each view, and map your layout implementation to each view state. When you do this, your app UI changes fluidly to meet your user’s needs and preferences.

Next up, first impressions matter.

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427.aspx

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427.aspx & http://msdn.microsoft.com/en-us/library/windows/apps/hh465433.aspx

In an older post I made a case for why you should strong consider writing applications for the Windows Store (i.e. Metro style apps). To quote myself, which sounds a little strange:

In 27 months of being on the market Windows 7 went from 0 to 525,000,000 (yes that’s million) licenses sold. Let me put that into perspective for you. Current estimates, and these are always a little wishy washy depending on the source, peg the current number of Android devices at 247 million, iOS devices at 200 million, Mac OSX devics at 30 million.

Windows 7 is installed on more devices than Android, iOS, and Mac OSX combined! Just think about that for a moment. Knowing what you now know about the install base and adoption rate of Windows 7 you can’t deny that there is a HUGE monetization potential for applications that are in the Windows Store that will be a part of Windows 8, but let’s be a little more specific a set a scenario.

Assume a Windows 8 install base of 525,000,000 (not from day one, but over time). Let’s say your app makes it on to 5% (26,250,000) of those devices. After you have sold approximately 16,779 units at the base price of $1.49 you will have grossed ~$25,000 in sales and netted ~$17,500 after Microsoft takes their 30%. $25,000 in sales is also a trigger point in the store for you to start getting 80% of sales instead of 70%. If we look at sales for the remaining 26,233,221 devices you’ll see an additional net of ~$31,270,000.

What you have is a compelling economic incentive to sell your aps through the Windows Store. So, how can you take advantage of this? As you plan your applications you should consider the following three monetization strategies:

1. Trial, paid, and mixed versions

You can list your Metro style apps in the Windows Store such that your customers must pay for it before they can use it (a full-featured, paid app) or where they can try it for free for a while (a free-trial period). A user can upgrade from a trial version of your app to a full purchase from within the app or through the Windows Store.

The License API provides the interface that allows you to check the app’s license state and the state of purchases made through the app. You can also use it to check the expiration dates of in-app purchases, and let users make new purchases from within the app.

2. In-app sales

In-app sales let you sell content, other apps, or new app functionality, such as unlocking the next level of a game from within the app. You can put buy options anywhere in your app that makes a convenient experience for your customers.

3. In-app advertising

You can sell and include ads in your app. Be careful in designing where you place the ads so that your user experience remains strong. Also, make sure the ads provided by the ad service comply with the Certification requirements for Windows apps before you include them in your app.

(Note – you aren’t limited to only using one of these monetization strategies in your applications. For example, you could create an ad supported version (strategy 3) and a paid version (strategy 1) of the same application.)

Next up, planning the UI.

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427.aspx & http://msdn.microsoft.com/en-us/library/windows/apps/hh465433.aspx

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427

When we started looking at what goes into planning a Metro app, one of the key principles is that we need to stop focusing on features on focus on on overall experience. To date that’s what we’ve done by answering the following questions:

1. What’s the app all about?
2. What’s the app great at?
3. What activities does the app support?

The goal of answering these questions is to shape the user experience of the application. However, we can’t create an application unless we have features. Now that we know what we want the experience to be, we can focus on the question, “What features should the app include?” Here we want to look at which tools in the Windows 8 toolbox can help us build the experience we’re looking for. We covered a lot of these when looking at the traits of great Metro apps, but they’re worth repeating here:

App contracts Your app can participate in app contracts that enable broad, cross-app, cross-feature user flows.

• Search Let your users quickly search through your app’s content from anywhere in the system, including from within other apps. And vice versa.
• Share Let your users share content from your app with other people through other apps, and receive shareable content from other people and apps, too.
• Play To Let your users enjoy audio, video, or images streamed from your app to other devices in their home network.
• File picker and file picker extensions Let your users load and save their files from the local file system, connected storage devices, HomeGroup, or even other apps. You can also provide a file picker extension so that other apps can load your app’s content.

Different views and form factors Windows 8 Release Preview puts users in charge and your app in the forefront. You want your app UI to shine on any device, in any orientation, in whatever circumstance the user decides to use it.

Touch first Windows 8 provides a unique and distinctive touch experience that does more than simply emulate mouse functionality.

Engaging and fresh Be sure your app feels fresh and engages users with these standard experiences:

• Animations Use our library of animations to make your app feel fast and fluid. Help users understand context changes and tie experiences together with visual transitions.
• Toast notifications Let your users know about time-sensitive or personally relevant content through toast notifications and invite them back to your app even when your app is closed.
• Secondary tiles Promote interesting content and deep links from your app on the Start screen, and let your users launch your app directly into a specific page or view.
• App tiles Provide fresh and relevant updates to entice users back into your app. More about this in the next section.

Personalization

• Settings Let your users create the experience they want by saving app settings. Consolidate all of your settings under one roof, and users can configure your app via a common mechanism that they are already familiar with.
• Roaming Create a continuous experience across devices by roaming data that lets people pick up a task right where they left off, and preserves the UX they care most about, regardless of the device they’re using. Make it easy for users to use your app everywhere, from their kitchen family PC to their work PC to their personal tablet, by maintaining settings and states with roaming.
• User tiles Make your app more personal to your users by loading their user tile image, or let the users set content from your app as their personal tile throughout Windows.

Device capabilities Be sure your app takes full advantage of the capabilities of today’s devices.

• Proximity gestures Let your users connect devices, by physically tapping them together, to light up experiences where you expect multiple users to be physically nearby (multiplayer games).
• Cameras and external storage devices Connect your users to their built-in or plugged-in cameras for chatting and conferencing, recording vlogs, taking profile pics, documenting the world around them, or whatever activity your app is great at.
• Accelerometers and other sensors Devices come with a number of sensors nowadays. Your app can dim or brighten the display based on ambient light, or reflow the UI if the user rotates the display, or react to any physical movement.
• Geolocation Use geolocation information from standard web data or from geolocation sensors to help your users get around, find their position on a map, or get notices about nearby people, activities, and destinations.

Next up “Show Me the Money!”

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427

So far we’ve answered the following two questions about a new Metro app

1. What is the app about?
2. What is the app great at?

The next question we need to answer is “What should users be able to do?” The best way to answer this question is come up with a flow or set of flows for the application.

A flow is a set of related interactions that your users have with your app to achieve their goals. Every flow should be tightly tied to your “great at” statement, and should help users achieve that single scenario that you want to light up. Great apps have flows that are easy to learn and that require the fewest interactions.

Common techniques to help with this step:

• Outline the flow: What comes first, what comes next?
• Storyboard the flow: How should users move through your UI to complete the flow?
• Prototype: Try out the flow with a quick prototype.

Next up, decided what features to include.

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427

Once you’ve figured out what your app is all about, it’s time to determine what’s your app great at. After all, no one would probably want to buy an app that describes itself as “just an average todo list application.”

Take a step back and look at your list of ideas of what your apps about to see if a particular scenario really jumps out at you. Trim down the list to just a single scenario that you want to focus on. In the process, you might cross off many good ideas, but saying “no” to them is crucial to making a single scenario great.

You might think that you are limiting the potential of your application by making its focus so narrow. I, and several others, respectfully disagree:

When forced to work within a strict framework the imagination is taxed to its utmost – and will produce its richest ideas. Given total freedom the work is likely to sprawl

-T.S. Eliot

Do only what is necessary to convey what is essential. [C]arefully eliminate elements that distract from the essential whole, elements that obstruct and obscure…. Clutter, bulk, and erudition confuse perception and stifle comprehension, whereas simplicity allows clear and direct attention.

-Richard Powell

Constraints are helpful, even inspiring as they challenge us to think differently and more creatively about a particular problem.

-Garr Reynolds

After you choose a single scenario, decide how you would explain to an average person what your app is great at by writing it down in one sentence. For example:

• My travel app is great at helping friends create itineraries collaboratively for group trips.
• My workout app is great at letting friends track their workout progress and share their achievements with each other.
• My grocery app is great at helping families coordinate their weekly grocery shopping so that they never miss or duplicate a purchase again.

This is your app’s “great at” statement, and it can guide many design decisions and tradeoffs that you make as you build your app. Focus on the user scenarios that you want to enable, and be careful not to turn this into a feature list. It should be about what your users will be able to do, as opposed to what your app will be able to do.

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427

(For an overview of this series, please read this post.)

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427

The first thing you need to do when planning your app is figure out what your app is all about. Answer the question, “What does your app do?” This might seem obvious, but one things I’ve learned through years of consulting, presenting, and life in general is to assume nothing about a project, an audience, or home plumbing. Once you have a good idea of what your app is all about you can start focusing on the experience you want to create.

To get started, come up with a broad concept and list all of the things that you want to help users do with your app.

• For example, suppose you want to build an app that helps people plan their trips. Here are some ideas you might sketch out on the back of a napkin:
• Get maps of all of the places on an itinerary, and take them with you on the trip.
• Find out about special events happening while you’re in a city.
• Let travel buddies create separate but shareable lists of must-do activities and must-see attractions.
• Let travel buddies compile all of their photos to share with friends and family.
• Get recommended destinations based on flight prices.
• Find a consolidated list of deals for restaurants, shops, and activities around your destination.

Once you do this, you can move on to the next step, figuring out what your app is great at, which, coincidentally, is the next post in this series.

MSDN Source: http://msdn.microsoft.com/en-us/library/windows/apps/hh465427