Your SlideShare is downloading. ×
10 Design Commandments for Mobile App Developers
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 Design Commandments for Mobile App Developers

892

Published on

Top ten design blindspots for Mobile app developers. Mostly based on my first experiences with Mobile design, as a developer. …

Top ten design blindspots for Mobile app developers. Mostly based on my first experiences with Mobile design, as a developer.

Original deck presented at XConf 2011, ThoughtWorks, Pune.

Images used in the keynote are for illustrative purposes only.

Published in: Design, Technology, Spiritual
1 Comment
0 Likes
Statistics
Notes
  • Though I am not a developer, but found the article really informative & useful. Good show!!
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total Views
892
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
0
Comments
1
Likes
0
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
  • Developers. Emphasis.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Flow. User Experience.\n
  • I remember about 2-3 weeks back, I was driving back home in my car from a late night party with two other friends – who were both from Advertising backgrounds. It was rather dark and we were barelling down MG Road to Gurgaon. The female friend in the back seat was in “high spirits” :p. Suddenly she jumped up and started pointing at the rear of a car ahead of us going ‘Look! Look! That car is smiling!”. Then she pointed to another car a few minutes later, ‘Look! That one is not too happy. But Its smirking!”. She was making out faces in the rear ends of the cars. The bright red brake lights were eyes and the boot lids were the mouth. And while I sat there shaking my head in amusement and bewilderment, I saw the other two agreeing with each other and seeing the same faces in every car ahead of us. As I squinted and struggled to see a face in what were just rear ends of cars to me. ‘I have done research on cars like this! Its called Non Verbal Communication’ she announced casually. The other two egged me on and described what to look for. And then I saw it. And in the next. Until I saw faces behind every car we overtook. Happy. Sad. Even a trollFace. I saw them all \n\nWe all percive design. But we need someone to describe it to be able to communicate\n
  • Whenever possible. Try and work with specialized Mobile App Designers instead of Visualizers. Visualizers are traditional, web and print guys. Mobile designers take care of minimum hit areas, multiple resolutions, file size etc.\n
  • Strike a fine balance. Platforms give native controls. Use them. Dnt go overboard with graphic customizations\n
  • Svg -> scalabale vector graphic -> format of the future -> browsersa are beginning to support svg in html5\nPng -> highest quality , supports transparency\nGif – can contain frames, animations. Not used much now\nJpeg -> when u don’t need transparency n want to save size. Lossy compressions\nVectors -> stored as mathematical formulas, needs lots of CPU. Not good for animations\n
  • \n
  • \n
  • \n
  • \n
  • Strike a fine balance. Platforms give native controls. Use them. Dnt go overboard with graphic customizations\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • The user needs the perception of control at all times.The power to interrupt and/or abort anytime.\n
  • \n
  • \n
  • \n
  • Web n desktops traditionally -> 72 dpi\nIphone 4 -> 326 ppi . Android devices – 250-300 ppi. Ipad 132 ppi\n\nColor depth -> colr info per pixel\n
  • Eg. Fb in browser on android vs ios. Put thumb on screen while loading. Progress bar stops in iOS n UI responsiveness is max. HTC Desire HD sluggish UI update but progress bar went on. All this happens at a kernel level but key learning is : UI first. Update what u can.\n
  • \n
  • \n
  • \n
  • \n
  • Every framework might have its own.\n
  • Off screen objects/graphics are abstract concepts. But they come in handy sometimes to implent even simple things like flip screens or swipes.\n
  • Simple Send Backwards and Bring to Front becomes Z-Indexing in most frameworks. Objects have a Z-Index. The ones on the top of the stack have a higher Z-Index. And the ones below have lower Z-Indexes.\n\nSometimes Groups of objects can have complicated Layering structures. Watch out.\n
  • Groups let you modularize your design flexibly. Be careful. Some frameworks have Local Coordinate system within groups too. Much source of anguish.\n
  • \n
  • Just the basics!\nFrame is a state in an animation\nTimeline – collection of frames\n\n
  • Playhead – concept. The frame in the animation that is being displayed right now.\nFPS: frames per sec. higher fps, higher cpu.\nKeyframes – most modern softwares these days don’t need you to define every frame. Just defining the frames which have substantial change – keyframe. The software fills in the rest – tween\n
  • Motion tween. Shape tween.\n\nAnimator defines two keyframes and creates a tween. THe software fills in the intermediate transient frames.\n\n
  • Sprite sheets are 2D animations packed as multiple frames into a single texture image. This allows a much more efficient use of texture memory, which is highly limited on mobile devices, and also minimizes loading time.\n
  • \n
  • \n
  • This way you avoid png.\nDrop shadow: shade of light grey of the same text, 5 px down n right\nOutline: text of slightly large size at same location layered below\nGradient: \n
  • Image tiling saves precious file size.\n
  • \n
  • \n
  • \n
  • TG - Target audience. \nBe open to criticism.\nTalk less. Listen More.\nValue negative feedback. Don’t dig for validations.\n
  • \n
  • You never know where your idea goes if you listen to people. And you make less mistakes making assumptions about others.\n\n
  • Give examples about SayWhat app.\n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript

    • 1. 10 Commandmentsof Mobile Design*Jigyasa Makkar
    • 2. 10 Commandmentsof Mobile Design**for developersJigyasa Makkar
    • 3. Erm, did I say Commandments? Actually..
    • 4. Erm, did I say Commandments? Actually.. NO.
    • 5. Mobile App design 101?
    • 6. Mobile App design 101? No.
    • 7. Mobile App design 101? No.Ten holy tenets of Mobile development?
    • 8. Mobile App design 101? No.Ten holy tenets of Mobile development? No.
    • 9. Mobile App design 101? No.Ten holy tenets of Mobile development? No.Ten thumb rules to live by?
    • 10. Mobile App design 101? No.Ten holy tenets of Mobile development? No.Ten thumb rules to live by? No.
    • 11. then Well, itsLearnings.
    • 12. then Well, its Learnings. :)10 of them to be precise
    • 13. TL;DR VersionMobile Application Development is more DESIGN than technology stacks. Get ‘with’ the program.
    • 14. Now,The Elaborate Version:
    • 15. What is the leap like? From developer toMobile Application Developer?
    • 16. Confusing.
    • 17. Apparently, whether you Like it or not (and I did’nt), Mobile app development is about DESIGN.
    • 18. But, but.. what about.. Beautiful code,DRY Principles? BDD?Magical SQL queries?
    • 19. NO.None of those.
    • 20. Turns out.. It’s all about makingsomething Pretty. Fast. And useful.The user should WANT to use it.
    • 21. Im going to try and make commandments now :p
    • 22. 1Thou shalt acknowledge the role of Design.
    • 23. Design isn’t just about aesthetics or Prettifying mock-ups.Not how it looks. It’s how it works.
    • 24. Cliche’d as it sounds,there really IS a lot more todesign than meets the eye.Specially the untrained eye.
    • 25. Don’t“mail me the screens when you are done” your designerMobile Application Design needs to be collaborative.
    • 26. Graphics can make or break your app. Get involved. Learning to communicatewith your designer is crucial.
    • 27. Try and absorb the basics of UIdesign: File formats.Jpg, tiff, png, psd, gif, eps, svg, ai
    • 28. Try and absorb the basics of UIdesign: Vector vs Raster Graphics
    • 29. Try and absorb the basics of UIdesign: Alpha Channels (Transparency) Black = transparent
    • 30. Try and absorb the basics of UIdesign: Color Codes, Palettes, ToolsHex color codes http://kuler.adobe.com/
    • 31. Try and absorb the basics of UI design: Tap Zones/Hot Zones on Touch DevicesThe comfort zone for the right thumb falls on the opposite side of the screen. At the left edge and bottom of the screen.
    • 32. Pixelate, anti-aliasing, dpi, ppiUnderstand a designer’s workflow. Learn the lingo. Pixelate Anti-Aliasing
    • 33. 2Thou shalt optimize for speed.
    • 34. Optimize for performance.Two broad areas to go after: - Drawing (Rendering) - Scrolling
    • 35. Two step process.
    • 36. A. Speed up ‘Perceived performance’
    • 37. “The perception of performance isbased on start-up time, page-loading behavior, smoothness of transitions and animations, errors, and waiting times”
    • 38. Application Launch.Design app for quick launch and short use. Load data lazily, load only images/assets needed
    • 39. Optimizing individual screens, flows and UI elements will reduce waiting times and keep users from thinking thatthey’re wasting their time.
    • 40. Feedback! Android Marketplace App iOS Messaging App iPhone HomescreenKeep the user in the loop at all times. Let the app announce – visually or otherwise - what it is upto at any given time.
    • 41. Design can help communicate justified/ expected delays. Loading food menuIdentify chunks of code that are likely to consume time.(Retreiving data from a server, Extensive Calculations/ parsing.)
    • 42. If possible break the UI into bits that can be updated before and after executing those chunks of code.Keeps user in the Partially updated UIs keep the user dark involved. Zomato App Bookmyshow App Sugar n Spice App
    • 43. Use descriptive Preloaders. and Progress Indicators. Don’t say. DO say. “Downloading restaurant “Please Wait..” details”
    • 44. B. Optimize Individual UI Elements.
    • 45. Every UI element contributes to performance. Key aspects to look for are.. Elements on Screen.Ration the number and type of elements on screen at a time. Media items for example, are heavy!
    • 46. Element Characteristics:Image Resolution Color Depth
    • 47. Recently a ‘Google Insider’ posted on Google + about why he thought the Android OS would NEVER be as fluid and responsive as iOS. He pinned it down to the fact that Android handles UI rendering in the main thread and at Normal Priority, while iOS handles UI rendering in a separate thread with real-time priority. Over-simplified Learning? UI first.
    • 48. 3Thou shalt embrace pixels.
    • 49. Games and other Interactivity rich applications have the potency to push you to the edge of your comfort zone and beyond.
    • 50. Fight back.Get your basics in place.
    • 51. Pixel Primers Pixel level placementYour X’s and Y’s (Z’s too)
    • 52. Pixel PrimersCartesian coordinate systems
    • 53. Pixel PrimersViewports & Off-screen objects.
    • 54. Pixel PrimersLayering. Z-indexes
    • 55. Pixel Primers GroupsLocal vs Global coordinates
    • 56. Keep Snippets handy! For eg, this is what you would do to center a graphic element on screen horizontally:element.x = screen.width – element.width/2
    • 57. Animation BasicsTimeline
    • 58. Animation BasicsPlayhead, Frames, Keyframes, FPS
    • 59. Animation Basics Tweens
    • 60. Animation BasicsSprite Sheets
    • 61. 4Thou shalt Optimize.
    • 62. Probably the most important skillset to strive for. An armour of Memory/Filesizeoptimization tips & tricks and Workarounds.
    • 63. Learn to emulate basic design effects via code. * Drop shadow * Text outlinesLorem Ipsum Lorem Ipsum (Sample Text) + (Shadow) Lorem Ipsum Vector shadow created
    • 64. Use tiled images for backgrounds.Image Tile
    • 65. Spot graphic elements in your UI which couldbe satisfactorily reproduced via native shapes and design primitives in the framework. Rescue as many rasters as possible to Native Vector shapes
    • 66. And optimize for battery usage too.Try and not access peripherals when not required.Cache data that doesn’t need to be downloaded again. Save on network calls. Use Wifi whenever available instead of 3G.
    • 67. 5Thou shalt bounce.
    • 68. Test your hunches.Bounce your idea off your potential users. Identify your TG.
    • 69. Validate your ideas/beliefs of what is: Intriguin Fun Obvious g Interactiv Challengin e g Intuitive
    • 70. Talk less. Hear more.Be open to criticism and suggestions. Value negative feedback.
    • 71. My app started out as a word jumble in my headEnded up as much more funMovies & Dialogues game :)
    • 72. 6Thou shalt be byte wise.
    • 73. File-size is key. A friend owns an HTC Chacha. When phones like those run out of space (and they do real quick), theuser sorts a list of installed apps by file size and theperperators at the top are uninstalled to make space.
    • 74. Don’t top that list, bro. Okay?Optimize for file size.
    • 75. 7Thou shalt be more forgiving.
    • 76. Design to allow for errors.Keep your errors soft and friendly.Selection errors on mobile phones are higher than on desktops becausefingers can be clumsy, people are oftendistracted during use and some people have large hands
    • 77. Account for an Offline ExperienceUnlike the web, the mobile isn’t always connected to the Internet. Design for Offline Use.
    • 78. In case the app relies heavily on pulling content over the internet, Cache data offline. Flipboard App for iPhone in Offline ModeSo the user experience isn’t broken. It’s just stale, at best.
    • 79. 8Thou shalt not make me type
    • 80. Minimize Text Input Typing is a pain!
    • 81. Y U NO LEMME
    • 82. Modern day smartphones are touch and gesture optimized devices. Use buttons, sliders, radio boxes, menus andpicker wheels whenever possible instead of text inputs.
    • 83. More Touch Controls. Less typing.Pre-populate oft-repeated data or values that can be predicted based on previous recordedbehavior or intuition.
    • 84. 9Thou shalt design for the device.
    • 85. Consider the capabilites of a device before programming for it. Utilize capabilites like multi-touch gestures, Accelerometer, GPS, NFC etc wherever it fits the bill. Be judicous. Dont overdo it.
    • 86. 10Thou shalt not sin.
    • 87. Dont use Comic Sans.Dont put drop shadow on everything. Dont do yellow on white. Dont make the logo bigger. DO feel empowered to design.
    • 88. Thanks :)

    ×