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
No comments:
Post a Comment