10 Tips for Designing Mobile Widgets<br />Rajesh Lal<br />Senior Engineer, Nokia <br />Maemo Devices, Mountain View, Calif...
15 minutes<br />
Why Should We Care<br />
Today Computer to Mobile ratio is 1:4<br />Worldwide 1 Billion Computers  and ~ 4 Billion Mobile  Phones<br />Smartphone s...
Data based on study at http://www.researchandmarkets.com published July 27, 2009<br />
Tip: 1<br />Design for a MobileUser <br />
Short attention span<br />Divided attention <br />Interruptible<br />Dynamic environment<br />
Tip: 2<br />Know Widget<br />A Widget is a small, light weight application, meant for a single purpose.<br />
 Mobile Widget <br />Web Widget<br />igoogle, Wordpress,<br />Pageflakes, Facebook<br />Web browser (server) based<br />De...
11<br />Tip: 3<br />Target Specific Set of Users<br />
12<br />Highly personal device<br />Rich features specific to users<br />Allow for customization<br />Target sport events,...
Tip: 4<br />Play Nice<br />
Follow design guidelines		Justify space <br />Do not poll data frequentlyDo not be a memory hog<br />
Tip: 5<br />Utilize Device Potential<br />
Nokia N900<br />
N900 Features 	<br />48 gb exp memory<br />touch screen<br />widgets<br />Open GL<br />multi-tasking<br />3d graphics<br /...
Tip: 6<br />Focus on One Functionality <br />
Know what Widgets are meant for <br />Quick information<br />Casual games<br />Simple utility<br />Media application<br />...
Tip: 7<br />Simplify Features<br />
http://www.google.com/ig/directory?q=clock<br />
Paperclip Principle<br />Easy to Look<br />Easy to Understand <br />Easy to Use <br />Most effective designs are least com...
Tip: 8<br />Grab the User<br />
2. Make it alive<br />Compelling data<br />Dynamic information<br />Make it interesting<br />1. Attract at entry point <br...
26<br />Tip: 9<br />Add Social<br />
27<br /> Mobile is a social device <br /> Always Available<br /> Meant for communication<br /> Interactive <br />
Tip: 10<br />Make it Fun<br />
29<br />Add ‘Extra Fun’<br />Delight users<br />Give pleasant surprises<br />Make it special<br />“If it&apos;s not fun, y...
Ten Tips<br />1. Design for a MobileUser <br />6. Focus on One Functionality <br />7. Simplify Features<br />2. Know Widge...
31<br />
32<br />Thank You<br />rajesh.lal@nokia.com<br />Join us @ http://maemo.org/development/sdks/<br />
Próximos SlideShares
Carregando em…5
×

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

14.177 visualizações

Publicada em

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

Publicada em: Tecnologia
9 comentários
15 gostaram
Estatísticas
Notas
Sem downloads
Visualizações
Visualizações totais
14.177
No SlideShare
0
A partir de incorporações
0
Número de incorporações
7.042
Ações
Compartilhamentos
0
Downloads
183
Comentários
9
Gostaram
15
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide
  • 2008 Estimate $ 72 million / € 50 million Growth 80% 1.3 Billion in 2013 ~ € 1 billion4 mobile phones for each computerWireless Expertise forecastsSmartphone Sales: 423 million in 2013Total number of smart phone users: 1.6 billionCalculated 2008 2009 2010 2011 2012 2013 € 49.32 € 88.78 € 159.80 € 287.63 € 517.74 € 931.93 Based http://newsblaze.com/story/2009072709401000001.bw/topstory.htmlhttp://www.researchandmarkets.com/research/27032e/mobile_widget_plat
  • 2008 Estimate $ 72 million / € 50 million Growth 80% 1.3 Billion in 2013 ~ € 1 billion4 mobile phones for : 1.6 billioneach computerWireless Expertise forecastsSmartphone Sales: 423 million in 2013Total number of smart phone usersCalculated 2008 2009 2010 2011 2012 2013 € 49.32 € 88.78 € 159.80 € 287.63 € 517.74 € 931.93 Based http://newsblaze.com/story/2009072709401000001.bw/topstory.htmlhttp://www.researchandmarkets.com/research/27032e/mobile_widget_plat
  • Is Moving In the TrainWaiting in the QueueDriving Is not completely focused as with a computerIs doing things along with using MobileReading Talking to FriendsListening MusicWatching MovieA Mobile application is not a mini desktop applicationDesign a widget for the user who has 10 seconds of attention span
  • Any desktop widget can be made to run on Mobile due to the presence of WRT A Web Widget can also be ported to a mobile device because, mobile device allows for cross domain access Both these widgets use standard web technologies
  • Mobile is a highly personal device Much more than a computer or laptop which you might share with othersDefining a target allows forRich features specific to the groupGives a highly personal experience to the userExample Compare a generic RSS Widget with an RSS Widget specifically made for maemo.org UsersA Generic Crossword puzzle Widget with Popular Newspaper’s Amsterdam Post /bbc news Crossword Widget
  • Always design a thing by considering it in its next larger context - a chair in a room, a room in a house, a house in an environment, an environment in a city plan - Eliel SaarinenFollow Design Guidelines - Use device style and fontsAccessibleTheme of the Parent Application/Web site
  • Widgets are Meant for One functionalitySubset of the Main ApplicationIntuitiveNo initial configurationDefault values Except for Service Widgets (login)Information WidgetMaximum Display Current NewsFull Screen WidgetUtility Widget Access Device Data Use Low Level APISize should be minimalDesktop AppletService WidgetsLogin RequiredExample Facebook / last.fmMedia WidgetEmbedded Media PlayerAudio / VideoUse Media RSSFlash PlayerMedia applications Podcast, Video, TV WidgetFun and GamesTetris3d GraphicsOpen GL High processor speed neededRecent TrendsSocial applications Branded applicationsSubtle advertisementsMini websites
  • More than 200 clock widgets at http://www.google.com/ig/directory?q=clock 95% of them have less than 100 users Aesthetically pleasing design - Good contrast Few colors, 1 highlight color Visuals cues, IconsEasy to Understand – Intuitive, No need for Help files or even instructions http://www.officemuseum.com/paper_clips.htm Samuel B. Fay in 1867The most elegant and effective designs are often the least complicated
  • Rounded corners gives a feeling of smoothnessEasy to Understand – Intuitive, No need for Help files or even instructions http://www.officemuseum.com/paper_clips.htm Samuel B. Fay in 1867
  • You never get a second chance for the first impression Easy Access to informationMake it Alive Example a game widget can show score from onlineUtility widget shows current conditionInformation Widget top five newsDO NOT MAKE AND FORGET
  • Always Available -> Makes you feel connected Connect with Facebook, last.fm, Youtube, Addthis widget – bookmark, takes a link and help spread in the social network, twitter, facebook, digg, etcCreate Widget which use these social features Example: A Movie Widget able to talk to your Facebook FriendsYour locations Widget showing friends from address bookFriends rating for a Restaurant / Hotel/ Bar in a new cityWidget for connected maemo UsersChat with your group with similar tasteGet Recommendations on Books from your Friends
  • Example of A cake, frosting and candle Fortune CookieA simple fortune cookie can add a good animation and a chiming music for extra magical effects.Sounds EffectsAnimationsThe ‘extra fun’ makes the difference between a good and a great widget
  • 10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal

    1. 10 Tips for Designing Mobile Widgets<br />Rajesh Lal<br />Senior Engineer, Nokia <br />Maemo Devices, Mountain View, California<br />
    2. 15 minutes<br />
    3. Why Should We Care<br />
    4. Today Computer to Mobile ratio is 1:4<br />Worldwide 1 Billion Computers and ~ 4 Billion Mobile Phones<br />Smartphone sales estimate: 20% increase annually, today 140 million to 423 million in 2013<br />Source: Wireless Expertise www.wirelessexpertise.com<br />
    5. Data based on study at http://www.researchandmarkets.com published July 27, 2009<br />
    6. Tip: 1<br />Design for a MobileUser <br />
    7. Short attention span<br />Divided attention <br />Interruptible<br />Dynamic environment<br />
    8. Tip: 2<br />Know Widget<br />A Widget is a small, light weight application, meant for a single purpose.<br />
    9. Mobile Widget <br />Web Widget<br />igoogle, Wordpress,<br />Pageflakes, Facebook<br />Web browser (server) based<br />Desktop Widget<br />Konfabulator, Desklets, Dashboard, Vista<br />Widget Engine<br />Native APIs<br />&lt; &gt;<br />[ ]<br />HTML, CSS, JavaScript, XML, Ajax, RIA<br />Mobile Widget<br />S60, Maemo<br />Web Runtime<br />Device APIs<br />+<br />=<br />
    10. 11<br />Tip: 3<br />Target Specific Set of Users<br />
    11. 12<br />Highly personal device<br />Rich features specific to users<br />Allow for customization<br />Target sport events, conferences<br />
    12. Tip: 4<br />Play Nice<br />
    13. Follow design guidelines Justify space <br />Do not poll data frequentlyDo not be a memory hog<br />
    14. Tip: 5<br />Utilize Device Potential<br />
    15. Nokia N900<br />
    16. N900 Features <br />48 gb exp memory<br />touch screen<br />widgets<br />Open GL<br />multi-tasking<br />3d graphics<br />32 gb<br />Qt<br />qwerty<br />integrated gps<br />firefox browser<br />web run time<br />linux os<br />radio<br />wireless broadband<br />Ajax<br />personalized desktop<br />5 mp camera<br />800 × 480 resolution<br />flash<br />Innovative design<br />powerful processor<br />video<br />
    17. Tip: 6<br />Focus on One Functionality <br />
    18. Know what Widgets are meant for <br />Quick information<br />Casual games<br />Simple utility<br />Media application<br />Search / Lifestyle Widget<br />Recent Trends<br />Social Widgets<br />Branded application<br />Subtle advertisements<br />Mini Web Apps<br />
    19. Tip: 7<br />Simplify Features<br />
    20. http://www.google.com/ig/directory?q=clock<br />
    21. Paperclip Principle<br />Easy to Look<br />Easy to Understand <br />Easy to Use <br />Most effective designs are least complicated<br />
    22. Tip: 8<br />Grab the User<br />
    23. 2. Make it alive<br />Compelling data<br />Dynamic information<br />Make it interesting<br />1. Attract at entry point <br />Short title, simple headings<br />Nice professional icon<br />Precise description <br />3. Get statistics<br />No. of downloads <br />No. of users<br />Feed based statistics<br />4. Hear your user<br />Include email<br />Online forum<br />Allow for feedback<br />
    24. 26<br />Tip: 9<br />Add Social<br />
    25. 27<br /> Mobile is a social device <br /> Always Available<br /> Meant for communication<br /> Interactive <br />
    26. Tip: 10<br />Make it Fun<br />
    27. 29<br />Add ‘Extra Fun’<br />Delight users<br />Give pleasant surprises<br />Make it special<br />“If it&apos;s not fun, you&apos;re not <br />doing it right” –Bob Basso<br />
    28. Ten Tips<br />1. Design for a MobileUser <br />6. Focus on One Functionality <br />7. Simplify Features<br />2. Know Widget<br />8. Grab the User<br />3. Target Specific Set of Users<br />4. Play Nice<br />9. Add Social<br />10. Make it Fun<br />5. Utilize Device Potential<br />
    29. 31<br />
    30. 32<br />Thank You<br />rajesh.lal@nokia.com<br />Join us @ http://maemo.org/development/sdks/<br />

    ×