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.