Design Case Study: iPad to Metro style app

Article: Source

iOS is a popular platform for creating apps that are touch first, fun, and engaging. With the introduction of Windows 8, 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 the design principles for Metro style apps. 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 the design principles for Metro style apps.

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.

Download this article: To download this article, see Offline version of this article.

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 the Metro design style.

1. Layout and navigation2. Commands and actions3. Contracts: search, share, and others4. Touch5. Orientation and views6. 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.

For more information about navigation in Metro style apps, see Navigation design for Metro style apps.

iPad app

A. Top navigation barB. App contentC. Pagination UID. 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 viewB. 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 apps)

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 anytime.

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 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. 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.