Welcome to the second blog where we talk about the main similarities and differences between the design guidelines of the Windows 8 and the Windows Phone platforms and what this means to designers and developers. In the first blog post we covered:
In this part we will take a deeper look at:
You can download the full series as:
high resolution pdf (~7 MB), or
low resolution pdf (~2 MB).
Selection in Windows 8 Selection in WP
In Windows Phone multiselection is available through checkboxes in the listbox. In Windows 8 selection and multiselection is available through cross-slide interaction.
In Windows Phone when the user enters the selection mode a contextual-dependent application menu is shown in order to provide commands for selected items. The same is in Windows 8.
In Windows Phone the application menu could be both the main navigational tool and command toolbar. When it is used for navigation it should be always visible. When it is used for operating on data the commands are changing depending of the data. But in the moment the user enters the page with the data set, the application menu should be visible and the commands available should be presented to the user. In Windows Phone Tasks the app menu is applied as command toolbar. The app menu in combination with inline command buttons forms a powerful and flexible toolset to help the user manages her data (i.e. tasks, projects, categories). In the case of Windows Phone Tasks we decided not to use the app bar for navigation – we have a lot of stuff going on in the app bar and we could not afford to mix two generally different actions (navigation and operation over data) in one place. I don’t recommend doing that at all.
Application bar buttons change depends on page or context
In Windows 8 application menu is displayed when the user swipes on the top or bottom edges of the screen and when the user selects an item as well as navigation menu. There should be difference in the commands showing in the two cases. In the first case – there is nothing selected; the commands shown should be the general for the application. For example in Tasks the two commands always shown are New and Sync. However because the app menu is not always visible and the user should make a gesture for it to display I recommend putting:
Application bar in case of no selected items
In the second case the commands shown depend on the item selected. In Windows 8 the app menu functions both as a contextual menu and as main application menu. I strongly recommend maintaining consistent positions for both general and contextual commands. For example in Tasks the general commands are on the right - close to the right thumb, and contextual commands are on the left - to left thumb. Take this as a rule of thumb (lots of thumbs here). It is one of the main principles in interaction design - to be predictable, to provide the user with commands where she expects them.
Application bar in case of one selected task from All tasks page
However because the app menu is not always visible and the user should make a gesture for it to display I recommend putting:
Now this is tricky. With the word critical I mean actions which are the most important thing to do with the user’s content. Our job as designers is to separate the most important things from the rest and to present them in a way emphasizing their important role. When we chose to use application menu for commands in the Windows Phone Tasks we separated the critical actions and put them as icon buttons in the application bar. The rest are menu items in the application menu. In this way we are sure that these actions are always visible. For example the critical actions with a task would be: completing a task, editing and deleting. The not so critical are: pin to start, do it today, and postpone a day.
Prioritizing actions in WP
The critical actions for the Windows 8 app would be the same as those in the Windows Phone with one difference. In Windows 8 we can’t use application menu, because it is not always visible. So we put the critical action buttons in the content. The rest of the actions are in the application bar.
Critical actions in Windows 8 above the task title – in the content area
Given that Windows Phone is only a touch interface device, the rules for touch in Windows 8 are the same. Microsoft has a comprehensive guide where everything you should know for touch is summarized. I’d like to make just one note – some of the measures there are given in pixels. You should have in mind that those pixels are calculated at default pixel density of a touch screen of Windows 8 device. In most cases the devices have different pixel density – for example Nokia Lumia 800 has 252 ppi, Nokia Lumia 900 has 217 ppi. These are mobile phones but we don’t know the variety of hardware and screens pixel density of all Windows 8 devices. So it is always better to measure in physical points like millimeters. It is hard thing to do only with your design software, that’s why it is very important to work with prototype on as many touch devices as possible.
If I have to summarize the most important thing in touch interaction, they would be:
Don’t forget to keep mouse and keyboard always in mind in Windows 8. Accessibility is among the most important features in your app, everything should have been achievable with mouse or keyboard too.
Microsoft advice is to use horizontal panning because it optimizes the available space usage and feels more natural on a landscape oriented device. But my opinion really is that it depends a lot on the type of content you have to present. Neither Metro principles, nor UX guidelines should be taken out of context and put in the application only in the sake of having them there. The designer role is to think and to make the decisions for what will be best for the users. It is better to compromise the principles than the user experience.
How can you not love Microsoft – to make the designer’s job more important than ever making at least two different application views to design! In Windows Phone only two orientations are available, Windows 8 features 4:
Absolute minimum. It is said that if you have to design only one view it should be the fill view.
Closest to the phone screen size. Snapped view is a resized app. You have to maintain state, context, and interactivity for your users. It is not mandatory to preserve all elements from the full view, but only those which will allow the user to complete all tasks having sense in such view and space. For example in Tasks we decided to make the layout simpler by showing only one of the available groups of items and switch between them with selector. Also there isn’t an app bar in snap view – only critical actions are left.
It is not mandatory, but it is better to have a solution for portrait orientation. With the amount of space vertically opened at least you should do for optimization is to rearrange the layout. Lucky that we have flexible grid system!
Live tiles are another direct illustration of a Metro principle – authentically digital. This means not to mimic the physical objects in the digital interface. The icon as a visual element does not give the user information in sense of what is happening with her data in the application. In contrast, the live tile is exactly for that – it could and should provide the user with persistent and dynamic updates of what is going down. For example in Windows Phone Tasks the live tile shows the number of tasks for today and on the back tile they are divided into due today and overdue (urgent) tasks. We decided this is what the user will care about when following the getting-things-done philosophy.
Windows 8 gives us more real estate for showing data: we can show not only the numbers, but the tasks names also.
Front and back of the live tile in WP
The live tile in Windows 8 showing even more information on different slides
Unlike live tiles toast notifications are for urgent updates that demands immediate attention from the user. In the current state of Windows Phone Tasks we don’t have such notifications – we use Microsoft reminder dialog for reminders. In Windows 8 Tasks there will be an opportunity (spoiler alert!!!) to share tasks and project between other users of the application. When other user shares a task to the current user of the application that is an update of an urgent matter and should be appropriate to introduce a toast notification.
Toast notifications for urgent updates
Telerik suite for building Windows 8 Metro-style apps is on its way. We’ll be sharing more details soon.
If you are interested join our Windows 8 early adopters club. You’ll be among the first to get access to our product, special product promotions and marketing opportunities for your Metro apps.
Visit this page to join
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.
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.
Subscribe to be the first to get our expert-written articles and tutorials for developers!