Thread: Windows Phone Application Design Guidelines

Microsoft's Windows Phone (WP) uses a novel design system called Metro. When you take a first look at WP start screen and WP design concepts, you will find some differences compared to the Symbian Qt design you are familiar with. WP Metro concentrates on clean and simple design that operates quickly, surfaces new information automatically, integrates interactions directly with content and emphasizes on color and typography.

In contrast to the application and module focused design of Symbian Qt, WP uses an information-centric design. Instead of a dynamic and customizable array of application icons and shortcuts in Symbian Qt home screen, the start screen of a WP consists of dynamic tiles that display information at a glance to the user.

The tiles are dynamic and they continuously display the up-to-date status of the applications. For example, they show you the next appointment on your calendar or the number of new emails waiting for your attention. Users can personalize their phones by pinning the tiles that they care most about.

WP also introduces a new paradigm called hubs. Hubs bring related information together. There are six hubs: People, Pictures, Music + Videos, Marketplace, Office and Games. The People hub, in the picture shown below, aggregates your address book contacts and Facebook friends.

As a Symbian Qt developer you are well aware that the recommended application development framework in Symbian is Qt Quick. However, the Symbian platform has evolved over time so at the moment several applications and games still utilize Qt widgets, native Symbian frameworks & development guidelines and even customized components & design concepts. In this chapter, the comparisons between Symbian Qt and WP application design are mostly from the Qt Quick framework perspective.

General Application Design principles

Even though the newly introduced Qt Quick components brought more mobile device focused approach to Symbian Qt development, the cross-platform nature of Qt Framework adds a new dimension to application design on Symbian Qt compared to WP.

While the design of the WP application is different from that of the Symbian Qt, the core design principles are very similar. Common to application development in Symbian Qt and other mobile platforms, in WP you need to keep in mind the compact screen, lower CPU, limited memory and general challenges & possibilities of mobility while designing the applications.

However, usability is the primary goal behind application design on both Symbian Qt and WP platforms. The application need to be simple and focus on key scenarios that most users care about. See Symbian design guidelines and User experience Design Guidelines for Windows Phone for more information about general application design principles.

Visual Elements and Direct Manipulation

Similar to Symbian Qt, visual elements and direct manipulation of objects by touch are the key characteristics of the WP application. WP provides a complete set of UI controls designed for the phone. In Symbian Qt, Qt Quick components are optimized for small screen handheld devices whereas other Qt Framework UI controls are designed for cross-platform usage.

WP utilizes a large set of core single touch and multi-touch gestures including tap, double tap, pan, flick, 'touch and hold' and 'pinch and stretch'. WP touch gestures are semantically similar to the gestures supported in Symbian Qt. Visual and interaction design play a key role in developing successful WP applications.

WP application structure is based on a Silverlight page model where users can navigate forward through different views of content via links and move backward using the hardware Back button.

There are two definitions in the context of the Silverlight for Windows Phone page model:
•Page: a user-recognizable collection of persistent state containing information, memorable content or links
•Screen: a general UI screen such as a pop-up window, dialog box or splash screen that does not contain memorable content and is not a user-recognizable collection of persistent state.

Windows Phone Application Frame and Page

WP application visual structure consists of a frame and pages that are the core elements of Silverlight for Windows Phone page model. You can create as many different pages as needed to present the content in your application and then navigate between those pages using the frame.

A frame integrates with the Windows Phone look and feel to provide consistent appearance between applications. Each WP application has a single frame that contains:
•A page where application content is rendered. This is the content where widgets or graphics are rendered.
•A reserved space for the system tray/status bar and application bar, exposing also certain properties, such as screen orientation of the application.
Windows Phone application frame and page

Silverlight for Windows Phone page model has lots of similarities with the Symbian Qt Quick application view, thus making the transition to WP UI development easier. For comparison, the basic application view of Symbian Qt Quick application (illustrated in the screenshot below) consists of the following areas:
•Status bar (also referred to as system tray) displaying system status icons and feedback such as signal strength, battery life, Wi-Fi connectivity and system time.
•Content area reserved for application-specific controls and data. In full-screen view content area is the only mandatory view element.
•Tool bar containing a back button, a menu button and up to two additional buttons between them.

Application view using Qt Quick components

For further comparison between WP and earlier Symbian application views, the Symbian style application views consist of the following areas:
•Status Pane displaying information about the current application and about the general device status (such as signal and battery strength). Status Pane contains the title pane, context pane, navi pane, signal pane, battery pane, clock pane and the universal indicator pane sub-panes.
•Main Pane displaying the application content and state.
•Control Pane displaying the labels associated with the two soft keys providing navigation and menus.

Windows Phone Application Status Bar and Application Bar

In WP page model, there is a reserved space for the status bar and the application bar in the application frame top and bottom areas. WP status bar and application bar (see the picture below) have similar purpose and location to status bar and tool bar in Symbian Qt.

The WP status bar includes indicators for a variety of system-level status information. The user may interact with the status bar, as it updates to provide different notifications and keep the user aware of things that are important.

The WP application bar provides a place to promote and launch the most common application tasks. For the less common tasks, applications may include a single menu into the application bar.

When starting the application, the user is welcomed with a splash screen that is creating a perception of fast response and giving the user immediate feedback that the application is launching. Splash screens are fixed size image files. For indicating progress in application launching sequence, animated splash screens may be used.

Usually the application starts with the home page that is the main navigation page containing links for search, settings and other page widgets. Depending on the application requirements, the home page can also be the primary content page at the same time.

Consider an application that shows information about baseball teams and their players. The primary content page, marked as the widgets page in the above diagram, has the content of interest, for example a list of all baseball teams.

This is a possible application usage scenario:
•The user clicks one of the team links to visit the team details page ("Widget Details Page") which can provide multiple views. The team details page may employ a pivot control or panorama to display different views such as the team summary and the list of all players ("List of Gadgets Page") from that team.
•The user selects one of the baseball players. Access to player information is restricted so the user needs to give credentials ("Login Screen") before the application takes the user to the page with player statistics ("Gadget Details page"). The player statistics page uses controls such as text blocks, multi-scale images or other multimedia controls.
•The user can also use the search widget to search and directly access the team page ("Widget Details Page") or the player page ("Gadget Details Page").

While there are similarities in the design principles of the applications on Symbian Qt and WP platforms, pay close attention to the user interface of the application for WP. It is best to take advantage of the unique features and strengths of WP platform.

For the user interface to provide a consistent experience across applications, WP applications need to adopt the new User experience design guidelines for Windows Phone. Corresponding guidance to Symbian Qt Quick application UI design is provided in Symbian design guidelines. See Symbian^3 UI style guide for designing native Symbian^3 application UIs.

QML and XAML

Qt Quick utilizes declarative JavaScript-based QML user interface language to describe user interfaces and their behavior in terms of QML elements and QML documents. Similarly WP utilizes declarative XML-based XAML user interface language and XAML documents to describe application user interface and elements in it.

In Qt, QML document is instantiated by the Qt C++ application invoking the QML runtime. Similarly in WP, XAML acts as an instantiation language. XAML contains the actual code needed for UI and XAML document elements have a direct mapping to the Common Language Runtime (CLR) objects. Event handling and XAML control manipulation can be done using separate code-behind files written in CLR language (C# or VB.NET).

Common functionality

WP features a versatile application bar. The application bar can include up to 4 of the most common views or application tasks. You can also use application bar menus for additional context-sensitive tasks. In Symbian Qt you can use dynamic Qt Quick Tool bar to provide similar functionality i.e. menus and commonly used actions for applications.

The following table illustrates how device status information, navigation functionality and common operations are provided by different view elements in Symbian Qt Quick, native Symbian and WP applications.

;





Symbian Qt Quick


Symbian native


Functionality


Windows Phone




Status bar


Status pane


Information about device, titles


Status bar




Page title




Tool bar


Control pane and Tool bar


Navigation, Menus, Buttons for views or actions


Back button for back navigation




Tab bar


Navi pane




View and actions on Application bar


Symbian Qt Quick, Symbian native and Windows Phone view elements

Navigation

On WP, the user navigates forward by launching applications from the Installed Applications list or from a Tile on Start screen in addition to other means, such as tapping on a toast notification associated with an application. WP7.1 OS adds the ability to switch to a previously running application by pressing and holding the hardware Back button, in a similar fashion to Symbian Qt application switching mechanism through hardware Home/Menu button.

Typical Symbian Qt application consists of pages that can be navigated through using tabs, GUI controls, soft keys and tool bars. In Symbian Qt, hardware buttons are linked to soft keys that are displayed in Tool bar (in Control pane in native Symbian style applications). Soft keys can be utilized and configured to support common navigation functions, such as Back.

Typical WP application is a collection of multiple pages where the user navigates through different Activities using widgets such as buttons and links. On WP, the hardware Back button allows the user to navigate backwards through the pages of a running application or through the stack of previously running applications. The Back button also closes menus and dialogs. This WP functionality is similar to navigation using Back button in Symbian Qt Tool bar.

As a WP developer, you should consider what the Back button means to your user and plan to override it appropriately. The other two hardware buttons on the WP phone, namely Search and Home, have fixed behavior.

Controls and the Application Interface

The WP development tools and SDK include a rich collection of Silverlight controls that are designed specifically for usability and aesthetics. While you can create your own controls, it is best to use the standard controls wherever possible. These standard controls respond to theme changes and provide a consistent user interface.

There are some similarities and some differences between Symbian Qt and WP Silverlight controls. In Symbian Qt, the recommended GUI controls are Qt Quick componentsand the supporting QML elements.

Another option for GUI controls in Symbian Qt applications, Qt widgets, is still utilized on some applications. However, Qt widgets are not recommended for Qt mobile application development any more.

There are some fundamental differences in notification service design between Symbian Qt and WP. WP notification service design is more based on push-type of notifications whereas Symbian Qt is more focused on application and device level notifications. In Symbian Qt, push notifications from services such as Instant Messenger applications and Twitter can be added to applications using Qt Notifications API.

Compared to Symbian Qt notification service, WP is richer in features overall. Symbian Qt Quick provides only basic notification features for Symbian Qt applications. More advanced notification functionality is available through latest releases of Symbian Qt and native Symbian.

In WP notifications play a key role. Tile notifications are displaying informative application-centric notifications without disrupting what the user is doing. Symbian Qt doesn't have a match to WP tile notifications, non-critical general notifications are provided in Symbian Qt by universal indicators displayed as icons in the status bar.

Another notification mechanism in WP is toast notifications that provide time sensitive information, such as an SMS. The toast notifications are shown on top of the screen for about 10 seconds, but the user may choose to ignore them. In Symbian Qt, similar timer based notification is info banner, that is displayed on top of the active application.

Third notification mechanism in WP is raw notifications that are designed to be used in running applications and require user action. Similar notification mechanism in Symbian Qt is dialogs that contain textual information about the notification, buttons for accepting a user response and descriptive icons to reflect the nature of the notification.

Qt Creator provides a few standard project templates and allows creation of custom project templates for setting up basic Qt Quick and Qt applications. Visual Studio provides numerous built-in templates for WP application development to support application basic design, thus making your life easier.

You can choose the Windows Phone application template based on the functionality of the application you are developing. For example, the XNA-based Game application template gives your application a foundation to provide game-like features and media such as OpenGL ES graphics.

Summary

In this chapter we looked at the similarities and differences when designing applications for Symbian Qt and WP platforms. When you plan your WP application, you will be able to leverage your existing work and programming logic from Symbian Qt Quick applications.

In addition, we compared the general structures and concepts in Symbian Qt and WP application user interface development and introduced the WP Metro design that uses WP interface guidelines. You also found out that the WP Silverlight offers a large library of UI controls and gestures that have some counterparts in Symbian Qt platform.


WindowsPhone7 - Qt to WP7 - Chapter 2: Windows Phone Application Design Guidelines