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.

Mobile First Responsive Web Design

Mobile First Responsive Web Design from UIEpreviews

The 11th Principle of Good Design

Article: Source

I talk about Dieter Rams a lot. Partly because his (at the time) humble and understated work now defines the visual language of Apple’s entire product line, and partly because products he designed 52 years ago are still being made today. I mean, what the actual fuck is up with that.

Vitsoe 606 Shelving system, designed in 1960 by Dieter Rams. They still make them today, and to the same spec.

In 1970, Rams decided that he needed a way to objectively assess whether his work was “good design.” No such metrics existed, so he created the now world-famous Ten Principles of Good Design:

• Good design is innovative
• Good design makes a product useful
• Good design is aesthetic
• Good design is understandable
• Good design is unobtrusive
• Good design is honest
• Good design is long-lasting
• Good design is thorough
• Good design is environmentally friendly
• Good design is as little design as possible

Though originally created to objectify industrial design and physical products, interaction designers have recently begun to apply the principles to their own work. It translates brilliantly, and I use them constantly while I’m designing for web, desktop, and mobile. It’s an inflexible and industry-proven benchmark and it feels awesome to have that in my toolkit.

There is, however, one flaw. These guidelines were created over forty years ago, in a world where interaction design, UI, and UX didn’t exist. They don’t take into account lean startups or software that is constantly changing. I mean, Facebook pushes new code to production at least twice a day..

Most print design projects have a defined completion point… it’s not like you can go back with a Sharpie and correct 20,000 posters. Even physical products rarely receive updates mid-cycle – if something could be better, it’ll be in “next year’s version.” This doesn’t work for software anymore, and we need to make sure we’re thinking about that when we design.

We need another Principle of Design. Something that takes into account interactive software, short product cycles, and effortless distribution.

Good Design is iterative

Software products grow with companies and users, and get better over time. Iterative design is flexible, agile, and reduces the friction associated with growth and change. The designer’s job is crucial from day one, and their work is never done.

I’ve been a part of several design projects that flopped because we weren’t thinking about this. The “agency mindset” is also to blame. Once the project is ‘done’ the designer delivers assets and get paid. From then on, the startup can put them on retainer or hand off the project to the in-house designer – or the… engineers.

Everything falls apart when the startup needs to A-B test, or add a new feature, or iterate on what they’ve got. The layout is fixed, complex illustrations or visual assets were made by someone they don’t have access to, and don’t even get me started on fonts. They’re going to end up using Arial… come on. You know it happens. Ugh.

For websites and huge companies, this is ok. They’ve got the money and manpower to work past these problems. They also don’t iterate too often. You’re not at a big company, and you’re likely the only designer on the team. You can’t afford to not iterate on design just as fast as the engineers are on code. It’s integral to the product, and it needs to happen from day one.

In most people’s vocabularies, design means veneer. It’s interior decorating. It’s the fabric of the curtains of the sofa. But to me, nothing could be further from the meaning of design. Design is the fundamental soul of a human-made creation that ends up expressing itself in successive outer layers of the product or service. –Steve Jobs

So how can we do iterative design? Many people are doing it already.

1. Responsive web

Responsive HTML / CSS layouts make it easy to create mobile and desktop friendly web applications. Branch.com is doing an awesome job with this right now – every few days I notice a subtle change here and there. Those changes affect the entire product, not just the desktop or mobile version. It helps them work faster and create a great experience across platforms.

2. Less, but better

Less noise, fewer icons, fewer lines and shapes. One of my biggest challenges is removing complexity from products like Kicksend and keeping only the essentials. Products like Google search are great at this. For the entire lifetime of the Google.com page, it’s been minimal and focused. You know exactly what to expect when you go there, and what Google enables you to do. At the same time, it’s simple and flexible enough to allow Google to create amazing Doodles and advertise their new products.

3. Ship every day

This is a mantra that takes some practice and dedication to adopt. I was introduced to this way of thinking by Allison House, and it’s alive in many startup designers. A designer’s work should never go stagnant, and it should always be open to improvement. User experience research, customer feedback, and new learning should always be happening, and you should always be growing as a designer.

Make awesome stuff. Ship design every day. Remember Dieter Rams’ Ten Principles of Good Design, and keep iterating.

Article: Source
Microsoft’s Brand Unification. My honest opinion is this just lacks style and passion.

Old Spice has the best creative minds in the business. Period. 
Old Spice Muscle Music by Terry Crews. Watch me jam solo, then use the special interactive player to record your own remix. Go ahead, show me what you got! 

Design Principles: The Philosophy of UX

Design Principles: The Philosophy of UX from Whitney Hess

The visual principles of harmony, unity, contrast, emphasis, variety, balance, proportion, repetition, texture and movement (and others) are widely recognized and practiced, even when they aren’t formally articulated. But creating a good design doesn’t automatically mean creating a good experience.
In order for us to cultivate positive experiences for our users, we need to establish a set of guiding principles for experience design. Guiding principles are the broad philosophy or fundamental beliefs that steer an organization, team or individual’s decision making, irrespective of the project goals, constraints, or resources.

Designing Beyond The Device

Designing Beyond The Device from Ud

Interaction Designers need to focus on creating cultural patterns, not screens. How do we do this? We have to understand how meaning gets made in a world of device fragmentation.

DeltaZone at Madison Square Garden. Delta Air Lines’ Touch the Future of Travel and a newly refreshed yet still iconic Madison Square Garden is here. A personalized, curated way for travelers to discover new destinations, collecting content from around the globe and enjoying fantastic vistas that transport them into the magic of destination travel and discovery.