The Top 10 Windows 8 Secrets of App Success

Making $ on Windows 8: The First Mover Advantage

The upcoming release of Windows 8 offers developers a huge opportunity.  How huge?  The Windows Store Blog sums it up well:

With more than 630 million licenses sold to date, across 200+ countries and regions around the world, Windows has an unrivaled global reach. Combined with the flexibility of monetization options that the Store provides, Windows 8 represents the single biggest developer opportunity for any platform.

So, how can you join in?

Generation App: Getting You There

Many thousands of developers will recognize this opportunity, but you can gain an advantage and stand out from the crowd through the programs we’re offering:

• Windows 8 DevCamps & Hackathons
• Free events, running now in many cities
• DevCamps – In-person training & guidance from Windows 8 experts
• Hackathons – Expert help and hands-on experience creating your app
  
• 30 To Launch
• Online training and tips from insiders, at your own pace
• Tele-support with a Windows 8 architect
• Exclusive one-on-one Metro style design consultation
• Includes an Application Excellence Lab
             
• Application Excellence Labs
• Your Opportunity to Get Into the Windows Store
• Free Developer Accounts for Quality Apps
• More, including a helpful survey (details below) at http://aka.ms/apps

  

These Application Excellence Labs (or “AE Labs”) are a great way for developers to get guidance and feedback on ways to make their apps shine.  In a moment, you’ll see how the labs and the related survey can help you as you develop your apps.

What You Need to Know

First, some essential resources to get you started:

• The Windows Dev Center – References, downloads, community, and more.
• Windows 8 Metro style app samples – Hundreds of samples covering a wide variety of topics (in JavaScript, C#, VB, and C++)
• Designing UX for apps – Planning, design guidance, case studies and design assets.
• Windows 8 app certification requirements – An absolute must read, describing the requirements you’ll need to satisfy to get your app into the Windows Store.

Another immensely useful resource is the Application Profile Survey, available via http://aka.ms/apps.  The survey part of the AE Lab review and is available to you beforehand as a checklist of things to consider as you develop your app.  To access the survey, simply create an account and add an Application Profile for your app or app idea.

Once you’ve done that, a “Survey” link will appear with your Application Profile, bringing you to a helpful checklist of guidance:

You can expand each item to reveal guidance and related resources. 

And Now, the List

The Application Profile Survey just mentioned is a great resource, used as part of the AE Labs to meet with developers to review their apps, covering everything from design and features to user experience and performance.

To help you benefit from the experiences in those reviews, the list below is based on the more frequently-encountered scenarios as reported by the Premier Field Engineers conducting those reviews. 

So grab a cup of coffee and settle in – taking the time to ensure you’ve considered each for your app will definitely help you get ready for the Windows 8 opportunity!

1) Screen Management and Layout

Your app can be run on a wide variety of devices, with different screen sizes and resolutions.

What would your app do if it suddenly had much more room to run in?  Instead of just showing an undersized rectangle of content in the upper left corner, does the new space let you do something new (adaptive layout) or should things stay put and scale in place relatively (fixed layout)?

Understand your options for creating flexible layouts, and make sure you’ve tested your app for multiple screen sizes, pixel densities, as well as in portrait and landscape orientations.

The Simulator that’s part of Visual Studio 2012 can make these much easier to test.  See Running Windows Metro style apps in the simulator for more. 

For more on this, see:

1. Scaling to different screens - Building Windows 8 Blog
2. Optimizing for both landscape and portrait - Building Windows 8 Blog
3. Designing flexible layouts (Metro style apps using JavaScript and HTML)
4. Guidelines for rotation (Metro style apps)
5. Quickstart: Defining app layouts for view states

   

2) Apply Metro UX Design

Effectively applying Metro style design is critical, so take the time to understand the main concepts and apply them to your app.  The guidance you’ll need is on Designing UX for apps and the App Profile Survey, but based on AE Lab reviews, here are a few areas in particular that can help:

• Silhouette - Apply the concepts of Silhouette to your layout to help your users become instantly familiar with your app
• Navigation – Understand navigation options and the navigation design guidance, avoiding use of tabs, menus for navigation, and home buttons.
• AppBar - Know how to use the AppBar, including when and where to place commands including use of contextual commands.
• Text & Typography – Effective use of fonts, font sizes, colors and more can offer a simplicity and clarity that’s central to Metro design.  Understand the guidance for type and typography to improve user experience.

  

Basing your app on Visual Studio’s Grid or Split project templates, which are themselves already based on much of this guidance, can help you easily get started on the right track. 

Also, there’s a full set of excellent UX training (as recorded sessions) available at http://windowsuserexperiencetraining.com.

For more, see:

• Planning Metro style apps
• Supporting navigation (Metro style apps using JavaScript and HTML)
• Navigating between pages (Metro style apps using C#/VB/C++ and XAML)
• Guidelines and checklist for app bars (Metro style apps)
• Quickstart: adding an app bar with commands (Metro style apps using JavaScript and HTML)
• Quickstart: adding app bars (Metro style apps using C#/VB/C++ and XAML)
• XAML AppBar control sample - SDK Sample
• HTML AppBar control sample - SDK Sample
• CSS typography JS sample - SDK Sample
• XAML text display sample - SDK Sample

 

3) Snapping

Users will expect to be able to put your app into snapped view, so make sure you’ve tested your app for snapped, filled, and full views, including the effect on the flow of your content and behavior of your AppBar.

Though you may decide that some features and content should be limited in snapped view (focus on what will remain clear and relevant), make sure your app remains functional.

By the way, if you are developing a game or another app that won’t support play while Snapped, one simple option is to create a branded page with text.  For example, a pause screen that pauses gameplay, music, etc., and invites the user to continue by returning to full screen view.

For more on this, see:

1. Guidelines for snapped and fill views (Metro style apps)  
2. Snap sample - SDK Sample 
3. Scaling to different screens - Building Windows 8 Blog

 

4) Process Lifecycle Management (PLM) and Load Time

Apps don’t always run continuously.  If the user switches away to do something else, your app may be suspended and perhaps terminated if resources are running low.  Take the time to ensure that your application supports saving and restoring so the user won’t lose data or have to retrace steps when they resume.

Also, to ensure good user experience, your app needs to load quickly.  Try running your app with the Windows App Certification Kit (or WACK), which will help you test for this and other scenarios.

For more, see:

1. Screencast - "How Do I: Handle Process Lifetime Management for a Windows 8 Metro application?"
2. Guidelines for app suspend and resume (Metro style apps)
3. Optimizing your app's lifecycle (Metro style apps using JavaScript and HTML)
4. Manage app lifecycle and state (Metro style apps using JavaScript and HTML)

 

5) What if the Connection is Offline or Metered?

Does your app rely on internet connectivity?  Your app needs to provide a good experience when offline and with limited internet connectivity.  Be sure to test for these scenarios, because if you don’t chances are your app will fail when this is tested during review.

Use the Windows.Networking APIs to detect connectivity, alerting the user about connectivity status, and reconnecting automatically if connectivity is restored.  Also, disable areas that require network connectivity, displaying an inline error.

How can you improve user experience?  Consider bundling a minimum set of resources in the app’s package to use in these scenarios and caching resources when the app is online for later offline use.

If your app downloads large amounts of data (e.g. large images), make sure you respect the cost the user will incur if they have a metered network connection.  Use the Windows.Networking.Connectivity APIs to determine if the user is on a metered network connection so you can adjust the app’s behavior.

For more, see:

1. Developing connected applications
2. Quickstart: Managing connection state changes (Metro style apps using JavaScript and HTML)
3. Quickstart: Managing connections on metered networks (Metro style apps using JavaScript and HTML) 

 

6) Handle and Display Errors Well

You might be used to using dialogs to display common errors, but many scenarios should be handled instead with inline text or an error and warning bar.

The error guidelines (also here) make the best practices clear, including some helpful Do’s and Don’ts.

For more, see:

1. Error Message Guidelines
2. Laying out your UI (Metro style apps using JavaScript and HTML)
3. Laying out your UI (Metro style apps using C#/VB/C++ and XAML)

 

7) A Good Sign-in / Sign-out Experience

If your app requires login, make sure you offer a good user experience before the user logs in rather than simply displaying a blank screen with login.  In other words, offer as much functionality as you can as a default experience before the user has to log in. 

If that’s not possible, then you can show the SettingsFlyout automatically when the app launches.  Also, your custom login and logout controls should be in the SettingsFlyout and nowhere else.

For more, see Guidelines for the Microsoft account sign-in experience (and especially “Things to avoid”).

 

8) Understand the Search and Share Contracts

Using the Search and Share contracts is a simple way to make a big difference in how users view the usefulness of your app.  For example, supporting Share can add new scenarios for connecting your app to other apps in ways that you may not have imagined.

   

However, avoid including duplicated Search and Share functionality (e.g. custom search fields) directly in your app, outside of the Charms functionality.  Also, make sure you test to ensure your app launches correctly when it is invoked by Search and/or Share.

For more, see:

1. Guidelines and checklist for search (Metro style apps)
2. Adding search to an app (Metro style apps using JavaScript and HTML)
3. Guidelines and checklist for sharing content (Metro style apps)
4. Adding search to an app (Metro style apps using JavaScript and HTML)

 

9) The “Embedded Browser” Temptation

You may have an existing web application or site that you’d like your app to leverage, but to ensure a good experience and fewer context switches for the user, you need to resist the urge to host entire web pages (e.g. via the WebView control) as your app’s primary workflow.

See these samples for examples and guidance for using web content and services in your app: 

1. XAML WebView control sample
2. Integrating content and controls from web services sample
3. Part 3: Create a blog reader (Metro style apps using C#/VB and XAML)

 

10) Accessibility and High Contrast Mode

Consider choosing to make your application fully accessible by following the guidelines and declaring your app as accessible.  Doing so can help you reach more customers, and you’ll be providing a service to users for whom accessibility makes all the difference!

Using Visual Studio’s Grid or Split project templates will help you get off to a good start with accessibility.

While declaring your app as accessible is optional, in either case you should review how your app displays when High Contrast mode is on.  You might be surprised by some of the formatting or color issues that can be uncovered. 

For more, see:

1. ”Enabling accessibility” - Building Windows 8 Blog
2. Design for accessibility (Metro style apps)
3. Testing your app for accessibility (Metro style apps using JavaScript and HTML)
4. Testing your app for accessibility (Metro style apps using C#/VB/C++ and XAML)
5. Supporting high contrast themes (Metro style apps using JavaScript and HTML)
6. Supporting high-contrast themes (Metro style apps using C#/VB/C++ and XAML)
7. Making your app accessible (Metro style apps using JavaScript and HTML)
8. Accessibility in Metro style apps using C++, C#, or Visual Basic

 

Wrapping Up

Thanks for taking the time to read this post.  By learning from these scenarios, you’re in a great position to create amazing Windows 8 Metro style apps!

Be sure to take full advantage of the 30 To Launch and App Excellence Lab programs as well as the Application Profile Survey mentioned earlier.  You’ll be in very good company, amongst those who recognize the advantage of getting advice, training, and guidance.

Looking forward to your fantastic apps and success with Windows 8!