Giorgio Sardo
UX Consultant
“Devigner”
Developer + Designer
I quite fancy .NET
WPF, Silverlight, Mobile
I love challenges 

Introduction
Mobile today: Silverlight!
Best practices
Mix Mobile Website
Conclusion

GSM Phones in 103 countries
Source: Mobile Web Design, Cameron Moll

10 million i-mode users
Source: Mobile Web Design, Cameron Moll

1 billion mobile phones
Source: Mobile Web Design, Cameron Moll

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

WORLD USAGE
Automobile
PC
Landline Phone
Credit Card
TV
Mobile Phone
Source: Mobile Web Design, Cameron Moll

?

Introduction
Mobile background
Best practices
Mix Mobile Website
Conclusion

Microsoft Silverlight
is a
cross-browser,
cross-platform
plug-in
for delivering
the next generation of
media experiences
&
rich interactive applications
(RIAs)
Web
for the

Introduction
Mobile background
Mobile today: Silverlight!
Mix Mobile Website
Conclusion

Barbara Ballard

Mix
Conference
Sessions
Speaker
Fun
Casino

Development
1.
Thematic Consistency
Wireframes
Capabilities
Resources
Design
Testing Development
Design
2.
Content Density
Essentiality
Spatial organization
Functional areas
Cross-
Very Important Controls
Interaction
List, Tab Control, Fish eye, Accordion Device
Visual flow
Typography
Colors
Interaction
3.
Laws
Input
Navigation: Scrolling, Game, Carousel
Input
4.
Modes
Cross-Device
5.
Rotating, Full Screen and Scaling

XAML: write once, run (almost) anywhere

Design with
correct
dimensions

Exploit device capabilities to provide an
enhanced user experience.
Choose Top 5
Common resolution: 240x320.

Create
reusable assets
where possible

Carry out testing
on actual devices
as well as emulators

Take into account the trade-off between
having too many links on a page and asking
the user to follow too many links to reach
what they are looking for

Design
Development
Input Interaction
Cross-Device
Limit content
to what the user
has requested.

Organization: use a grid system,
with no more than 2 columns/rows

Notification
Content
Input

List
Table
Fish-eye
Accordion
Etc

Objects that are aligned appear to be
related
Objects indented
beneath other objects
will appear
subordinate

Example: on a 240x320 screen
Menu Content Header
pixel
10 12 14 16

Same rules as a PowerPoint deck
Due to screen contrast, reflex, brightness…
Function more than style
Red button = Stop

Fitt‟s Law
time to move to final target ∝ distance to the
target and the size of the target

Hick‟s Law
decisions are determined by the number of
possible choices

Human mind is able to remember information in
chunks of 7 ± 2

Feedback and feed-forward
every action should be accompanied by some
acknowledgment

Provide consistent navigation mechanisms
Help the user create a mental image of the site
Smart
Understand user needs
Remember user preferences

Define dimensions
Left-right: Time
Up-down: Space

Splash Launch
Device
Screen
Main Menu
1 New Game
Exit
2 Options
3 High Scores
4 Instructions
5 Exit
Paused
1 Continue
Game Pause 2 Options
3 High Scores
Screen Continue 4 Instructions
5 Exit

Stylus
Left hand users!
Softkey
Keyboard (physical)
Keyboard (projected)
Finger

„Sniff out’ user agent strings for individual
devices

Introduction
Mobile background
Mobile today: Silverlight!
Best practices
Conclusion

Intro
Mobile background
Mobile today: Silverlight!
Best practices
Mix Mobile Website

Online
www.microsoft.com/Silverlight
www.silverlight.net
www.w3.org/TR/mobile-bp
Blogs
blogs.msdn.com/lokeuei
blogs.msdn.com/giorgio
Books
Mobile Web Design (Cameron Moll)
Designing the Mobile User Experience (Barbara Ballard)
Mobile Interaction Design (Matt Jones)
Designing for Interaction: Creating smart applications
and clever devices (Dan Saffer)

© 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.