Windows Phone Design Principles

.Microsoft User Interface

Microsoft Platforms, Fair Use

Microsoft Design Language

"Microsoft is using its new design principles to create a familiar experience for many of its product offerings."

  • Microsoft Design Language contains design principles which were used in Windows Phone and Windows 8. For a period of time Microsoft was referring to the design language as "Metro". Rumors site a potential lawsuit from the Germany company Metro AG as the reason for the name change. However the official reason given for the name change was that "Metro" was just a code name used during development.

  • Microsoft Design Language stresses a user interface with clarity, readability, simplicity, and consistent motions. It uses large controls designed for touch screen usage, consistent and adequate spacing between user interface controls, flat colors (instead of gradients), and rectangular user interface elements called Live Tiles.

  • Design Language of Windows Phone are tutorial videos which explain the guiding principles of Windows Phone design language as:
    • Light and Simple - focus on primary tasks with white space and simplification of interaction.
    • Typography - right balance of weight and position can create a visual hierarchy. A specially made version of Microsoft’s Segoe font family, Segoe WP, is used as the main font family for all typographical elements.
    • Transitions - consistent set of user motions provides context for usability. Appropriate use of the pivot and panorama transitions.
    • Content, not Chrome - content becomes the main focus. Especially relevant with Windows Phone because of smaller screen size and touch interactions.
    • Honesty - design with the form factor of a hand-held device in mind. Design simplified user interactions.
  • Windows Phone Design outlines the Windows Phone design process into five distinct stages:
    1. Concept - "At this stage, you should determine not only what your app will do and who it's for, but also what your app will be great at."
    2. Structure - "By planning how your content will be organized — and how your users will discover that content — you can get a better idea of how your app will feel to users."
    3. Interaction - "This will be accomplished in many ways, like using wire frames to sketch out your page flows (how you get from one place to the next within the app), and thinking about your app's voice and the words you need."
    4. Visual - "Let the content guide the look and feel; don't let the look dictate your content."
    5. Prototype - "Making great apps is a revisionist process. We recommend that you prototype early and often."
  • Examples of Microsoft Design Language guidelines for the user interface include:
    • Minimum font size of 15 points.
    • Touch targets (eg. buttons) should be at least 9 mm square.
    • Controls should be separated by a space, instead of next to each other.
    • Button labels should no more than two words.


.Windows Phone Design Concepts

Windows Phone, Fair Use

Windows Phone Design Concepts

"The User eXperience (UX) is all-inclusive and involves the app's design, technology, usability, expense, and reliability."

Windows Phone User Interface
  • Windows Phones are designed to provide a consistent user interface framework, consisting of the following
    1. Splash Screen - is typically displayed while the application loads. However in WP 8.0 the code processing has been greatly enhanced and the splash screen may disappear quickly.
    2. Start Screen - appears after the splash screen. The Start Screen is always in portrait view and usually displays Live Tiles.
    3. Status Bar - is located at the top of the screen and displays system-level status information such as network signal strength and battery charge level.
    4. Application Bar - is an optional row of buttons and an ellipsis (for text menu) displayed along the bottom (portrait) or side (landscape) of the screen. The application bar is designed for accessing the most common functionality in the application.
    5. Hardware Buttons - include Power, Start, Volume, Back, Search, and Camera (if camera exists).
,Tiles on Windows Phone

Windows Phone Screens, Fair Use

Tiles on Windows Phone

"Tiles are rectangular images on the Start screen that launch applications and can present glanceable data."

  • Tiles are unique to the Windows platform.
    • Tiles can be used to create an individualized user interface. Individuals can pin the tiles in a way that meets their particular needs. Users can reorder, delete, and change the sizes of tiles.
    • Tiles can provide the user with glanceable access to personalized information. Live Tiles can be static or dynamic (content updated by apps, background agents, push notifications).
    • All apps have at least one tile known as the Application Tile. The Application Tile can be hidden, but it can not be deleted. Apps can create and delete secondary tiles, but only one secondary tile can be created at a time. Secondary tiles can provide direct access to portions of the application (eg. deep linking).
    • Application tiles can be defined in the new WP 8.0 manifest editor. However some of the tile fields still have to be set by editing the manifest (WMAppManifest.xml) with a text editor.
    • In WP 7.x, there was only one tile size. WP 8.0 introduced three different tile sizes (Regular, 1/4 size, double width).
    • In WP 7.5+, applications were able to create and update tiles.
    • In WP 8.0, three tile templates were made available:
      1. Flip - flips from front to back. Both side have content on the tile. The small size tile does NOT flip.
      2. Iconic - displays a small icon on the tile. Designed to reflect Microsoft's design principles.
      3. Cycle - cycles between 1 to 9 images. The small tile does NOT cycle.
Tile Development
  • Tiles for Windows Phone explains the many things programmers can do with Live Tiles in WP 8.0:
    • All the information displayed on the tiles (images, counts, text) are accessible by programmers.
    • The content that shows on a tile depends upon the tile's template and size.
    • The tile images are sized for the highest resolution (WXGA) and are automatically scaled for WVGA and 720p.
    • Foreground and background applications have full control over all tile properties.
    • Applications can create/update/delete secondary tiles. An example is a news app that allows secondary tiles to be created. A secondary tile could take the user directly to the local news section.
    • Push notifications provide a way to send timely information to tiles, even when the application is not running.
,Windows Phone 7.0 Theme Colors

WP7 Theme Colors, Own Work

Windows Phone Themes

    "A Windows Phone theme includes a combination of a background color (Dark or Light) and an accent color."

  • Windows Phone contains a basic device-level theme which drives consistency and compatibility.
    • When a user changes a system-wide theme in the Settings menu, only the theme-related colors in your application change. Fonts and control sizing do not change.
    • Theme colors consist of a background color (light or dark) and an accent color for the visual elements. In WP 7.x there were 10 standard accent colors for visual elements. In WP 8.0 there are 20 standard accent colors.
    • A theme can be overridden at the app level. For example, someone may desire a non-standard accent color which is associated with a particular entity. You can provide your own resources and override any themed properties. However, you can NOT turn off theming.
    • Programmers should create theme-aware applications by using the Windows Phone resources to set the colors of visual elements. Instead of setting a visual element to a specific color (eg. Red), a theme-aware application will set the color of a visual element to a theme resource value (eg. <Rectangle Fill="{StaticResource PhoneAccentBrush}" />).
    • Note: One the most common causes of app rejection from Microsoft is NOT having theme-aware screens.

    • Theme coding:
      • To set the foreground color to the theme accent color in XAML:

          Foreground="{StaticResource PhoneForegroundBrush}"

      • To set the foreground color to the theme accent color at runtime in the code-behind file (C#):

        Application.Current.Resources["PhoneAccentBrush"] as SolidColorBrush;

      • To force a light theme at any point in execution, add the code below (C#). Note: This requires using the "Library Package Manager" and NuGet to obtain the ThemeManager class.

        ThemeManager.ToLightTheme();

    Globalization and Localization

    "Localization and globalization ensure the same user experience for people who use another language."

    • Globalization and localization for Windows Phone provides details on how to globalize and localize a Windows Phone app:
      • Localization is the process of translating text strings into other languages.
      • Globalization is the process of making an application language-neutral. A globalized app presents data (currency, dates, etc) in a format specific to a user's locale or culture. The CultureInfo class provides information about a specific culture (writing system, calendar, date formatting, etc).
      • It is not necessary to localize or globalize and app before submitting to the Windows Phone store. However it is easier to perform these earlier in the development.
      • Example WP 7.x procedure to localize an App:
        • Add resource files for each language supporting eg. English and French => AppResources.resx and AppResources-fr-FR.resx. Add the string name and translation into each resource file.
        • Edit the .csproj file to include the supported culture.
        • Define a class in MainPage.xaml.cs that contains a property that points to the resource file.
        • Edit App.xaml to defined the LocalizedStrings.
        • Edit MainPage.xaml to bind the field to the values in the resource files.
.Asynchronous Programming and Threading

Asynchronous Diagram, Fair Use

Optimizing Windows Phone Apps

"A simplified approach to asynchronous programming was created with the addition of two new keywords in C# version 5 and support from the .NET Framework 4.5."

Asynchronous Programming and Threading
  • Asynchronous programming can improve the responsiveness of an application. For example, instead of blocking the main UI thread while retrieving a resource, asynchronous processing can obtain the resource and allow the main UI thread to continue while the resource is being retrieved.
    • Coding asynchronous applications can be complicated. A simplified approach to asynchronous programming was introduced in Visual Studio 2012 with support from the .NET Framework 4.5. In the simplified approach the compiler handles much of the complicated work of the programmer. This eliminated the need for writing callback methods.
    • The new simplified approach to asynchronous programming introduced two new keywords in C# version 5:
      • async - designates a method as being an asynchronous method.
      • await - allows you to indicate an expression to evaluate upon completion of an asynchronously invoked method.
    • Async and Await are available in Visual Studio 2012 and Windows Phone 8. If you have VS 2010 and need the new asynchronous features, the Visual Studio Async CTP adds them to Visual Studio 2010.
Windows Phone Application Analysis Tool
  • The Application Analysis tool is installed as part of the Windows Phone SDK. It is integrated into Visual Studio:
    • In Visual Studio, the Windows Phone Application Analysis Tool is located under the debug menu, or you can use the keyboard shortcut ALT+F1
    • The application analysis can be run while the app is running in the emulator or on a phone device.
    • The Windows Phone Application Analysis Tool measures the time it takes an application to perform certain tasks (start up, load images, run animations, respond to input). The tool also measures the resources the running application consumes (memory, cpu, battery charge).

    • The analysis data is written to a .sap file stored in the project's root directory. The file name contains a timestamp.

    • The analysis tool contains a timeline graph which displays the cpu and memory usage at any particular point during the program execution.

    • Segments of execution time can be marked within the analysis graph. The tool then report warnings and measurements within that time period. Such as:
      • performance warnings for cpu and frames
      • cpu usage by functions, methods, and frames
      • cpu consumption for each thread
,Windows Phone Application Analysis Tool

Application Analysis Tool , Fair Use



Reference Articles