10 Tips for Designing Mobile WidgetsRajesh LalSenior Engineer, Nokia Maemo Devices, Mountain View, California
15 minutes
Why Should We Care
Today Computer to Mobile ratio is 1:4Worldwide 1 Billion Computers  and ~ 4 Billion Mobile  PhonesSmartphone sales estimate:  20% increase annually, today 140 million  to 423 million in 2013Source: Wireless Expertise www.wirelessexpertise.com
Data based on study at http://www.researchandmarkets.com published July 27, 2009
Tip: 1Design for a MobileUser
Short attention spanDivided attention InterruptibleDynamic environment
Tip: 2Know WidgetA Widget is a small, light weight application, meant for a single purpose.
 Mobile Widget Web Widgetigoogle, Wordpress,Pageflakes, FacebookWeb browser (server) basedDesktop WidgetKonfabulator, Desklets, Dashboard, VistaWidget EngineNative APIs<   >[    ]HTML, CSS, JavaScript, XML, Ajax, RIAMobile WidgetS60, MaemoWeb RuntimeDevice APIs+=
11Tip: 3Target Specific Set of Users
12Highly personal deviceRich features specific to usersAllow for customizationTarget sport events, conferences
Tip: 4Play Nice
Follow design guidelines		Justify space Do not poll data frequentlyDo not be a memory hog
Tip: 5Utilize Device Potential
Nokia N900
N900 Features 	48 gb exp memorytouch screenwidgetsOpen GLmulti-tasking3d graphics32 gbQtqwertyintegrated gpsfirefox browserweb run timelinux osradiowireless broadbandAjaxpersonalized desktop5 mp camera800 × 480 resolutionflashInnovative designpowerful processorvideo
Tip: 6Focus on One Functionality
Know what Widgets are meant for Quick informationCasual gamesSimple utilityMedia applicationSearch / Lifestyle WidgetRecent TrendsSocial WidgetsBranded applicationSubtle advertisementsMini Web Apps
Tip: 7Simplify Features
http://www.google.com/ig/directory?q=clock
Paperclip PrincipleEasy to LookEasy to Understand Easy to Use Most effective designs are least complicated
Tip: 8Grab the User
2. Make it aliveCompelling dataDynamic informationMake it interesting1. Attract at entry point Short title, simple headingsNice professional iconPrecise description 3. Get statisticsNo. of downloads No. of usersFeed based statistics4. Hear your userInclude emailOnline forumAllow for feedback
26Tip: 9Add Social
27 Mobile is a social device  Always Available Meant for communication Interactive
Tip: 10Make it Fun
29Add ‘Extra Fun’Delight usersGive pleasant surprisesMake it special“If it's not fun, you're not doing it right” –Bob Basso
Ten Tips1. Design for a MobileUser 6. Focus on One Functionality 7. Simplify Features2. Know Widget8. Grab the User3. Target Specific Set of Users4. Play Nice9.  Add Social10. Make it Fun5. Utilize Device Potential
31
32Thank Yourajesh.lal@nokia.comJoin us @ http://maemo.org/development/sdks/

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

  • 1.
    10 Tips forDesigning Mobile WidgetsRajesh LalSenior Engineer, Nokia Maemo Devices, Mountain View, California
  • 2.
  • 3.
  • 4.
    Today Computer toMobile ratio is 1:4Worldwide 1 Billion Computers and ~ 4 Billion Mobile PhonesSmartphone sales estimate: 20% increase annually, today 140 million to 423 million in 2013Source: Wireless Expertise www.wirelessexpertise.com
  • 5.
    Data based onstudy at http://www.researchandmarkets.com published July 27, 2009
  • 7.
    Tip: 1Design fora MobileUser
  • 8.
    Short attention spanDividedattention InterruptibleDynamic environment
  • 9.
    Tip: 2Know WidgetAWidget is a small, light weight application, meant for a single purpose.
  • 10.
    Mobile WidgetWeb Widgetigoogle, Wordpress,Pageflakes, FacebookWeb browser (server) basedDesktop WidgetKonfabulator, Desklets, Dashboard, VistaWidget EngineNative APIs< >[ ]HTML, CSS, JavaScript, XML, Ajax, RIAMobile WidgetS60, MaemoWeb RuntimeDevice APIs+=
  • 11.
  • 12.
    12Highly personal deviceRichfeatures specific to usersAllow for customizationTarget sport events, conferences
  • 13.
  • 14.
    Follow design guidelines Justifyspace Do not poll data frequentlyDo not be a memory hog
  • 15.
  • 16.
  • 17.
    N900 Features 48gb exp memorytouch screenwidgetsOpen GLmulti-tasking3d graphics32 gbQtqwertyintegrated gpsfirefox browserweb run timelinux osradiowireless broadbandAjaxpersonalized desktop5 mp camera800 × 480 resolutionflashInnovative designpowerful processorvideo
  • 19.
    Tip: 6Focus onOne Functionality
  • 20.
    Know what Widgetsare meant for Quick informationCasual gamesSimple utilityMedia applicationSearch / Lifestyle WidgetRecent TrendsSocial WidgetsBranded applicationSubtle advertisementsMini Web Apps
  • 21.
  • 22.
  • 23.
    Paperclip PrincipleEasy toLookEasy to Understand Easy to Use Most effective designs are least complicated
  • 24.
  • 25.
    2. Make italiveCompelling dataDynamic informationMake it interesting1. Attract at entry point Short title, simple headingsNice professional iconPrecise description 3. Get statisticsNo. of downloads No. of usersFeed based statistics4. Hear your userInclude emailOnline forumAllow for feedback
  • 26.
  • 27.
    27 Mobile isa social device Always Available Meant for communication Interactive
  • 28.
  • 29.
    29Add ‘Extra Fun’DelightusersGive pleasant surprisesMake it special“If it's not fun, you're not doing it right” –Bob Basso
  • 30.
    Ten Tips1. Designfor a MobileUser 6. Focus on One Functionality 7. Simplify Features2. Know Widget8. Grab the User3. Target Specific Set of Users4. Play Nice9. Add Social10. Make it Fun5. Utilize Device Potential
  • 31.
  • 32.
    32Thank Yourajesh.lal@nokia.comJoin us@ http://maemo.org/development/sdks/

Editor's Notes

  • #5 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
  • #6 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
  • #9 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
  • #11 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
  • #13 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
  • #15 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
  • #21 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
  • #23 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
  • #24 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
  • #26 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
  • #28 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
  • #30 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