Telerik blogs

A lot of the Windows Phone developers out there are already considering porting their Windows Phone apps to Windows 8. May be you are thinking: from Metro to Metro - it has to be pretty easy and straightforward, doesn’t it? Let’s see if this is true.

This case study gives insights into porting the design of an existing Windows Phone app to a Windows 8 Metro app. It discusses the main similarities and differences between the design guidelines of the two platforms, what can and cannot be reused.

User Experience Design Guidelines for Windows Phone

User Experience Design Guidelines for Windows 8

For the purposes of the case study we are using Tasks - a free Windows Phone todo lists app with more than 100,000 downloads. The app was created by the Telerik Windows Phone team as a showcase of our UI components for Windows Phone. It started originally with an app called ToDoLists, which is meant to serve as a learning material for Windows Phone developers (the source code is freely available and can be downloaded from here.

We will touch upon all the key design patterns and processes that are part of a Metro app and comment on what makes Windows Phone and Windows 8 similar and different:

This is the first part from series of two blog posts where we will talk about the design process and layout and navigation. You can download the full series as:

pdf filehigh resolution pdf (~7 MB), or

pdf filelow resolution pdf (~2 MB).

The second part of the series is here.

Design process

Before we even get to the rough design concept, no matter which platform we are targeting, we start with research, thinking about what users need and analyzing existing applications across all mobile platforms. In our case we had the initial information architecture sorted out in Tasks for Windows Phone. On this solid base we started improving it and make it work for all the screen sizes.
This is how the low fidelity wireframes looked at this phase – sketches of ideas, different pages of the application which formed the application flow and the early paper application prototype. The next step was increasing the wireframes fidelity and transferring them from paper to file.

 Paper wireframes

Paper wireframes

The developers participated in every step of the design process, helping with ideas and technical knowledge. They started working on the prototype of the app simultaneously with me working on the visual design. This does not mean that my job was done once the visual design is delivered – on the contrary. A serious designer input was needed when all the functionality was put together. Only then, especially with touch, we can be sure everything is in the right place, the interaction is consistent and feels natural. Stick to the agile best practices and have as many iterations as needed with the developer team and your testers, if you have such.

My advice is to start working on the device as soon as possible. Once you’ve started working on the device don’t be afraid to make all the necessary changes in order for the app to work at its best. And remember, do not fall in love with the design or the feature which just won’t work.

Application flow diagram  Application flow diagram

Application flow diagram – one of the deliverables at the end of the design process

Layout and navigation

The Layout and navigation model of Windows Phone and Windows 8 are very similar and different at the same time. Let’s first look at some of the things the two platforms have in common:

1. Navigate through content

Content not chrome is one of the essential Metro principles and it applies to both the Windows Phone and the Windows 8 Metro app: they have the same hub and spoke navigation models. Here they are:

1.1. Hub page – or the home page of the application from where the user reaches the rest of the application content. The goal of the hub page is to show the variety and richness of the content the application provides. It is like a magazine created for the application. In Tasks we show excerpts from due tasks, projects and categories.

Tasks hub page for Windows 8

Tasks for Windows 8 hub page

 Tasks hub page for Windows Phone

Tasks for Windows Phone hub page

1.2. Section pages – these are pages with identical content type. For example All Tasks page.

Tasks section page

Tasks for Windows 8 section page                              Tasks for Windows Phone section page

1.3. Detail pages – the name speaks for itself – a page that show the details of a single item.

Tasks details page

Tasks for Windows 8 details page                         Tasks for Windows Phone details page

Now let’s examine the differences between the Windows 8 and Windows Phone design patterns.

2. No hardware back button in Windows 8

Back button in Windows 8

Software back button in Windows 8

Windows 8 has no hardware back button as opposed to Windows Phone, which results in the need for a back button in the page heading or navigation bar. The back button takes the user back where she came from and all pages but the hub page should have it.

In Windows Phone the Backstack is very important – this the list of pages/steps user went through till the current moment. The Backstack should be carefully managed – the user must not get lost in the application, fall into traps, loops, and phantom pages, because only in that way she will thrust the application to get her back where she wants.

I will give you an example for that. In Tasks for Windows Phone it is possible to pin a task (project, category) to Start menu. When the user taps on pinned task a details page is opened. To continue browsing in the application the user should tap on the home button close to the logo. When the user is in the home/hub page the details page is removed from the Backstack. The reason is to fulfill the requirement for publishing apps in the marketplace - when the user is on the home page and hit the back button she should go back to start.

In Windows Phone the user navigates through the app by tapping on the content items and application buttons, and goes back with the back button.

In Windows 8 the user has more opportunities to choose her way.

3. Navigating with the edge swipe

Swiping from the edge of the screen is what makes the app bar and navigation bar to appear. The Navigation bar provides global navigation controls - it shows on every page and provides consistent navigation experience. The Navigation bar in Tasks for Windows 8 is one of the main differences from the Tasks for WP. We chose to use it as addition to the already implemented navigation model because of the confidence it gives to the user to go everywhere she wants from any page of the app.

Navigation bar in Windows 8

Navigation bar

4. Page filters and sorts

The pivot control is the Windows Phone way to manage views and pages within application. It is used for filtering the content, viewing multiple data sets or switching views. In Windows 8 the pivot control is replaced with page filters and sorts. It is pretty much like traditional tab pattern.

Tab design pattern in Windows 8

Tab control in Windows 8                       Pivot control in Windows Phone

5. List menu navigation. Filter menu.

This is the advantage of the bigger screen – to have a menu which is made from items of certain type alongside the detailed page of the selected item. Even better, instead of making this menu list long and unreadable, there is a filter available on top to help for easier access to the desired information. This is almost impossible on the smaller phone screen – to have both the detailed information and the available other choices on same place. It is not applicable in all cases, but in our Tasks app it was more than welcome.

List menu for navigation

List menu with filter in Windows 8

6. Horizontal/vertical scrolling

The other significant difference between Windows Phone and Windows 8 is the way of handling the scrolling. In the Windows Phone panorama control there could be both horizontal – within the panorama, and vertical – within the listboxes in the panorama. In Windows 8 this situation is not recommended. There could be only horizontal or only vertical scrolling. The reason for that is the cross-slide interaction – sliding the finger a short distance, perpendicular to the panning direction to select an item. There should be consistency of the selection interactivity within single page – that’s why the panning direction should be only horizontal or vertical.

7. Semantic zoom

Semantic zoom in Windows 8

Semantic zoom on the home page

Another element that needs to be designed in Windows 8 is the semantic zoom - a quick way to zoom out to groups of content and jump to the desired one.

8. Settings, sharing, about, feedback, search - with charms

Windows 8 provides for a special place to put all these pages and they are neatly organized. They are called charms and are just an edge swipe away. I must admit that in Windows Phone Tasks these pages are not so well organized but in Windows 8 they will be.

Feedback flyout

Feedback flyout

 

Tasks for Windows Phone is available for free on the marketplace. Check it out here

Tasks for Windows 8 is on its way and we will let you know once it’s live.
Tasks for Windows Phone is built with RadControls for Windows Phone – UI components and building blocks for building Windows Phone apps. Read more here and download a free trial.

Stay tuned for part two where we will take a look at commands and actions, touch, orientation and views, notifications and live tiles and Telerik upcoming Windows 8 suite!


About the Author

Nina Zayakova

is UI & Interaction designer in Windows Phone team in Telerik since the early days of the new Windows Phone (and later Windows 8) style UI. She thinks that Microsoft "modern" UI has a lot of possibilities yet to be invented and its full power yet to be revealed. She strongly believes that user experience should never be compromised in any circumstances. You can read more from Nina on Twitter at @myninka.

Comments

Comments are disabled in preview mode.