Your SlideShare is downloading. ×
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
10 Tips For Designing Mobile Widgets - Maemo Summit, Amsterdam, Oct 11, 2009 (Maesum) @iRajLal
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

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

11,443

Published on

Ten Tips For Designing Mobile Widgets Maemo Summit 2009 Amsterdam Netherlands …

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

Published in: Technology
8 Comments
16 Likes
Statistics
Notes
No Downloads
Views
Total Views
11,443
On Slideshare
0
From Embeds
0
Number of Embeds
9
Actions
Shares
0
Downloads
182
Comments
8
Likes
16
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for 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
  • Transcript

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

    ×