Design case study: iPad to Windows 8 Metro style app

[This documentation is preliminary and is subject to change.]

iOS is a popular platform for creating apps that are touch first, fun, and engaging. With the introduction of Windows 8 Consumer
Preview, designers and developers have a new platform to unleash their creativity.
In this case study we want to help designers and developers who are familiar with iOS to reimagine their apps using Metro style
design principles. We show you how to translate common user interface and experience patterns found in iPad apps to Windows 8
Metro style apps. We draw on our experience building the same app for the iPad and for Windows 8. We use common design and
development scenarios to show how to leverage the Windows 8 platform and incorporate Metro style design principles.
To learn more about the business opportunity of Windows 8, see Selling apps. For more info about the features used to build Metro
style apps, see the Windows 8 Product Guide for Developers.

Contents
The app ................................................................................................................................................................................................................. 2
Layout and navigation ........................................................................................................................................................................................ 4
Commands and actions .................................................................................................................................................................................... 13
Contracts ............................................................................................................................................................................................................. 17
Touch ................................................................................................................................................................................................................... 26
Orientation and views ....................................................................................................................................................................................... 30
Notifications ....................................................................................................................................................................................................... 33
About the authors ............................................................................................................................................................................................. 37

The app
The app we are developing is a connected photo journal where users can view and manage their photos and videos online using a
timeline view.

The app was first created for the iPad. The next figure shows the anatomy of the iPad app. Let's now see how each component
translates to Metro style design.

1. Layout and navigation

2. Commands and actions
3. Contracts: search, share, and others
4. Touch
5. Orientation and views
6. Notifications

Layout and navigation

Focus on content, not chrome
The Photo journal app needs to be great at showing user's photos and recent social activities for those photos. When creating the
Metro style app, our first goal was to remove all UI elements that were not directly relevant to the core functionality of the app. For
example, the top navigation bar, pagination controls, and the bottom control bar can all be removed. In the next section, we talk
about how users can bring up chrome when needed using the app bar.

iPad app
A. Top navigation bar
B. App content
C. Pagination UI
D. Bottom tab bar

Metro style app

B. App content and logo

Example: timeline view on the home screen

Both apps show photos on their home screens organized by month, but how the month is represented is quite different. In the iPad
version of Photo journal, the page is optimized to display all 12 months in a year with a stacked photo metaphor used to represent
each month. When designing the Metro style app home screen, we chose to bring more pictures and social content to the top level,
to provide users more context. We removed borders from the pictures and instead used whitespace to provide more visual focus to
the photos, which are the focal point of the app.

iPad: each month is represented by stacked photos with only one photo visible.

Metro style app: each month is represented by multiple photos, their titles, and the number of comments associated with the
photos. Users can see more highlighted content for a month on the home screen.

Flatten the navigation hierarchy

We used the hierarchical navigation pattern in the Metro style app design. When redesigning the app, we flattened the navigation
hierarchy so more content is accessible via the app's hub screen, eliminating the need for navigation.

Example: removing bottom tab bar

iPad app
A. Photos view
B. Comments view
The bottom tab bar with two pivots (photos and comments) is always on screen. Users can see one view or the other.

Metro style app

We combined the comment and photos in one view to eliminate the need for a tabbed user interface.
The hub design for the home screen reveals the most relevant content for each section.
To see the entire list of comments, users can tap on the group header labeled Recent comments.

Use direct manipulation to navigate

Direct manipulation allows users to interact with content and navigate to different areas naturally. When designing the Metro style
app, we used direct manipulation whenever possible, using built-in controls like Semantic Zoom, which lets users navigate more
efficiently.

iPad app
On the home screen, tap on the Years button on the top navigation bar to bring up a popover and select a year.

Metro style app

On the home screen, pinch two fingers to zoom out and see all the months and years. This way users can jump to any month in any
year quickly. Users can also see an overview of which months have photos and which don't (faded red background). Users can
navigate entirely by manipulating the content without using chrome or navigating to a different page.

Commands and actions

Keep app contextual actions in the app bar
When redesigning contextual actions or commands in the app, we again followed the "content before chrome" approach and made
all contextual actions available via the app bar control. Frequently used commands are near the right and left edges so that they are
easy to reach by hand. This way the app design surface isn't cluttered with controls, and no matter where a user is, they can swipe the
app bar from the bottom or top of the screen to see relevant actions. All Metro style apps can use the app bar for their commands.
Because users will be familiar with app bar interactions, it also increases the usability of our app and makes the whole system feel
cohesive.

Example: deleting photos

iPad app

App commands are on the top of the screen when a user enters the selection mode.

Metro style app

A. The app bar is hidden by default to provide users the immersive experience. A user can swipe from the bottom or top of the screen
to open the app bar.

B. When a user selects objects on the page, contextual actions for the selected items appear on the bar. The actions change
depending on whether there are objects selected and where the user is in the app. Global commands are usually placed on the right
side of the app bar. Commands that come and go should be placed on the left side of the app bar.

Contracts
Use Search contract to centralize the search experience
Instead of creating a search input interface that is permanently part of the app canvas, we implemented the search contract. Users
can consistently invoke Search through the charms, and the results can be presented in the app in a way that is natural for the
content. By using the Search contract, users can invoke the Search charm from anywhere in the system to look for content from apps
that support the contract.
Example: searching a photo within the Photo journal app

iPad app

Search is available within the app on the home screen.

When a user types a search term, results start to appear and the user can select a result.

Metro style app

The user opens the charm bar and accesses the Search charm. The Photo journal app is selected by default because the user is
currently inside the app.
When the user starts typing, the app supplies search suggestions to the pane. This way users can quickly see which terms will
generate search results. After the user submits their query, they see a search results view and select the result they want.

Example: searching for a photo outside of the Photo journal app (available only in Metro style app)
This example shows how to search for a term across different apps by choosing a new app via the search pane. This functionality
allows users to search for any piece of content, in any app, at any time.

Metro style app

A user searches for the term "Barcelona" in the Tweet@Rama app and wants to look at photos of Barcelona using Photo journal.
Photo journal is now the search results provider. The app launches automatically and displays the search results. The user doesn't
need to launch the Photo journal app and then perform the search.

Use the Share contract to reach more destinations and people you care about
Social media integration is a key component of most apps. When designing iPad apps, designers and developers generally choose
which social media channels the app supports (such as Twitter or Facebook) and then the developers must integrate each of these
services individually, or use one of the available frameworks. When there are API changes to these sharing services, developers must
update their code for the sharing services to continue to work.
When translating the sharing capability into the Metro style app, we used the system's Share contract. This contract simplifies design
and development because there is no need to connect with every service that a user might want to use. In addition to social
networks, users can also save content to other services, such as a note taking app like Notespace or EverNote. Using just a small
amount of code, our app becomes connected with every Metro style app that has implemented the Share contract. There's no need

to deal with API changes to external social networking sites or web services. From the user's perspective, they can always share from a
consistent location by accessing the charms bar and opening the Share pane.
Example: sharing a photo in Photo journal with another app

iPad
To share a photo from the iPad Photo journal app, a user first taps the action button from the top navigation bar and then chooses to
share on Facebook. The developer needs to do additional work and add more share buttons if they want to integrate with other
social networking services later.

Metro style app

Users can always find share options in a consistent location, regardless of which app they're using.
Any installed app that has been designated a share target appears in the app list in the Share pane. For example, Socialite,
Tweet@Rama, Notespace, PaintPlay, are all share targets.
Users can share a variety of content types. For example, users can share links, photos, or save info to a note-taking app.
The most frequently used share targets are displayed at the top of the list to help users complete tasks quickly.

In addition to being a share source, we designed our Photo journal app to be a share target too. Users can easily share photos from
another app to their photo streams in Photo journal. This connection is also enabled by the Share contract. See Guidelines and
checklist for sharing content for more info about which apps make great share targets.
Example: sharing photos from another app with Photo journal share target (available only in Metro style apps)
In this example, a user in another photo app looks at photos from a trip to Mexico. They want to share the photos from the album
with their own Photo journal app collection so that it is easier for them to view these photos in a timeline view. As the user opens the
Share pane, they see that the Photo journal app is listed as one of the Share targets and then invokes the Share workflow.

Use file picker to access files from various locations

File picker is a full screen dialog that lets users access files and folders located on the local PC, connected storage devices, or a
HomeGroup. It can also access items from apps that participate in the File Picker contract.
Example: uploading a photo from the local file system

iPad app
The iPad app supports accessing photos in the local photo library and a couple of social networking services.

Metro style app

A. The user taps the Upload button in the app bar and the File Picker UI opens. This is a consistent UI surface that the user
sees whenever they want to access files.
B. Tapping the Files header, the user sees a flyout of all available file locations and navigates to a file folder.
C. The user selects multiple photos from the folder and a list of thumbnails at the bottom left showing the selected photos.
Example: using a photo from Photo journal in another app (available only in Metro style apps)
We also take advantage of a feature that's unique to Metro style apps and add support for picking photo content from Photo journal
within another app. This saves users the step of first downloading photos from Photo journal to the local file system and then
uploading the photos to another app. Photo journal implements the File Picker contract so the system recognizes it as a file storage
location.

Metro style app

A user is on the PC Settings screen and taps Browse to customize their account photo. Because Photo journal implements the File
Picker contract, the user can see that the app is available to access in the file directory. The user can then select a photo stored in
their Photo journal collection.

Touch
Edge swiping for app and system commands
Using Windows 8, a user can swipe from edges to access commands and navigate between apps.

App commands are revealed by swiping from the bottom or top edge of the screen. The app bar should always be used to
display app commands.
Swiping from the right edge of the screen reveals the charms bar that contains system commands.
Swiping from the left edge switches to previously used apps.
Swiping from the top edge toward the bottom edge of the screen lets you dock or close apps.

Example: accessing the app bar and the charms bar in a Metro style app

Swipe from the bottom or top edge of the screen to

access app commands.

Swipe from the right edge of the screen to reveal the charms bar that
contains system commands - Search, Share, Start, Devices, and Settings.

Cross-slide to select objects

With Windows 8, a user can slide their finger a short distance, perpendicular to the panning direction, to select an object in a list or a
grid. When objects are selected, the app bar is revealed, automatically showing relevant commands.
Example: selecting multiple photos to delete

iPad app

Users enter a specific edit mode to perform the selection action and other edit actions. This is because tap is reserved for
primary actions such as launch.
Users exit the edit mode when they are done.

Metro style app

Users swipe down on the object to select and the app bar shows up automatically with contextually relevant commands.
Users can perform both tap and selection on an object without entering and exiting another mode.
This gesture is reversible, which makes selection a lot more efficient in Windows 8 apps.

Pinch and stretch to semantic zoom

While the pinch and stretch gestures are commonly used for resizing in both iPad and Metro style apps, in Windows 8 they also
enable jumping to the beginning, end, or anywhere within content using Semantic Zoom. Semantic zoom enables the user to zoom
out to see data in related groups and provides a quick way to dive back in. Instead of providing navigation for reviewing long lists of
content, use semantic zoom when possible for this type of interaction. Of course, when a user is viewing a photo in full screen mode,
pinch and stretch can be used for optical zoom.

Example: semantic zoom on home screen and on a month spoke page

Metro style app

A. Semantic zoom on the home screen lets users jump to a particular month in any year quickly.
B. Semantic zoom on a month view spoke page lets users jump to a particular day and also provides an info graphic detailing
how many photos are available from that year.

Orientation and views

Design adaptive layout for orientation and screen sizes
An iPad app has a fixed screen size and resolution with two orientations that designers need to consider. Windows 8 runs on various
form factors, from portable tablets to all-in-one desktops. As a result, you can use additional screen space to show users more
content. When redesigning the Photo journal app, we considered how the app would look in two device orientations, taking into
account screen resolutions and device sizes. The grid layout makes it easy to scale the design for both portrait layout and high
resolution screens. For example, we include more highlighted photos in each month when there is more vertical space available.
Example: home screen design in landscape, portrait and large screens (Metro style app only)

iPad app
The same content is shown in both landscape and portrait layout. The content reflows in portrait orientation.

Metro style app

The app shows more content in each section on the hub page in portrait layout and larger screens, using extra space. Similar to
creating images for an iOS retina display, we created multiple images for different Windows scaling percentages-- 100%, 140% and
180%. These images are loaded automatically on HD tablets.
Use snap view to engage your users
Windows 8 lets users multitask by "snapping" an app next to another app. The snapped view is a great way to increase the app's time
on screen and engage users for longer periods. It's easy for a user to change the main app and the snapped app by manipulating the
splitter between the two, so it is important to maintain context across resizes. We don't want users to lose app state as a result of
resizing their app.

Example: home screen snap view

Metro style app

The snap view of the home screen is just a different view of the home page where a user can still access the same content.
In snap view, a user pans vertically to get to more content because it is more comfortable to pan along the long edge. This is
different than the horizontal panning in full view, which is also optimized to pan along the long edge.

Notifications
Use tiles for persistent and dynamic updates
iOS 5 introduced a notification center where new notifications appear quickly on the top of the screen and users can swipe from the
top to view all messages in the center. In addition, app icons in the iOS Springboard can have number badges attached to them to
indicate that there are new messages. The tiles on the Windows 8 Start screen combine the functionality of both numeric badges on
app icons and the Notification Center on an iPad. Users can launch apps and read notifications all from one place. In addition, unlike
the notifications in iOS which have a fixed format, Metro style appMetro style app tiles have a rich collection of templates for
designers to choose from.

Example: notifications on the home screen

iPad
A. App icon with numeric badge on iPad Springboard.
B. Notification center with Photo journal notification.

Windows 8
C. Tile on the Start screen with both numeric badge and notifications that users. Many tile templates are available.

Use toasts for transient and important notifications

You can use toast notifications to notify users of events in real time. Unlike tile updates that are passive, toast notifications in Metro
style apps are important updates that interrupt users. They show up on the top right of the screen and can appear anywhere in the
system. Generally, it's best to let users opt-in to notifications during their first run of the app. If applicable, show recent toast
notifications on tiles while they are still relevant. Toasts are similar to the iOS transient alerts displaying as banners at the top of the
screen. But designers can choose from a collection of toast templates to make their notifications more relevant.

Example: Photo journal notifies users when they receive a comment from a family member

User is set up to receive toast notifications when a family member has commented on photos in the app.

About the authors

Bart Claeys is the Lead User Experience Designer at Ratio Interactive, and specializes in UI/UX for web and
mobile apps. Previously he worked as an Interactive Art Director for Saatchi & Saatchi Brussels, where he
created interactive campaigns for Toyota, Sony, and several other international brands. Bart holds a Master's
degree in Product Development, and obtained additional training in brand management. He's the founder
of Creativeskills.be, the leading creative job board in Belgium. In 2006 Bart won the "You are Flanders
future" award, established by the Flemish government to promote entrepreneurship.

Qixing Zheng is a User Experience Program Manager at Microsoft. She is part of the team that created the
Windows 8 user interface and has been helping designers to learn about Metro style design. Her passion is
deeply rooted in helping people improve their user experience with the technology they rely on every day.
Before joining the Windows team, Qixing worked as the first UX advisor at Microsoft Canada where she
spoke at universities, design communities, and companies about Microsofts investment in UX. She also
worked at identifying design heroes and collecting design stories from the community.