10 Tips For Designing Mobile Widgets

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 1/32

10 Tips for 10 Tips for Designing Mobile WidDesigning Mobile Wid

Rajesh LalSenior Engineer, Nokia

Maemo Devices, Mountain View, California

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 2/32

15minutes

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 3/32

Why Should We Care

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 4/32

Worldwide 1 Billion Computers and ~ 4 Billion Mobile Phone

Today Computer to Mobile ratio is1:4

Smartphone sales estimate: 20% increase annually, today 140 million to 42013

Source: Wireless Expertise www.wirelessexpertise.com

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 5/32

Data based on study at http://www.researchandmarkets.com published July

27, 2009

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 6/32

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 7/32

Design for a Mobile User 

 Tip: 1

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 8/32

Short attention spanShort attention span

Divided attentionDivided attention

InterruptibleInterruptible

Dynamic environmentDynamic environment

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 9/32

Know Widget

 Tip: 2

 A Widget is a small, light weight application, meant for a sing purpose.

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 10/32

Mobile Widget

[ ]

Desktop Widget

Konfabulator,

Desklets, Dashboard,Vista

Widget Engine

Native APIs

Web Widget

igoogle, Wordpress,

Pageflakes, FacebookWeb browser (server)based

+ =

< HTML, CSS, JavaScript, XML, Ajax, RIA

MobileWidget

S60, Maemo

Web Runtime

Device APIs

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 11/32

11

Target Specific Set of Users

 Tip: 3

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 12/32

12

Highly persHighly pers

Rich features specRich features spec

Allow for cuAllow for cu

 Target sp Target sp

cc

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 13/32

Play Nice

 Tip: 4

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 14/32

Follow design guidelinesFollow design guidelines  Justify space Justify space

Do not poll data frequentlyDo not poll data frequently Do not be aDo not be a

memory hogmemory hog

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 15/32

Utilize Device Potential

 Tip: 5

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 16/32

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 17/32

N900 Features

qwertmulti-taskingmulti-tasking

personalized desktop

widgets

flash

Ajax

integrated gps

5 mp camera

linux os

3d graphicsOpen GL

web run time

Qt32 gb

wireless broadband

powerful processorInnovative design

800 × 480 re

video

touch screen

48 gb exp memory

firefox browserra

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 18/32

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 19/32

Focus on One Functionality

 Tip: 6

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 20/32

Know what Widgets are

Quic

C

Med

Search / Life

Re

S

Brande

Subtle ad

M

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 21/32

Simplify Features

 Tip: 7

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 22/32

http://www.google.com/ig/directory?q=clock

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 23/32

Easy to Look

Easy to Understand

Easy to Use

Most effective designs are least complicated 

Paperclip Principle

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 24/32

Grab the User

 Tip: 8

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 25/32

1. Attract at entry point

Short title, simple headings

Nice professional icon

Precise description

2. Make it alive

Compelling data

Dynamic informatio

Make it interestin

3. Get statistics

No. of downloads

No. of users

Feed based statistics

4. Hear your use

Include email

Online forum

Allow for feedback

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 26/32

26

Add Social

 Tip: 9

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 27/32

27

Mobile is a social deviceMobile is a social device

Always AvailableAlways Available

Meant for communicationMeant for communication

InteractiveInteractive

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 28/32

Make it Fun

 Tip: 10

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 29/32

29

“If it's not fun, you're not 

doing it right” –Bob Basso

Add ‘Extra Fun’Add ‘Extra Fun’

Delight usersDelight users

Give pleasant surprisesGive pleasant surprisesMake it specialMake it special

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 30/32

7. SimplifyFeatures

1. Design for a Mobile User

10. Make it Fun

 Ten Tips

2. Know Widget

3. Target Specific Set of Users

4. Play Nice

5. Utilize Device Potential

6. Focus on One

Functionality

8. Grab the Use

9. Add Social

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 31/32

31

8/14/2019 10 Tips For Designing Mobile Widgets

http://slidepdf.com/reader/full/10-tips-for-designing-mobile-widgets 32/32

32

Thank You

rajesh.lal@nokia.com

 Join us @ http://maemo.org/development/sdks/