10 tips for designing mobile widgets - maemo summit, amsterdam, oct 11, 2009 (maesum) @irajlal

32
10 Tips for Designing Mobile Widgets Rajesh Lal Senior Engineer, Nokia Maemo Devices, Mountain View, California

Upload: raj-lal

Post on 12-May-2015

11.435 views

Category:

Technology


0 download

DESCRIPTION

Ten Tips For Designing Mobile Widgets Maemo Summit 2009 Amsterdam Netherlands Do you know why only 1 percent of Mobile Widgets are successful ? What makes some widgets thrive and used by millions, and others with equal functionality bite the dust ? Make no mistakes, design of a widget is not about graphics, colour or fonts. This presentation will demystify this 'invisible' layer below the surface with 10 pragmatic tips. The tips will cover some of the most useful, and often ignored standard design principals and how to apply them in a mobile context. - Rajesh Lal

TRANSCRIPT

Page 1: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

10 Tips for Designing Mobile Widgets

Rajesh LalSenior Engineer, Nokia

Maemo Devices, Mountain View, California

Page 2: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

Q&A

Top 5 Tips

5 Contextual Tips

Why Should We Care

15 minutes

Page 3: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

Why Should We Care

Page 4: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

Worldwide 1 Billion Computers and ~ 4 Billion Mobile Phones

Today Computer to Mobile ratio is 1:4

Smartphone sales estimate: 20% increase annually, today 140 million to 423 million in 2013

Source: Wireless Expertise www.wirelessexpertise.com

Page 5: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

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

Page 6: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

Q&A

Top 5 Tips

5 Contextual Tips

Why Should We Care

Page 7: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

Design for a Mobile User

Tip: 1

Page 8: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

Short attention span

Divided attention

Interruptible

Dynamic environment

Page 9: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

Know Widget

Tip: 2

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

Page 10: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

Mobile Widget

[ ]Desktop WidgetKonfabulator, Desklets, Dashboard, Vista

Widget Engine

Native APIs

Web Widgetigoogle, Wordpress,

Pageflakes, Facebook

Web browser (server) based

+ =

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

Mobile WidgetS60, Maemo

Web Runtime

Device APIs

Page 11: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

11

Target Specific Set of Users

Tip: 3

Page 12: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

12

Highly personal device

Rich features specific to users

Allow for customization

Target sport events, conferences

Page 13: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

Play Nice

Tip: 4

Page 14: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

Follow design guidelines Justify space

Do not poll data frequently Do not be a memory hog

Page 15: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

Utilize Device Potential

Tip: 5

Page 16: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

Nokia N900

Page 17: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

N900 Features

qwertymulti-tasking

personalized desktop

widgets

flash

Ajax

integrated gps

5 mp camera

linux os

3d graphics

Open GL

web run time

Qt32 gb

wireless broadband

powerful processorInnovative design

800 × 480 resolution

video

touch screen48 gb exp memory

firefox browserradio

Page 18: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

Q&A

Top 5 Tips

5 Contextual Tips

Why Should We Care

Page 19: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

Focus on One Functionality

Tip: 6

Page 20: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

Know what Widgets are meant for Quick information

Casual games

Simple utility

Media application

Search / Lifestyle Widget

Recent Trends

Social Widgets

Branded application

Subtle advertisements

Mini Web Apps

Page 21: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

Simplify Features

Tip: 7

Page 22: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

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

Page 23: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

Easy to Look

Easy to Understand

Easy to Use

Most effective designs are least complicated

Paperclip Principle

Page 24: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

Grab the User

Tip: 8

Page 25: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

1. Attract at entry point Short title, simple headings

Nice professional icon

Precise description

2. Make it aliveCompelling data

Dynamic information

Make it interesting

3. Get statisticsNo. of downloads

No. of users

Feed based statistics

4. Hear your userInclude email

Online forum

Allow for feedback

Page 26: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

26

Add Social

Tip: 9

Page 27: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

27

Mobile is a social device

Always Available

Meant for communication

Interactive

Page 28: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

Make it Fun

Tip: 10

Page 29: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

29

“If it's not fun, you're not doing it right” –Bob Basso

Add ‘Extra Fun’

Delight users

Give pleasant surprises

Make it special

Page 30: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

7. Simplify Features

1. Design for a Mobile User

10. Make it Fun

Ten Tips

2. Know Widget3. Target Specific Set of Users4. Play Nice

5. Utilize Device Potential

6. Focus on One Functionality

8. Grab the User

9. Add Social

Page 31: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

31

Q&A

Top 5 Tips

5 Contextual Tips

Why Should We Care

Page 32: 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

32

Thank [email protected]

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