Windows Phone Application Design for Developers: Metro Design Overview, Tips and Tricks

January 8- 9, 2012

Reza Alizadeh
Architect Evangelist, Microsoft

The views expressed in this presentation do not necessarily reflect the views of AT&T.

Topics
General Design Principles
Design Guidelines

Real-World Transformations
Resources for Customers

The views expressed in this presentation do not necessarily reflect the views of AT&T.

Before We Begin

The views expressed in this presentation do not necessarily reflect the views of AT&T.

Rule #1

Become familiar with Windows Phone before writing any code

The views expressed in this presentation do not necessarily reflect the views of AT&T.

Panorama/Hub Experiences

The views expressed in this presentation do not necessarily reflect the views of AT&T.

Information Architecture

The views expressed in this presentation do not necessarily reflect the views of AT&T.

Visual Designs

The views expressed in this presentation do not necessarily reflect the views of AT&T.

General Design Principles

The views expressed in this presentation do not necessarily reflect the views of AT&T.

Be Modern
Undecorated Free of chrome elements Minimally designed

The views expressed in this presentation do not necessarily reflect the views of AT&T.

Be On the Go Capable
Surface information Expedite the most common operations

The views expressed in this presentation do not necessarily reflect the views of AT&T.

10

Be Clean
Use space around controls and content Make labels succinct

The views expressed in this presentation do not necessarily reflect the views of AT&T.

11

Be in Motion
Animations should inform user about navigation and operations Make obvious what is tappable and what is static

The views expressed in this presentation do not necessarily reflect the views of AT&T.

12

Design Guidelines

The views expressed in this presentation do not necessarily reflect the views of AT&T.

13

Panorama & Pivot Controls

The views expressed in this presentation do not necessarily reflect the views of AT&T.

14

Panorama & Pivot Controls

Should have at least 2 pages

Dont use controls that compete for swipe gestures

Toggle switches Sliders Map control (unless gesture input has been locked) Browser control (unless gesture input has been locked)

The views expressed in this presentation do not necessarily reflect the views of AT&T.

15

Panorama Controls
Floating buttons should be avoided. Use app bar if necessary.

Minimize interactive content

Less than 5 panorama panes is recommended Panorama panes should either scroll vertically or horizontally

Incorrect

Correct

The views expressed in this presentation do not necessarily reflect the views of AT&T.

16

Alignment
24px margins

The views expressed in this presentation do not necessarily reflect the views of AT&T.

17

Layout

The views expressed in this presentation do not necessarily reflect the views of AT&T.

18

Animations
Silverlight Toolkit for Windows Phone
http://silverlight.codeplex.com/

Page Transitions
Tilt Animation on buttons, list items, and controls Dont use color changes in place of tilt

The views expressed in this presentation do not necessarily reflect the views of AT&T.

19

List Adorners

The views expressed in this presentation do not necessarily reflect the views of AT&T.

20

Buttons
Dont add soft Back buttons No need for close buttons users can use Back button When possible, buttons should be placed in App Bar
Incorrect Correct Incorrect Correct

The views expressed in this presentation do not necessarily reflect the views of AT&T.

21

Tiles
Should not have rounded corners or 3d Correct elementsIncorrect

The views expressed in this presentation do not necessarily reflect the views of AT&T.

22

Touch Targets
Incorrect Correct

Minimum font size is 15pt Recommended touch target size is 9mm

Minimum touch target size is 7mm

Minimum spacing between elements is 2mm Provide feedback when an item is touched
The views expressed in this presentation do not necessarily reflect the views of AT&T.

Spacing too small No clear connection between list and map

Good spacing Good list design Clear connection between list and map

23

Design Guidelines
Published by Microsoft
Adhering to design guidelines will help with Marketplace acceptance http://bit.ly/kJXZrB

The views expressed in this presentation do not necessarily reflect the views of AT&T.

24

Real World Examples

The views expressed in this presentation do not necessarily reflect the views of AT&T.

25

Billboard.com Initial Design

17 Panorama items

Entire application in one Panorama

App positions to another Panorama for navigation

Otherwise the layout complies for the most part

The views expressed in this presentation do not necessarily reflect the views of AT&T.

26

Billboard.com Panorama Final

The views expressed in this presentation do not necessarily reflect the views of AT&T.

27

Evernote Transformation

The views expressed in this presentation do not necessarily reflect the views of AT&T.

28

SoundHound Transformation

The views expressed in this presentation do not necessarily reflect the views of AT&T.

29

SoundHound Transformation

The views expressed in this presentation do not necessarily reflect the views of AT&T.

30

SoundHound Transformation

The views expressed in this presentation do not necessarily reflect the views of AT&T.

31

SoundTracker Transformation

The views expressed in this presentation do not necessarily reflect the views of AT&T.

32

SoundTracker Transformation

The views expressed in this presentation do not necessarily reflect the views of AT&T.

33

SoundTracker Transformation

The views expressed in this presentation do not necessarily reflect the views of AT&T.

34

Thank You

The views expressed in this presentation do not necessarily reflect the views of AT&T.

35