using microsoft silverlight for creating rich mobile user experiences
TRANSCRIPT
Giorgio Sardo
UX Consultant
“Devigner” Developer + Designer
I quite fancy .NETWPF, 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 humansSource: 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 Silverlightis a
cross-browser,
cross-platformplug-in
for delivering
the next generation of
media experiences
&
rich interactive applications
(RIAs)
for the Web
Introduction
Mobile background
Mobile today: Silverlight!
Mix Mobile Website
Conclusion
Barbara Ballard
Mix
Conference
Sessions
Speaker
Fun
Casino
1. DevelopmentThematic Consistency
Wireframes
Capabilities
Resources
Testing
2. DesignContent Density
Essentiality
Spatial organization
Functional areas
Very Important Controls
List, Tab Control, Fish eye, Accordion
Visual flow
Typography
Colors
3. InteractionLaws
Navigation: Scrolling, Game, Carousel
4. InputModes
5. Cross-DeviceRotating, Full Screen and Scaling
Design
Interaction
Input
Cross-Device
Development
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
Limit content
to what the user
has requested.
Design
Interaction
Cross-Device
Input
Development
Organization: use a grid system,
with no more than 2 columns/rows
Notification
Input
Content
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
HeaderContentMenu
12 1610 14pixel
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
Screen
Game
Screen
Paused
1 Continue
2 Options
3 High Scores
4 Instructions
5 Exit
Device
Main Menu
1 New Game
2 Options
3 High Scores
4 Instructions
5 Exit
Exit
Launch
Continue
Pause
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
Onlinewww.microsoft.com/Silverlightwww.silverlight.netwww.w3.org/TR/mobile-bp
Blogsblogs.msdn.com/lokeueiblogs.msdn.com/giorgio
BooksMobile 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.