Come learn how use Microsoft Silverlight for Mobile to build rich mobile experiences including best patterns and practices, fluid and intuitive navigation, smart content organization, small form factor and cross-device support. This session also covers how to use tools like Microsoft Expression Blend to move beyond size considerations to create create stunning and meaningful vector-based graphics applications.

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

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

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

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

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

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

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

14. ?

15. Introduction
Mobile background
Best practices
Mix Mobile Website
Conclusion

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

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

23. Barbara Ballard

24. Mix
Conference
Sessions
Speaker
Fun
Casino

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

27. XAML: write once, run (almost) anywhere

28. Design with
correct
dimensions

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

31. Create
reusable assets
where possible

32. Carry out testing
on actual devices
as well as emulators

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

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

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

37. Notification
Content
Input

39. List
Table
Fish-eye
Accordion
Etc

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

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

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

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

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

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

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

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

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

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

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

59. „Sniff out’ user agent strings for individual
devices

61. Introduction
Mobile background
Mobile today: Silverlight!
Best practices
Conclusion

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

64. 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)

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