Using Microsoft Silverlight for Creating Rich Mobile User Experiences


Published on

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.

Published in: Technology, Business
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Using Microsoft Silverlight for Creating Rich Mobile User Experiences

  1. 1. Giorgio Sardo UX Consultant “Devigner” Developer + Designer I quite fancy .NET WPF, Silverlight, Mobile I love challenges 
  2. 2. Introduction Mobile today: Silverlight! Best practices Mix Mobile Website Conclusion
  3. 3. GSM Phones in 103 countries Source: Mobile Web Design, Cameron Moll
  4. 4. 10 million i-mode users Source: Mobile Web Design, Cameron Moll
  5. 5. 1 billion mobile phones Source: Mobile Web Design, Cameron Moll
  6. 6. 4 billion mobile phones 6.8 billion humans Source: United Nations Economic and Social Commission
  7. 7. WORLD USAGE Automobile PC Landline Phone Credit Card TV Mobile Phone Source: Mobile Web Design, Cameron Moll
  8. 8. ?
  9. 9. Introduction Mobile background Best practices Mix Mobile Website Conclusion
  10. 10. 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
  11. 11. Introduction Mobile background Mobile today: Silverlight! Mix Mobile Website Conclusion
  12. 12. Barbara Ballard
  13. 13. Mix Conference Sessions Speaker Fun Casino
  14. 14. 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
  15. 15. XAML: write once, run (almost) anywhere
  16. 16. Design with correct dimensions
  17. 17. Exploit device capabilities to provide an enhanced user experience. Choose Top 5 Common resolution: 240x320.
  18. 18. Create reusable assets where possible
  19. 19. Carry out testing on actual devices as well as emulators
  20. 20. 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
  21. 21. Design Development Input Interaction Cross-Device Limit content to what the user has requested.
  22. 22. Organization: use a grid system, with no more than 2 columns/rows
  23. 23. Notification Content Input
  24. 24. List Table Fish-eye Accordion Etc
  25. 25. Objects that are aligned appear to be related Objects indented beneath other objects will appear subordinate
  26. 26. Example: on a 240x320 screen Menu Content Header pixel 10 12 14 16
  27. 27. Same rules as a PowerPoint deck Due to screen contrast, reflex, brightness… Function more than style Red button = Stop
  28. 28. Fitt‟s Law time to move to final target ∝ distance to the target and the size of the target
  29. 29. Hick‟s Law decisions are determined by the number of possible choices
  30. 30. Human mind is able to remember information in chunks of 7 ± 2
  31. 31. Feedback and feed-forward every action should be accompanied by some acknowledgment
  32. 32. Provide consistent navigation mechanisms Help the user create a mental image of the site Smart Understand user needs Remember user preferences
  33. 33. Define dimensions Left-right: Time Up-down: Space
  34. 34. 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
  35. 35. Stylus Left hand users! Softkey Keyboard (physical) Keyboard (projected) Finger
  36. 36. „Sniff out’ user agent strings for individual devices
  37. 37. Introduction Mobile background Mobile today: Silverlight! Best practices Conclusion
  38. 38. Intro Mobile background Mobile today: Silverlight! Best practices Mix Mobile Website
  39. 39. Online Blogs 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)
  40. 40. © 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.