Mobile Design Considerations - India


Published on

Published in: Technology
1 Like
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide
  • So what is a Contextual Application?Well first of all, it’s important to note that this isn’t just about Flash. It’s about understanding the user, their intent and how to engage them wherever they are.DEMOHere you can demo a mobile device, or AIR application that takes the users context into account.Youtube on a mobile phone, the HTML is specifically tailored for this devices screen size.Fintune (AIR) that demonstrates an understanding that users want a background app to play music.Facebook on AIR, Web and Mobile – each platform works with the user, and their most likely usage context. Mobile = status updates, photos and contacts Desktop = full experience of contact management, photo viewing and applications (gaming etc) AIR = Notifications, uploads and commenting via status updates
  • For many years now the Flash Platform has enabled the delivery and creation of Rich Internet Applications. These experiences span games, social, enterprise and video applications that millions of users engage with everyday. Ebay, Facebook and SalesForce are great examples to use.With the onset of widely available and stable network connections more and more applications are moving to the cloud. Typically this vision takes the form of huge data centers dotted around the world, but the reality is that we’re talking about services that are agnostic of their delivery platform. Facebook can be considered a web host, and not only that but a web host with a growing audience and validated business models through which developers can access user bases with simple APIs and deliver those across varying screens and contexts.Some of those contexts are mobile phones, network connected consoles, laptops, desktop computers and even televisions. Successful applications of the future are those which can provide service to their users everywhere, those that understand their role on each platform, and the context of their use.
  • Let’s look at a detailed example of an application that runs across many levels of distribution, the New york TimesIt’s well documented that the print industry is beginning to transition to a digital viewer audience. Their AIR application is a stunning example of using the experience of a newspaper and taking it to the desktop, where users can be absorbed into the NYT experience that they have enjoyed so much.Because it is created on the Flash Platform and with Adobe tools the application can use the common “paper” metaphor, yet it additionally provides multimedia and subscription billing. The desktop experience uses the context of delivery to enable the user to focus on their content, and to enagage them like never before in the NYT brand.The Kindle had really excited the print industry, not only because of the unqiue devices but really because of the similarity to their familiar experience. On mobile phones the NYT have enabled users to browse their content in bite size chunks, and even tailoring the content for individual screen sizes and interaction methods. The Chumby experience is in fact completely passive, and many of the Chumby widgets are delivered as rotating feeds, video and audio.It’s also important to remember that NYT and others still sell newspapers, their millions of readers still enjoy receiving their morning paper; in the context of reading it in their leisure.So each provides a unique experience and a unique business model to engage users in their context, yet all powered by the same cloud services that have enabled newspapers to get to print for decades.
  • The second step is to consider where your users are to be targeted, and the context of that experience to them.You can see in this chart the key use cases, and user interaction models for our strategic priorities. TV, Mobile and the Desktop.It might seem obvious but the TV is a sit back, passive experience. Plugging in a games console is a different use case, but largely the user wants to watch video or listen to audio. In the future we expect that users will engage in social viewing, and some basic interactions. Widget style applications are most likely to succeed, and we also see opportunities for interaction with live broadcast, linear viewing.Mobile Phones or devices are typically reactive, you get a message and you respond. You update your status and monitor your emails, and you buy the device to fit with your context as a user. That’s why some devices account for most web browsing, others for messaging and some for multimedia.Your users are going to live in some part of each of these contexts, and your application must adapt to that experience. The effect of not adhering to the context will be a jarring and irritating experience.Alternatively you might be onto a winner, as Twitter became. There are no hard and fast rules, only guidelines. I expect huge innovation in the TV space as OEMs being the web to the living room, and engage the audience like never before.
  • Note: Often Fanbase has been shown as a multi-screen app, so the audience will have seen this before. In this slide I simply opened up the AIR app and used the little minimize button to show the widget version.The fanbase application has taken advantage of being on the desktop, and can also be switched into a widget experience. Using that context the user can now listen to music in the background, or keep up to date in the chat window with other fans.So it’s possible to run in multiple contexts, and it’s great to be aware that at times your users might want to engage in different ways.
  • Mobile Design Considerations - India

    1. 1. Mobile Design Considerations<br />Mark Doherty | Evangelist, Mobile and Devices<br /> | markadoherty<br />
    2. 2. Agenda<br />The Market<br />User Context <br />Tap is the New Click<br />Optimizations<br />QA<br />
    3. 3. 2013 ?<br />“By 2013, mobile phones will overtake PCs as the most common Web access device worldwide…”<br />Gartner, 2010<br />Gartner Top End User Predictions for 2010: Coping with the New Balance of Power<br />
    4. 4. Some facts…<br />
    5. 5. India – a country with huge opportunity<br />“95% of India Internet users are already wireless”<br />Source: Telecom Regulatory Authority of India, July 2010<br />5<br />
    6. 6. India – a country with huge opportunity<br />That’s a lot!<br />“30% of India Internet users subscribe to mobile data services”<br />Source: Telecom Regulatory Authority of India, 2009<br />6<br />
    7. 7. India – a country a huge opportunity<br />“1/8 of devices sold in 2010 will be smart phone”<br />50% of them will be a Nokia-Symbian device<br />*Top 5 shown, 92%<br />Source: Gartner Competitive Landscape, India, June 2010<br />7<br />
    8. 8. Operating System Penetration<br />Incredibly 12%+ of devices are of “unknown” origin?<br />Probably from China<br />Probably new subscribers <br />*iOS accounts for 0.6%<br />Source: Gartner Competitive Landscape, India, June 2010<br />8<br />
    9. 9. Technology Fragmentation<br />Source: comScore May 2010 U.S. Mobile Subscriber Market Share. <br />9<br />
    10. 10. How do I choose?<br />
    11. 11. Context<br />
    12. 12. Evolution of Applications<br />><br />><br />Cloud<br />The cloud is necessary<br />RIA<br />Devices<br />Adobe Systems Inc.| FOTB2009<br />
    13. 13. Contextual Application: The New York Times<br />Each device enables: <br /><ul><li> A unique experience
    14. 14. A unique business model
    15. 15. Powered by the same services </li></ul>Adobe Systems Inc.| FOTB2009<br />
    16. 16. Media, widgets<br />Large Screen (Touch)<br />Passive experience<br />Basic Interaction<br />Applications, Media<br />Large Screen<br />Engaged Experience<br />Complex Interaction<br />Telephony, social<br />Small Screen<br />Reactive experience<br />Complex Interaction<br />Context: Respect the “Soul” of the device<br />
    17. 17. Contextual Application: Animentals<br />
    18. 18. Device Evolution<br />2007 ??<br /><br />16<br />
    19. 19. Tap is the new <br />Click<br />
    20. 20. Optimization<br />
    21. 21. Recycle– love the Garbage Collector<br />
    22. 22. Text Rendering<br /><ul><li> Use opaque background over transparency
    23. 23. Avoid TLF
    24. 24. Use device fonts if possible
    25. 25. Avoid frequentlyupdating “large” amounts of text
    26. 26. Text can take up ALOT of memory</li></ul>LoremIpsum dolor…<br />
    27. 27. Redraw Regions<br /><ul><li> If an object moves, its bounding box is a "redraw region"
    28. 28. Objects that overlap the redraw region are redrawn
    29. 29. Masking can help</li></ul>See which areas of your movie are refreshed every frame.<br /><ul><li> Test Movie. View > Show Redraw Regions
    30. 30. Right-click > Show Redraw Regions (debug player only)</li></li></ul><li>Horizontal? Vertical? Both? <br /><ul><li>Content should dictate orientation, but don’t forget about the keyboard.
    31. 31. Consider adjusting content based on layout:</li></ul>stage.scaleMode = StageScaleMode.NO_SCALE;<br />stage.align = StageAlign.TOP_LEFT;<br />function setPosition():void<br />{<br />vidHolder.x = stageWidth/2 - vidHolder.width/2;<br />vidHolder.y = stageHeight/2 - vidHolder.height/2;<br />//If the layout is vertical<br />if (stage.stageWidth < stage.stageHeight)<br />{<br />//Adjust graphics<br />}<br />}<br />stage.addEventListener(Event.RESIZE, resizeLayout);<br />function resizeLayout(e:Event):void<br />{<br />setPosition();<br />}<br />800px<br />800px<br />480px<br />480px<br />
    32. 32. Display Objects<br /><ul><li> Use the appropriate type of display object
    33. 33. getSize(); will return object size</li></ul>Objects that aren’t interactive, use Shape();<br />trace(getSize(new Shape()));<br />// output: 216<br />Interactive but no timeline? Use Sprite();<br />trace(getSize(newSprite()));// output: 396<br />Need animation? Use Movieclip();<br />trace(getSize(newMovieClip()));// output: 416<br />
    34. 34. Bitmap Caching<br />cacheAsBitmap - the object is rendered into an offscreen bitmap<br />Automatically used when:<br /><ul><li> Object overlaps a redraw region and the object is unchanged (except position)</li></ul>Bitmap caching issues:<br /><ul><li> Uses a lot of memory (width * height * 4 bytes)
    35. 35. Objects with cached bitmaps are expensive to change</li></ul>Don’t use cacheAsBitmap when:<br /><ul><li> Changing object’s size
    36. 36. Animating objects position, or it’s children
    37. 37. Object is static</li></ul>Test, Test, Test!!!<br />
    38. 38. Video performance problems<br />Inappropriate video encoding<br />Inefficient video player<br />Device hardware, CPU/GPU, drivers<br />Network connectivity, traffic shaping<br />
    39. 39. Video encoding format<br />