Android to WP7-Chapter 2: User Interface Guidelines

Date: Friday, June 3, 2011, 10:49:16 AM

Tags:

Table of Contents

Microsoft's Windows Phone 7 (WP7) uses a novel user interface called Metro. WP7 sets itself apart with its clean and simple design and emphasizes color and typography.

In contrast to the application-focused design of Android, WP7 uses an information-centric design. Instead of an array of application icons, the start screen of a WP7 consists of dynamic tiles that display critical 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.

WP7 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 instance shown below, aggregates your address book contacts and Facebook friends.

clip_image002

;

Designing the Application Interface

While WP7 and Android have different UI designs there are similarities in the core design principles. In both Android and WP7 you need to keep in mind the compact screen, lower CPU, limited memory and ability to have only one application and screen active at once while designing an application.

Similar Application Design Goals

Usability and UI design are not after thoughts, but are the primary goals behind applications on both the Android and WP7. Applications need to be simple and focus on key scenarios that most users care about.

Visual Elements and Direct Manipulation

Like Android, visual elements and direct manipulation of objects by touch are the key characteristics of the WP7 application. WP7 provides a complete set of UI controls designed for the phone that can be manipulated using touch.

WP7 utilizes the same set of core multi-touch gestures as the Android with similar semantics, these include: tap, double tap, pan, flick, touch and hold, pinch and stretch.

Implications of the Similarities for the Developers

For the most part, the application planning process is similar on both the platforms. While designing your WP7 application, you will focus on the same information that is critical to the user. Your key design principles from the Android application such as direct manipulation with multi-touch, the need for immediate feedback and aesthetic appeal, will still remain the same. The need for immediate feedback and aesthetic appeal remains the same.

;

Application User Interface Design

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

Unlike Android, WP7 uses very consistent UI controls, design guidelines and manipulations. For applications to provide a consistent experience, application interfaces on WP7 need to adopt the new Metro design guidelines, which provide clear and concise design guidelines for developers. Unlike Android, WP7 applications must be approved by Microsoft for adherence to these design guidelines.

XML and XAML

Android UI elements such as widgets and layouts may be specified using XML or created programmatically at runtime or both.

Windows Phone uses a similar design paradigm. Typically, you use Silverlight to develop WP7 applications. Silverlight uses XAML, a declarative language, to define the application UI. Extensible Application Markup Language, or XAML is an XML-based markup language used for visual representation of applications in Windows Phone.

While both Android and WP7 use XML based languages to specify the UI elements, WP7 UI design is much easier thanks to XAML support in WP7 design tools. Visual Studio and Expression Blend, the WP7 design tool, produce XAML code based on WYSIWYG design. That makes use of XAML much easier in WP7. Additionally, XAML directly represents object instantiation and execution and can be used for rich and direct interaction with resources.

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.

The following table shows the mapping between Android controls and corresponding WP7 Silverlight controls.

Android control

Windows Phone control

Border

Border

ButtonView

Button

AbsoluteLayout

Canvas

CheckBox

CheckBox

GridView

Grid

;

HyperlinkButton

ImageView

Image

ListView

ListBox

MediaController

MediaElement

;

MultiScaleImage

ViewGroup

Panel

EditText

PasswordBox

ProgressBar

ProgressBar

RadioButton, RadioGroup

RadioButton

ScrollView

ScrollViewer

SeekBar

Slider

LinearLayout

StackPanel

EditText

TextBlock

EditText

TextBox

MapView

Map

WebView

WebBrowser

;

Panorama

;

Pivot

TimePicker

Timepicker

DatePicker

Datepicker

ExpandableListView

;

Gallery

;

ImageSwitcher

;

Spinner

;

TableLayout

Grid Layout

TextSwitcher

;

ViewFlipper

;

ZoomControl

;

TabHost

;

SlidingDrawer

;

RatingBar

;

Toggle button

ToggleSwitch*

* ToggleSwitch and Datepicker/Timepicker control are part of the Silverlight for Windows Phone Toolkit available on Codeplex: http://silverlight.codeplex.com/releases/view/55034

As you can see, WP7 offers controls that correspond to almost all Android controls. While the look and feel is different, they provide similar functionality.

New Controls in Windows Phone 7

WP7 introduces a few novel controls that have no counterpart on the Android. Here are some of the examples:

  • A multi-scale image, with image data at various resolutions, is appropriate for allowing the user when zooming into a photo.
  • Panorama control is a multi-screen page spanning horizontally beyond the width of the phone. It allows a large amount of related information to be presented. The people hub is a great example of this control.
  • The Pivot control, shown below, is useful to manage views and display information that is logically divided in sections.

clip_image004

Notifications

Both Android and WP7 have notification services, but notifications play a key role in WP7. Windows Phone provides number of different means to show notifications to users - via status bar update, a dialog as a toast or live tile notifications.

Windows Phone sets itself apart with the live tiles that show critical information at a glance. Live tiles are used to display non-critical information without disrupting what the user is doing. If you are using status bar notifications in Android, you can use tile notification as a replacement in WP7 to show critical information.

The notification service also displays toast notifications that provide time sensitive information, such as an SMS. Toast notifications are shown for about 10 seconds and the user may choose to ignore them. These are the same as Android toast notification.

The following table shows the Windows Phone notifications that are closest to different Android notification mechanisms. While you may replace status bar notifications with Tile notifications, tile notifications provide much richer functionality. Additionally, tile notifications do not require user response.

image

Options Menu vs. Application Bar

In Android 2.3 and lower, the activity options menu is presented at the bottom of the screen. In WP7, such page or application menus are supported using 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. If you are using action sheets in your Android application, application bar menus give you similar functionality.

image

Comparing Windows Phone and Android Navigation

WP7 applications are a collection of pages. Like Android, the user navigates through pages using widgets such as buttons and links.

Like Android, on WP7 the Back button on the phone allows the user to navigate back between pages within an application. However, in WP7, the back button behaves much like the back button in the browser allowing the user to navigate across applications. For example, consider that the user clicked a link in the email application to launch the browser. With the back button, the user would return back to the email application. The Back button also closes menus and dialogs. As a developer, you should consider what the Back button means to your user and plan to override it appropriately. For example, you may decide to pause a game by using the Back button on the Phone.

The other two hardware buttons on the WP7 phone, namely, Search and Home, have fixed behavior. The Home button takes the user to the Windows phone main page much like Android. The WP7 search button, on the other hand, is only used to search the web using Bing.

Windows Phone Frame and Page Structure

Each WP7 application has a single frame, and it includes areas for:

  • A page where application content is rendered. This is the content where widgets or graphics are rendered.
  • A reserved space for the system tray and application bar. It also exposes certain properties, such as orientation to the application.

clip_image006

System Tray and Application Bar

On WP7, the system tray includes indicators for a variety of system-level status information such as connection status. The application bar includes the area for the most common application menus, which may include various data views or tasks.

clip_image008

Page Structure of Windows Phone Application

The following diagram shows the structure of a typical WP7 data-bound application, which resembles a navigation-based Android application.

clip_image010

When the user first starts the application, he or she is presented with a splash screen, designed to welcome the user, as well as to create the perception of fast response. Splash screens are usually an image file of the entire size of the display.

Usually the application starts with the home page, the main navigation page, with links for search, and other page widgets. 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, will have the content of interest example e.g., a list of all baseball teams. However, depending on requirement, the home page can also be the primary content page.

This is a possible application usage scenario:

  • A 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.
  • A user selects one of the baseball players and the application takes the user to the page with player statistics ("Gadget Details page"). The player statistics page uses controls such as textblocks, multi-scale images, or other multimedia using a MediaElement control.
  • A 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").

Application Templates

As opposed to Eclipse, Visual Studio provides a variety of templates for WP7 applications. While application structure needs to be set up manually in Android/Eclipse, Visual Studio templates create appropriate structure automatically. This makes it easier start developing WP7 applications.

image

You can choose the Windows Phone application template to either create an application with functionality similar to the view-based or the window-based Android application type. The XNA based games application template gives you functionality similar to an OpenGL-ES application.

Summary

In this chapter we looked at the similarities between the application design goals of the Android and WP7 platforms. When you plan your WP7 application, you will be able to leverage your existing work on Android applications.

Revisit the application interface design to make sure you are taking advantage of the WP7 metro design and Windows Phone interface guidelines. You will find that the WP7 offers a large library of controls and gestures that have close counterparts on the Android. This chapter also showed you the use of innovative controls like panorama and explored the use of live tiles in building an engaging WP7 experience.

Related Resources

To go deeper into the topic discussed, visit:

Other Resources that you may find useful:

 
blog comments powered by Disqus