Best Practice iPhone SDK App Design

Thansk to bess.ho

Best Practice iPhone SDK App Design 

 Presentation Transcript

• 1. "Best Practice" iPhone SDK App Design Bess Ho UI & iPhone Developer Silicon Valley Code Camp (SVCC) Oct 3-4, 2009 Foothill College Los Altos CA Twitter: bayareaparty
• 2. UI Developer / Architect Spock Bess Half Vulcan Half Developer Half Human Half Designer Pointed Ears Pointed Eyes “I am a Developer, Not a Designer”
• 3. Spock Bess Complex Mind Complex Background “It would be illogical to assume that all conditions remain stable.” - Spock “It would be illogical to assume that a good developer can’t design.” - Bess
• 4. Dancing Piano Dancing Drum Dancing Steel Drum Doctor Tricorder Sound Tricorder
• 5. Founder of Silicon Valley Web Builder (SVWB) Mentor Google Technology User Group (GTUG) Open Source Project “Chief Medical Officer” based on Google Health
• 6. 1st Book on Myspace Technical Editor 1st Book on Open Social Building OpenSocial Apps: A Field Guide to Working with the MySpace Platform Authors: Chris Cole, Chad Russell, Jessica Whyte Published Oct 23, 2009 Publisher: Addison-Wesley Professional. Part of the Developer's Library series.
• 7. One-Girl-Shop References Blog Featured by WordPress Based on “Objective-C” Tag http://webbuilders.wordpress.com/ Powerpoints http://www.slideshare.net/bess.ho Code Examples http://code.google.com/p/iphonebuilder/
• 8. What are we going Learn?
• 9. No. 1 One-Girl-Shop Shorten your design & development cycle Tips & Tricks
• 10. 2 No. Submission Requirements Apple Store Review Process Increase Your Chance of Approval Do & Do Not Lists
• 11. 3 No. Product Definition Design Better App Improve User Experience
• 12. No.4 Backup Anything impossible would be possible Backup your Artwork & Xcode projects
• 13. Approval Process Based on approvals process for iPhone applications, in a filing to the US Federal Communications Commission (FCC) in 2009 95% apps are approved within 14 days of submission Apple has 40 Full Time trained reviewers studying 8,500 new apps a week 20% “not approved as original submitted” but sent back to developer for tweaks & changes http://www.mobile-ent.biz/news/34116/Apple-reveals-some-details-about-App- Store-approval-process
• 14. Controversial Apps Based on approvals process for iPhone applications, in a filing to the US Federal Communications Commission (FCC) in 2009 “established an App Store executive review board that determines procedures and sets policy for the review process, as well as reviews applications that are escalated to the board because they raise new or complex issues.” The board meets once a week. http://www.mobile-ent.biz/news/34116/Apple-reveals-some-details-about-App- Store-approval-process
• 15. App Submission Required Images 512x512 JPG (Promotional Image) 480x320 JPG (Landscape App Image) 320x480 JPG (Portrait App Image)
• 16. iPhone SDK App Required Images 57x57 PNG Icon.png (App Icon) 29x29 PNG Icon-Small.png (Setting & Search Icon) 480x320 PNG Default.png (Landscape Loading Image) 320x480 PNG Default.png (Portrait Loading Image)
• 17. Prepare Images The standard bit depth for icons and images is 24 bits (8 bits each for red, green, and blue), plus an 8-bit alpha channel. The PNG format is recommended, because it preserves color depth and supports an embedded alpha channel. No need to constrain your palette to web- safe colors
• 18. Prepare Icons Start with highest resolution quality image Create 512x512 160+ dpi artwork Convert them into 3 sizes Save them to Apple preferred names Apple expects consistency in images 512x512 72 dpi app_icon.jpg 57x57 160+ dpi Icon.png 29x29 160+ dpi Icon-Small.png
• 19. App Icon Design 57x57 160+ dpi Icon.png By default 1) Apply round-corners 2) Apply shine 3) Apply Drop shadow Best investment Pick a color to position your app on the rainbow wall Apple tends to select & feature app with good icon design in stores, conferences and Ads Avoid using images similar to Apple icons & images
• 20. Info.plist
• 21. App Icon Design 29x29 160+ dpi Icon-Small.png Used to be Icon-Setting.png Every application should supply a small icon that iPhone OS can display when the application name matches a term in a Spotlight search. Applications that supply settings should also supply this icon to identify them in the built-in Settings application.
• 22. App Icon Design 57x57 160+ dpi Icon.png Remove default shine Add the UIPrerenderedIcon key to your application’s Info.plist file
• 23. App Icon Design 57x57 160+ dpi Icon.png Recommend to add your app name to your icon if your app name is too long to show on iphone home screen By default Bundle display name use your Xcode Project name Add App name to Info.plist file
• 24. Prepare Backgrounds Improve User Experience Make your loading image similar to your App Background if your app requires a longer loading time Default.png (Loading Image) background.png (App Background Image)
• 25. Image Location Icon.png, Icon-Setting.png, Default.png are suggested to saved at the root of Xcode project Organize images & audio files in Groups under “Resources” folder Drag & Drop entire folders into Xcode Project
• 26. System-Provided Buttons & Icons Toolbars & Navigation Bars Icon UIBarButtonSystemItem
• 27. Toolbars & Navigation Bars Icon UIBarButtonSystemItemDone, UIBarButtonItemStylePlain, UIBarButtonSystemItemCancel, UIBarButtonItemStyleBordered, UIBarButtonSystemItemEdit, UIBarButtonItemStyleDone UIBarButtonSystemItemSave, UIBarButtonSystemItemAdd, UIBarButtonSystemItemFlexibleSpace, UIBarButtonSystemItemFixedSpace, UIBarButtonSystemItemCompose, UIBarButtonSystemItemReply, UIBarButtonSystemItemAction, UIBarButtonSystemItemOrganize, UIBarButtonSystemItemBookmarks, UIBarButtonSystemItemSearch, UIBarButtonSystemItemRefresh, UIBarButtonSystemItemStop, UIBarButtonSystemItemCamera, UIBarButtonSystemItemTrash, UIBarButtonSystemItemPlay, UIBarButtonSystemItemPause, UIBarButtonSystemItemRewind, UIBarButtonSystemItemFastForward, UIBarButtonSystemItemUndo, / iPhoneOS 3.0 / UIBarButtonSystemItemRedo, / iPhoneOS 3.0 /
• 28. System-Provided Buttons & Icons Tab Bar Tabs Icon Table Rows
• 29. System-Provided Buttons & Icons Use pure white with appropriate alpha Do not include a drop shadow Use anti-aliasing Toolbar Icons Navigation Bar Icons Tab Bar Icons 20 x 20 pixels 30 x 30 pixels
• 30. iPhone Human Interface Guidelines http://developer.apple.com/safari/library/ documentation/InternetWeb/Conceptual/ iPhoneWebAppHIG/Introduction/ Introduction.html
• 31. Prepare Audio Most Popular Audio Methods AudioServicesPlaySystemSound AVAudioPlayer
• 32. Do Not DO NOT Copy-Right Materials (Image, Audio, etc) DO NOT use License Materials unless you have written documents to prove your ownership DO NOT use any Brand or Trademark names DO NOT use any images too similar to iphone system icons DO NOT submit app with warnings & errors DO NOT treat Apple Review Team as QA
• 33. Debug & Audit Test your app in both iPhone Simulator & Device Test your app in both iTouch & iPhone 50% users are on iTouch No Warning Console No Error Xcode Device
• 34. 1st / 2nd App Sound Tricroder & Doctor Tricorder 1st iPhone SDK Trekkie from TV to Movies Star Trek Movie Release in May Loyal Star Trek Fans Worldwide Tricorders in App Store Suck Poor Interface Old Generation Tricorder Few Low-quality Sound Barely Any Animations Entertainment Only
• 35. Explanation In Review 3 months Instead of crying Or beating up Apple iPhone Review Team Convert my anger & frustration to creating new app 2 months wait Shorten Development Not related to Cycle & Release Early technical issues
• 36. Product Definition Solve a sticky problem Create your own niche Create new market
• 37. Product Definition Solve a sticky problem Apple won’t approve SDK app that is similar to web Create your own niche app Create new market Apple won’t approve your app if it is similar to existing app in App Store Apple won’t approve your app if it doesn’t have enough features
• 38. Design Rules Keep it Simple Design for Dummies No Guessing Picture worths thousand words Do One Thing Really Well Less Touch = Clicks Fewer Screens = Page Load Fast Loading Lower Latency
• 39. Design Rules Make it Fun Use interesting images Use movements Engage users
• 40. Product Definition Dancing Series - Use Accelerometer Interests Target Strengths Want anyone without music I love music training can play I play music for years It is more entertaining and engaging to design app I love dancing involved movement I love design Music is universal with no language barrier All age groups All genders
• 41. Product Strategy Dancing Series Music Band Dancing Piano Dancing Drum Dancing Steel Drum Dancing Tambourine
• 42. Competition: Leading Drum Apps in Top 100 Drum Kit DigitDrummer $1.99 / Free $0.99 / Free Volume Control No Volume Control (Flip View) Pay $1.99 Extra Recording Recording
• 43. Marketing Positioning: Competitive Differentiation 1st Drum App uses Dancing Drum Accelerometer $0.99 Volume Control - Same View Brighter Cheerful More Sound Touch Play Motion Play Casual Play - All Ages Accelerometer > Record
• 44. Drum Kit Drum Kit Lite Free Rank: 12 Drum $1.99 Rank: 55 DigitDrummer DigiDrummer Lite Free Rank: 14 DigiDrummer Micro $0.99 Rank: 485 DigiDrummer $0.99 Rank: 62
• 45. Dancing Drum Dancing Drum $0.99 Rank: 1496 Not Perfect Shorten Development Cycle Release Early 1st Release 1.0 Bad Timing OS2.2.1 - OS3.0 Buried at the bottom in Release Date due to inexperience
• 46. Drum Kit DigitDrummer Dancing Drum 6 Drums 5 Cymbals 4 Drums 4 Cymbals 5 Drums 6 Cymbals + 5 Extra DigiDrummer Lite Free Rank: 14 Dancing Drum $0.99 Rank: 1495 Drum Kit Lite Free Rank: 12 DigiDrummer Micro $0.99 Rank: 485 Drum $1.99 Rank: 55 DigiDrummer $0.99 Rank: 62 2.2 Versions 1.0 Versions 2.6 Versions 1.1 Versions 54266 ratings 0 ratings 3035 ratings 18207 ratings 1.7 Versions 3.3 Versions 1212 ratings 2904 ratings Data from Moblix 6/22/09
• 47. DEMO Rank within Top 100 Rank: 1495 DigitDrummer Dancing Drum Drum Kit
• 48. Once In Your Lifetime Don’t make any Apple won’t allow you to mistakes in change Release Date once submitting your app the date is past Don’t keep changing Apple won’t allow you to get Release Date into Newly Release category after re-submit for update Save the right Category Prepare for your Launch & Marketing Campaign
• 49. 6 Major Types of Mockup / Prototype Paper Prototype Online Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
• 50. Mockup Tools Paper Prototype 1 Paper + Pen 2 Metal Stencil $ 3 Online Prototype Sketching 4 Balsamiq stencils 5 Omnigraffle stencils 6 Visio template 7, 8, 9 Adobe Photoshop, Illustrator, Firework 10 Yahoo! Design Stencil Kit
• 51. Mockup Tools iPhone SDK IDEs 11 Dash Code (Drag & Drop) 12 Xcode’s Interface Builder (Drag & Drop) iPhone SDK Frameworks 13 Titanium (HTML / CSS / JS) 14 Phone Gap (HTML / CSS / JS) 15 Corona (Lua) 16 MonoTouch (C# .NET)
• 52. Mockup Tools iPhone Webkit Frameworks 17 iUI (HTML / CSS / JS) 18 CiUI (HTML / CSS / JS) 19 JQTouch (HTML / CSS / JS)
• 53. 6 Major Types of Mockup / Prototype Paper Prototype Online Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
• 54. Paper Prototype Pen + Paper http://www.designcommission.net/stencils/ iphone_stencil_paper.pdf
• 55. Paper Prototype Downloadable .PDF letter or A4 sized printable template http://www.designcommission.com/shop/iphone- stencil-kit/
• 56. Paper Prototype http://labs.boulevart.be/index.php/2008/06/05/ sketch-paper-for-the-mobile-designer/
• 57. 6 Major Types of Mockup / Prototype Paper Prototype Online Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
• 58. Online Prototype http://iphonemockup.lkmc.ch/
• 59. 6 Major Types of Mockup / Prototype Paper Prototype Online Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
• 60. Blue Print http://www.flickr.com/photos/flingmedia/2734477874/
• 61. Balsamiq http://www.balsamiq.com/
• 62. Omnigraffle Stencils http://www.graffletopia.com/search/iphone
• 63. Adobe Illustrator & Photoshop http:// http:// www.mercuryintermedia.com/ www.teehanlax.com/ blog/index.php/2009/03/iphone- blog/?p=1628 ui-vector-elements/
• 64. Adobe Firework CS3 & CS4 http://blog.metaspark.com/2009/02/fireworks-toolkit-for- creating-iphone-ui-mockups/
• 65. Yahoo! Design Stencil Kit OmniGraffle, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG) http://developer.yahoo.com/ypatterns/about/stencils/
• 66. 6 Major Types of Mockup / Prototype Paper Prototype Online Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
• 67. iPhone SDK Dash Code http://developer.apple.com/iphone/library/documentation/AppleApplications/ Conceptual/Dashcode_UserGuide/Contents/Resources/en.lproj/Introduction/ Introduction.html
• 68. Xcode’s Interface Builder
• 69. 6 Major Types of Mockup / Prototype Paper Prototype Online Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
• 70. No.4 Backup Anything impossible would be possible Backup your Artwork & Xcode projects
• 71. iPhone SDK Frameworks HTML CSS JavaScript Titanium PhoneGap http://www.appcelerator.com/ http://phonegap.com/ products/titanium-mobile/
• 72. iPhone SDK Frameworks MonoTouch Corona C# .NET Lua http://monotouch.net/ http://www.anscamobile.com/
• 73. 6 Major Types of Mockup / Prototype Paper Prototype Online Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
• 74. iPhone WebKit Frameworks jQTouch http://www.jqtouch.com/ CiUI iUI http://code.google.com/ http:/ code.google.com/ / p/ciui-dev/ p/iui/wiki/Introduction
• 75. Mockup / Prototype Business Developers Paper Prototype Paper Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks
• 76. Rapid Prototyping Developers Paper Prototype (Fast) iPhone SDK IDEs (Drag & Drop)
• 77. Family Project Design App Prepare Assets Paper Online / Desktop Audio iPhone 3Gs Audacity aviary.com Swatch.app Images GIMP pixlr.com sumopaint.com picnik.com aviary.com
• 78. sumopaint.com Free Images http:/ /www.freephotosbank.com/ http://www.everystockphoto.com/ http://www.imageafter.com/
• 79. Testing Code on Device http://www.mobileorchard.com/iphone- development-provisioning/
• 80. $99 iPhone Developer Program Portal Vibration Location Manager Mail Application Map Application Safari Application Device Orientation Accelerometer Audio Performance Overall Performance
• 81. iPhone Developer 1. Add Device Program Portal 2. Xcode Organizer
• 82. iPhone Developer Program Portal 3. Create Developer Certificate 4. Add to Keychain
• 83. iPhone Developer Program Portal 5. Create Apple ID 6. Create Provisioning Profile
• 84. iPhone Developer Program Portal 7. Add Provisioning Profile to Xcode Organizer 8. Test Code
• 85. Case Study
• 86. A No.
• 87. B No.
• 88. C No.
• 89. Tell Me Which is Best & Why
• 90. myStarbucks Find a Starbucks Coffee Sep 16, 2009 Version 1.0 Aug 9, 2009 Version 2.0 Free $0.99 Go Grande - Find your nearest Starbucks Feb 6 2009 Version 1.0.0 $0.99
• 91. Q&A