Using Microsoft Silverlight for Creating Rich Mobile User Experiences

Using Microsoft Silverlight for Creating Rich Mobile User Experiences

Shane Morris

Michael Kordahi

David Lemphers

201020104 billion mobile phones

6.8 billion humans6.8 billion humansSource: United Nations Economic and Social CommissionSource: United Nations Economic and Social Commission

ServicesPlatform

Agenda

User Experience

Mobile User Experience

Barbara Ballard

Mobile BehaviourMobile 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

InputInput

Mobile Design ConsiderationsColours– 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

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

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

Silverlight Considerations

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

Testing

Carry out testing on actual devices as well as emulators

Test and observe real-world scenarios

Silverlight for Mobile

Silverlight for Mobile

demodemo

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.