Designing the Windows Store user experience

When we set out to design the Windows Store, we had a number of design goals and principles that guided us to our final experience. The fundamental building block of our Store design was to ensure that people could easily discover and quickly acquire apps. While this is a somewhat obvious goal for a catalog or marketplace, it’s actually pretty challenging when the size and diversity of the catalog grows as quickly as we expect to happen in the Windows Store.

In this post, I’ll introduce you to all of the major parts of the Store anatomy: the landing page, editorial topic pages, data-generated lists, app listing pages, and the search, browse, install, and update experiences. I’ll discuss the relationship between those UI surfaces and how we applied the Windows Metro style design language to achieve our goals for efficient app discovery.

 Anatomy of the Windows Store

A landing page designed for discovery

We mentioned in the previous blog post that one of our key design principles for the Store was to design for discovery. We built Windows 8 around the notion that content should be primary, with chrome taking a back seat. With minimal chrome, the Store landing page brings apps to the forefront, letting the brand and personality of the apps capture your interest.

Windows Store landing page

On the Store landing page, we will continually feature new and exciting content, changing frequently so that customers come to expect there’s always more to explore within the Store. The landing page integrates featured content with navigational content (like categories and lists of featured apps). Research from our usability labs and from individual customer interviews indicated that people were more likely to just search for what they wanted in today’s app stores because most browsing experiences aren’t compelling enough. So we designed a landing page that integrates our featured content, data-driven lists, and category listings into one cohesive and engaging browsing experience.

Navigation is simple and consistent with Windows 8 Metro style UI, so it will be familiar and easy for Windows 8 users to find their way through the Store. Store categories are presented across the top of the screen, with compelling apps featured in each category. To browse, you simply pan to the right or left—with a flick of the finger it’s incredibly easy to see new and interesting apps across all categories and the overall breadth of the Store. If you’re interested, you can also drill down to the apps in a specific category with a single tap on a category name.

Scroll horizontally to view more categories (click for larger image)

In many of the new Store categories, we’ll be featuring a set of apps that are editorially chosen based on a variety of factors, including whether they do a great job on the platform or a great job expressingMetro style design principles. If there is a particular thematic element linking multiple apps we’d like to feature, we’ll create a special “topic” page that we link to from the landing page to showcase those apps. Customers will also be able to look at featured lists of the most popular apps, and what we consider to be the highest quality apps in each category. We’ll feature apps from ”rising star” developers that are building momentum, alongside those created by developers with an established track record of developing quality apps. Finally, we’ll also provide app recommendations based on the customer’s past purchase history.

To get a feel for our categories and better understand the types of apps you’ll find in the Store, you can use the pinch gesture to zoom out and see the breadth of the categories, and then tap to jump to a particular category. This same gesture works from the Start screen as well. We call this gesture “semantic zoom” because it allows you to zoom in or out to see more or less detail about what’s on the page. The view of the Store zoomed out exposes all of the app categories at once, ensuring that customers have efficient navigation even if the catalog is large and supports a diversity of categories. The design helps ensure efficient navigation even as the catalog and categories expand. We built the landing page using a standard ListView control, along with the semantic zoom control, which is available to developers of Metro style apps using HTML and JavaScript.

 Zoom out to see more categories

With a large number of categories, the flat navigation structure of the Store is really improved with zoom, which is one of the core architectural elements of the Metro style user experience design in Windows 8.

Searching and browsing the Store

Search has become an incredibly important component of user interfaces and is currently one of the most common ways for customers to discover things to purchase in online stores. The Windows Store has implemented the Search contract, which lets you search within whatever app you are using by tapping the Search charm. This makes it easy to search for new apps when you have the Store app already open. But we’ve also made it easy to search the Store without even launching the Store itself.

Search for apps from anywhere in Windows

If you happen to think of an app while browsing the web or using another app, you can just tap the Search charm, type in your search term, and select the Store to see search results for your query.

You’ll use the same UI to search while you’re in the Store, so that you’ll get the same functionality in a consistent way.

Using search in the Store

Once you begin typing, text suggestions will immediately appear in the search pane. This is a useful shortcut for most of us, but it’s especially useful when using a touch keyboard. If one of the text suggestions is an app, it will appear as a “Recommended” result, and tapping on it takes you directly to the app listing page—there’s no need to go to a search results page first, and so the fewest steps possible come between the customer and the app listing page. Even in the search recommendation, the app’s brand icon provides instant recognition.

If you don’t have a particular app in mind and you type in a more general search query, we’ll take you to a search results page.

 Search results page

From this page, you can browse through the results, initially sorted by relevance. You can also sort them by different attributes such as price, highest average user rating, and release date. To reduce the number of results, you can filter them by category or price.

We use the same design model for our category view, again reducing the experience to the fewest, most effective concepts to enhance discoverability. Tap a category header on the landing page to access one of the category pages. This view allows you to casually browse through the depth of the catalog. We designed the category page to be very similar to the search results page, providing the same rich filtering and sorting options. And, just like the landing page and the search UI, navigation within categories is super simple—there is no paging; you just scroll continuously to see more apps.

Category page

App listing pages

The app listing is the place where customers can learn everything they need to know about the app (and where developers can tell the story of why their app shines and is something customers will want).

The app listing page lets the app’s brand shine

To ensure that the app’s personality shines through, the app listing page uses the visual elements from the app package to apply the app’s brand color and logo. In addition to the app description and list of features, you’ll be able to use the average user rating and user submitted reviews to judge the quality of the app, and whether or not the app meets your needs. You can flip through screenshots, which have been implemented using the FlipView Object control, which is also available to developers. Screenshots are given extremely prominent placement because, for many people, it’s the visuals that best tell the story of the app. The app listing will also show you the age rating and a list of app permissions needed, such as access to a location sensor or your documents library.

Desktop apps that pass our Desktop App Certification can also have app listing pages. These will be discoverable in the Store via searching and browsing, and will include a link to the app developer’s website so that customers can purchase the app there.

Desktop app listing page

Installing apps

Installing apps on Windows 8 will be simple, fast, and reliable.

Assuming you are signed in to the Windows Store, one tap on the app listing page is all you’ll need to install free and trial apps. That’s it. For paid apps, we will ask for your password to confirm your purchase. If you don’t want to enter your password for each purchase, we do have a setting to turn off this security step—but we think those of you with kids will appreciate this extra little roadblock to unintentional purchases.

Because we strongly believe in aiding app discovery, we’ve made a conscious decision that the customer shouldn’t be taken out of their context once they’ve started installing an app. We don’t believe you should have to stare at a progress bar and count every second as it goes by. Likewise, staying on the app listing page for the app you just acquired leaves you at a dead end with nothing to do. Instead, as soon as the installation starts, we take you back to the previous page you were looking at, so you can continue your shopping experience; in many cases, that’s the landing page, or a category page, or another list of great apps to try that you were previously looking at. Our lab research validated that people liked the continuity of getting one app and then going on to discover more.

You will still be able to see that the installation is proceeding, via a progress indicator, and we’ll also add the tile for the app you are installing to the Start screen. And, if you are really curious about where you are in the installation process, you can tap the progress indicator to see the details.

Seeing apps that are being installed

When the installation is complete, a notification lets you know that the app is ready. Tapping that notification will launch the app, so you can start using it the second it’s ready. The new app tile always appears at the end of your Start screen, and from there, you can easily move it to wherever you like—so you stay in charge of how you organize apps on your Start screen.

Updating apps

We’ve also ensured that updating is an easy and predictable experience. Once a day, we’ll check if any of your installed apps have an update. The tile for the Store will then show the number of updates available so that you have a clear indication that there’s something waiting for you in the Store.

When you get to the Updates page, you just have to tap a button to update all of your apps. All updates are automatically selected. We want to encourage all apps to be updated in a timely manner once the developer makes them available.

 Your app updates can be installed quickly and easily

Updates will be installed very quickly—we will opportunistically download (but not install) these updates in the background when your computer is idle, and we make sure not to do it when you’re on a mobile broadband network that charges you for data usage. Of course, if you don’t want to automatically download the updates, you can turn this behavior off in the Store settings. Once the update process begins, we will take you back to the previous page in the Store, so you can browse through new and interesting content while your updates are installed.

Reacquiring apps

In recognition that you may have multiple PCs and are likely going to want your apps on each of them, we’ve made it easy to install and run all of your apps on up to a total of five Windows 8 PCs. Whenever you install an app on a new device, that device gets added to the list of devices that are allowed to run the app. On the sixth device, you are prompted to remove one of your devices if you want to install apps on the current device.

 See all of your apps and reinstall them

We also allow you to quickly filter by the apps that have been installed on a particular device. This makes it easy to take the apps you have on one device and install them on another. In fact, if those apps have implemented roaming and you have a connected account (if you sign in to Windows 8 with a Windows Live ID), the settings and state from the individual apps will also be preserved across devices.

Striking the right balance

In designing the Windows Store, we’ve tried to strike a balance between a design optimized for serendipitous app discovery through curated content, and one where customers can easily find the apps that they search for directly. We’ve worked hard to engage customers by emphasizing the brand icons and colors of each app in the app listings and the apps themselves. Discovering, installing, and updating apps are all designed to be as simple and fast as possible. Because the app discovery process will be so easier than ever before for customers, we think the new Windows Store represents the largest ever opportunity for developers.

@Courtesy - Antoine Leblond

Submitting your Windows 8 apps

For the Windows Store to be successful, we understood that we needed to create tools that would enable developers to be successful—at creating great apps, listing these apps in the Store, keeping track of how the apps are doing, and updating the apps over time. We approached the submission process by looking at developers as our partners, sharing a common goal of connecting people to as many great apps as possible.

In this post, I’ll share with you the goals that influenced our choices when designing the application submission experience.

Design iteration and learning

In addition to defining the set of baseline scenarios that we knew we had to deliver, we took several early design prototypes into the usability lab to get direct feedback from a diverse cross-section of developers. We also took the time to listen to as many developers as we could, asking them to describe any difficulties they encountered when submitting apps to other platforms.

Developer expectations are as diverse as the apps they write. Some developers arrive hungry for information and want to fully explore every option, while others are looking for a streamlined experience that takes only a few minutes. We established that setting time and complexity expectations up front is important and that we needed to provide a straightforward path toward submission while still offering flexibility in how developers explore and consider their options. We also learned that the process of thinking through the options for publishing an app—basics like markets, price, trials, and in-app offers—frequently inspire developers to add new features and change some code.

We broke down the submission process into two phases. At first, the developer is in the driver’s seat, learning, submitting, and reviewing their own data, working at their own pace. However, once you submit the app for certification, you are in the passenger seat, tracking the progress of the app, but unable to affect that progress or outcome in the same way as before. We needed a plan to increase confidence in this second phase, while transparently tracking the status of the app during the certification process.

We wanted to be sure that you would be able to submit your apps incrementally, and complete the process over several sessions. We needed a system that would predictably and reliably save data even when that data isn’t perfect yet, as you sometimes need to move on to something else and pick up the process again later.

Design goals

Because we wanted to focus our engineering efforts on the problems that were going to impact the most developers the most frequently, some of the key goals we picked were:

• Encourage developers to visit the Store developer portal before they start coding
• Help developers comply with the Store technical requirements
• Reduce concepts and repetition by pulling information directly from the app package 

Encourage developers to visit the Store developer portal before they start coding

One of the consistent themes to come out of our usability tests was that if developers waited to visit the Store developer portal until after they finished coding, they would usually be inspired to change their code slightly as a result of decisions made during the app submission flow. Similarly, developers need to know that the name of their app won’t already be in-use by the time they finish coding and are ready to upload. By allowing developers to reserve a name before they are ready to submit the app, we add an additional level of predictability, as the name is guaranteed to be unique and reserved for your use.

One advantage of allowing developers to reserve app names in advance is that it brings them into the developer portal site earlier in the process, and exposes them to some of the other options and requirements that they’ll need to keep in mind as they code.

The link to the Store portal from Visual Studio deliberately does not deep-link directly to the name reservation page, but rather to an overview page that sets the context for the app submission process. We felt that it was important to be transparent and upfront about the entire process of submitting to the Store, setting expectations visually that there are multiple concepts to cover, and including rough estimates of about how long each step might take.

Note that, although only the first section is enabled, the links that allow you to learn more about each step are always available. So you are free to dive right in, but you can also take your time to learn more about each option.

We also ordered the steps on this page very deliberately, grouping the concepts that might inspire you to change your code conceptually earlier in the process, to help facilitate the consideration of these questions before we ask you to upload your app packages.

I’ll briefly touch on three of these concepts:

• Markets – My colleague Aayaz Bhorania mentioned the global reach and opportunity of the Windows Store in his blog post, but there’s something about the act of actually selecting the markets for your own app that drives the point home in a way that makes localization look like the next feature to add (by the way, you’ll see a short list of markets in the video because I’m using a beta version of the portal, but the list will be getting much bigger very soon).
• Monetization – The Store provides full support for trials, including both a built-in time based trial and an easy method of including feature-differentiation for trial users. Using in-app purchase, users can unlock new app capabilities without losing context. Coding these trial and purchase-based features is easy—but it needs to be planned and tested.
• Services – Here is where visiting the portal early can really help your testing efforts. Windows 8 has some great built-in push notification technology that allows your app experience to extend right to your app’s tile on the Store screen. When you reserve a name for your app, the Store generates a unique app identity and provisions your app for push notifications. From the Advanced Features page, you can find all of the information you need to align your local project with the identity details that the Store assigns. This enables you to test your app—including hooking up the notifications end-to-end —before you publish.
  

Help with Store technical requirements

In order to create a consistent consumer experience, we needed to establish some constraints around certain app package details. For example, we decided that in order for consumers to reliably find, acquire and provide feedback on an app in the Store, we needed to ensure that all apps had a unique name as seen by consumers. For various technical reasons, the unique identity for each app must include some details that are app-specific and some details that are developer-specific.

After considering and rejecting several designs where we tried to communicate all of this complexity to the developer on the package upload page—without distracting from the upload itself—we decided to provide an automated option, and move this information closer to the development environment. Using Visual Studio, you can authenticate to the Store, view a list of your apps, select the app that you’ve already defined on the Store portal, and create a package that aligns with all of the app-specific and developer-specific details that the Store requires.

As the Store does some basic package validation immediately after upload, using this experience from Visual Studio provides a predictable way to align your package with Store constraints and have your package successfully accepted the first time you upload it to the Store.

We also provide increased predictability when it comes to apps passing the full Store certification process, by providing you with the Windows App Certification Kit, the same technical tests that the Store runs during app certification. By running this locally before uploading an app package, you can find technical issues early on, and increase confidence that your app will pass technical certification.

Pull information directly from the app package

To streamline the experience and prevent you from having to enter the same data multiple times, we pull as much as we can directly from your app packages. Visual Studio provides tools to help developers declare certain details in the package, such as the languages that your app supports and the logos that you want your customers to see. Sometimes these relationships are complex, as some apps include assets for multiple resolutions, various high contrast ratios, and multiple languages, with some overlap and fallback between these different contexts. Rather than attempt to replicate this complexity on the Store portal and ask you to define it twice, we read this data directly from the package, and treat the package as the master copy.

Our choice here affects the timing of some of the submission events—for example, since you’ll be asked to provide localized app listing data for each language your app supports, you’ll need to upload a package in order to enable that section of the submission experience.

Once the Store portal reads the supported languages out of the uploaded package, the Description sections are enabled, in this case one section each for English and French:

Let’s take a look at one of these description pages, which is the input screen for most of the localized text and images that customers will see on the app listing page in the Store.

The first thing you’ll notice is that the page is pretty long. To help you get through this long form, we built in what we call the “go catch your bus” capability. We heard from a number of developers that when they encounter a large form like this with multiple required fields, it sometimes feels like the data integrity needs of the system were given more design consideration than the experience of the person having to input the data. Normally this shows up when the page doesn’t let you save anything because there’s something partially incomplete or that contains some invalid data.

We want you to catch your bus, so we allow you to save your data in whatever state it’s in. We’ll know if it’s invalid, and we’ll make sure you don’t accidentally submit the app for certification until the issue has been fixed. You can come back tomorrow confident that you can continue the process of refining your message to consumers about how your app provides real value. We think that’s important enough that we support your doing it on your timeline.

We also consciously used a “save” metaphor across the entire experience, because we wanted to reinforce that you could come back later and pick up where you left off. You might notice that on some of these pages there isn’t always a piece of data to save, but we found that consistently using a “save” button reinforced a sense of security and predictability that you could leave and return at any time.

Tracking certification status

There are a lot of factors we had to balance when the submission shifts to the tracking stage. It’s a particularly sensitive part of the scenario, and your time to market is important. After being in the driver’s seat during planning, coding, testing, and submission, suddenly the context shifts and you have to wait for a result. We knew early on that this was a critical piece of the experience, and that if we designed it well, we could increase both developer confidence and satisfaction in the process of submitting apps to the Windows Store. And we know that the other steps we’ve taken—making the Windows App Certification Kit available to run before you submit your app, providing guidance in plain language in our app certification policies—help provide predictability and consistency, but still don’t answer the immediate question of “what’s the status of my app?”

Our goal on this page was transparency—here’s your app, here’s what stage it’s in, here’s how long that usually takes. You can watch your app progress through the certification process, using the same visual language that we use elsewhere on the portal to tell you at a glance how close you are to making your app available to millions of Windows 8 users.

Here’s a quick look at what is happening behind the scenes during each of these stages.

• Pre-processing. This is where we’ll check to make sure we have all of the appropriate details that we’ll need to publish your app. This includes checking the status of your developer account and, if your app has a purchase price or any in-app offers, we also ensure that we have all of the paperwork on file so that we can pay you. We know that sometimes this paperwork can take a few days to complete, which is why we allow you to work on your app submission right away, even if some of these forms aren’t complete yet.
• Security tests. We’ll check everything you submitted for viruses and malware.
• Technical compliance. We’ll use the Windows App Certification Kit to check that your app complies with the technical policies. This is exactly the same technical certification assessments that are included in the SDK and that you can run locally before you upload your package.
• Content compliance. Our team of testers takes a look at your app to check that the contents comply with our content policies. Since there are real people looking at your app, this process can take longer than the other steps.
• Release. This stage goes by very quickly unless you’ve specified a publish date in the future. If you request from the Selling details page to wait until a particular date before your app reaches customers, then after you pass the other tests, you’ll remain in this stage until that date arrives.
• Signing and publishing. In this final step, we’ll sign the packages you submitted with a trusted certificate that matches the technical details of your developer account. This provides customers with the assurance that the app is certified by the Windows Store and hasn’t been tampered with. We’ll then publish your app packages to the Store, along with all of the other data that will be visible in your app listing page, so that millions of Windows 8 users will be able to find, acquire, and enjoy your app.

I hope you’ve enjoyed reading about some of the learning and thinking that went into the design of the Windows Store app submission experience. I look forward to continuing this conversation, and to seeing your apps in the Windows Store.

@Courtesy - Jonathan Garrigues

Microsoft's Windows 8 Heading to Consumer Preview, With New Details

Microsoft's Windows 8 is heading rapidly toward its Consumer Preview release, with new details emerging about its interface.

Microsoft is prepping to release its Consumer Preview of Windows 8 (also known as the beta) sometime in the next few weeks. And although many details of the upcoming operating system have already been revealed, a few new leaks suggest that the company has some radical new alterations in store for users.

Chief among these, possibly, is the loss of the Start button that long occupied the left-bottom corner of the Windows desktop. According to The Verge, which cited anonymous sources “close to Microsoft’s Windows 8 development,” the Start button that first appeared in Windows 95 is gone, having been replaced by a “hot corner” and a “thumbnail-like user interface” that offers previews of “where you will navigate to after clicking on the new visual element.”

Either touch or mouse input will activate this new interface. In contrast to past versions of the operating system, Windows 8 will feature a start-screen of large, colorful tiles linked to applications—the better to touch, in the case of tablets. Users will also have the option of flipping to a more traditional desktop interface. 

Through its official channels, Microsoft also provided some additional details about Windows 8. According to the company’s Building Windows 8 blog, the beta will feature the ability to “easily pin your favorite folders to Start,” a minimized user-interface ribbon, and added hotkey information to the tooltips of relevant buttons.

Microsoft is actively tweaking Windows 8 in response to user feedback from the Developer Preview and its blog postings. It has also adjusted the copy operation to pause in the event of system hibernation or sleep, and included a new option to the conflict-resolution dialog over two files with the same name.

“By checking the box in the bottom left of the dialog,” read a Jan. 30 note on the blog, “you can filter out all files that match on name, size (down to the byte), and time (down to the granularity of the file system timestamp: 2 seconds for FAT, 100 nanoseconds for NTFS). The system will skip copying or moving these files.”

If Microsoft ends up releasing the final version of Windows 8 late in 2012, it will be exactly three years since it launched Windows 7, which became a monster seller and, for many users, eliminated much of the bad odor associated with the much-maligned Windows Vista. However, the success of Windows 7 could also work against Windows 8, if users feel they’re upgraded too recently to consider doing so again.

Reference Link: http://www.eweek.com/c/a/Enterprise-Applications/Microsofts-Windows-8-Heading-to-Consumer-Preview-With-New-Details-543187/?kc=EWKNLNAV02082012STR2

Microsoft to unveil Windows 8 on February 29

SAN FRANCISCO: Microsoft on Wednesday revealed plans to unveil a test version of its latest Windows computer operating software later this month. 

The US technology titan sent out invitations to a "Windows Consumer Preview" event to be held on February 29 at a hotel in Barcelona during a Mobile World Congress gathering in that city. 

Microsoft promised to release more information closer to the end of the month. 

The introduction of a test, or beta, version of Windows 8 to the public is expected to be accompanied by the opening of an "app store" stocked with mini-programs tailored for the next-generation operating system. 

In December, Microsoft began wooing developers for a February opening of its first Windows Store intended to feature third-party applications crafted for computers powered by the Redmond, Washington-based firm's software. 

It will take on Apple and Google in the booming market of fun, hip or functional programs built for smartphones, tablets and computers. 

Microsoft's fiscal second-quarter profit fell very slightly as lagging computer sales to cash-strapped consumers in the United States and Europe hurt its core Windows business. 

Microsoft's key Windows unit reported a 6 percent dip in sales to $4.7 billion. 


Reference Link: http://economictimes.indiatimes.com/tech/software/microsoft-to-unveil-windows-8-on-february-29/articleshow/11820943.cms