Using Microsoft Silverlight for Creating Rich Mobile User Experiences Shane Morris Michael Kordahi David Lemphers

2010 4 billion mobile phones 6.8 billion humans Source: United Nations Economic and Social Commission

2010

4 billion mobile phones

Agenda Services Platform User Experience

Mobile User Experience

Barbara Ballard

Mobile Behaviour Mobile users are mobile Snacking Interruptions Maintain State Minimise Memory Load Discrete Interactions Platform Integration New Markets Non-computer literate Non-literate

Mobile users are mobile

Snacking

Interruptions

Maintain State

Minimise Memory Load

Discrete Interactions

Platform Integration

New Markets

Non-computer literate

Non-literate

Mobile Design Considerations Fat finger, Skinny stylus Fat fingers get in the way of labels A stylus can be fiddly One-handed operation Notification Input

Fat finger, Skinny stylus

Fat fingers get in the way of labels

A stylus can be fiddly

One-handed operation

Mobile Design Considerations Colours Limited colour depth Contrast Multiple Form Factors And more to come Multi-mode Touch, Gesture, Keypad, Jog, D-pad, Stylus, Keyboard... Feedback Every action has an immediate response.

Colours

Limited colour depth

Contrast

Multiple Form Factors

And more to come

Multi-mode

Touch, Gesture, Keypad, Jog, D-pad, Stylus, Keyboard...

Feedback

Every action has an immediate response.

Design for Small Surfaces Less cues: Where am I? Where have I been? Where can I go from here? Bias towards breadth over depth “ Dialog-based” interaction Out and back navigation Scrolling One direction only please Affordance No Mouse

Less cues:

Where am I?

Where have I been?

Where can I go from here?

Bias towards breadth over depth

“ Dialog-based” interaction

Out and back navigation

Scrolling

One direction only please

Affordance

No Mouse

Stackable UI’s Scrolling through decks Popping cards off the stack And also: Zooming / Expanding (Fisheye, Accordion) Eg text box appears for current item only. Simple 3D

Scrolling through decks

Popping cards off the stack

And also:

Zooming / Expanding (Fisheye, Accordion)

Eg text box appears for current item only.

Simple 3D

Multiple Form Factors Panel-based UI’s help you be ready for re-factoring Plan ahead Silverlight Layout Controls are your friend Graphics Vector graphics are good But sometimes you want a bitmap for performance reasons

Panel-based UI’s help you be ready for re-factoring

Plan ahead

Silverlight Layout Controls are your friend

Graphics

Vector graphics are good

But sometimes you want a bitmap for performance reasons

Silverlight Considerations Memory “ Collapse” Not “ Opacity=0” or Move off page Performance Your new friends Key frame animation Hand-off animations

Memory

“ Collapse”

Not

“ Opacity=0” or

Move off page

Performance

Your new friends

Key frame animation

Hand-off animations

Resource Management Use Resources Eg Brushes Repurpose XAML Eg, change ‘target’ of Storyboards User Controls CreateFromXAML

Use Resources

Eg Brushes

Repurpose XAML

Eg, change ‘target’ of Storyboards

User Controls

CreateFromXAML

Testing Carry out testing on actual devices as well as emulators Test and observe real-world scenarios

Carry out testing on actual devices as well as emulators

Test and observe real-world scenarios

Silverlight for Mobile

Silverlight for Mobile

demo

Leveraging Services

© 2008 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries. The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.