Best Practice iPhone SDK App Design

"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

UI Developer / Architect Spock Bess Half Vulcan Half Developer Half Human Half Designer Pointed Ears Pointed Eyes “I am a Developer, Not a Designer”

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

Dancing Piano Dancing Drum Dancing Steel Drum Doctor Tricorder Sound Tricorder

Founder of Silicon Valley Web Builder (SVWB) Mentor Google Technology User Group (GTUG) Open Source Project “Chief Medical Ofﬁcer” based on Google Health

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.

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/

What are we going Learn?

No. 1 One-Girl-Shop Shorten your design & development cycle Tips & Tricks

2 No. Submission Requirements Apple Store Review Process Increase Your Chance of Approval Do & Do Not Lists

3 No. Product Deﬁnition Design Better App Improve User Experience

No.4 Backup Anything impossible would be possible Backup your Artwork & Xcode projects

Approval Process Based on approvals process for iPhone applications, in a ﬁling 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

Controversial Apps Based on approvals process for iPhone applications, in a ﬁling 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

App Submission Required Images 512x512 JPG (Promotional Image) 480x320 JPG (Landscape App Image) 320x480 JPG (Portrait App Image)

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)

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

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

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

Info.plist

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.

App Icon Design 57x57 160+ dpi Icon.png Remove default shine Add the UIPrerenderedIcon key to your application’s Info.plist ﬁle

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 ﬁle

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)

Image Location Icon.png, Icon-Setting.png, Default.png are suggested to saved at the root of Xcode project Organize images & audio ﬁles in Groups under “Resources” folder Drag & Drop entire folders into Xcode Project

System-Provided Buttons & Icons Toolbars & Navigation Bars Icon UIBarButtonSystemItem

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 /

System-Provided Buttons & Icons Tab Bar Tabs Icon Table Rows

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

iPhone Human Interface Guidelines http://developer.apple.com/safari/library/ documentation/InternetWeb/Conceptual/ iPhoneWebAppHIG/Introduction/ Introduction.html

Prepare Audio Most Popular Audio Methods AudioServicesPlaySystemSound AVAudioPlayer

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

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

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

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

Product Deﬁnition Solve a sticky problem Create your own niche Create new market

Product Deﬁnition 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

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

Design Rules Make it Fun Use interesting images Use movements Engage users

Product Deﬁnition 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

Product Strategy Dancing Series Music Band Dancing Piano Dancing Drum Dancing Steel Drum Dancing Tambourine

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

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

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

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

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

DEMO Rank within Top 100 Rank: 1495 DigitDrummer Dancing Drum Drum Kit

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

6 Major Types of Mockup / Prototype Paper Prototype Online Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks

Mockup Tools Paper Prototype 1 Paper + Pen 2 Metal Stencil $ 3 Online Prototype Sketching 4 Balsamiq stencils 5 Omnigrafﬂe stencils 6 Visio template 7, 8, 9 Adobe Photoshop, Illustrator, Firework 10 Yahoo! Design Stencil Kit

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)

Mockup Tools iPhone Webkit Frameworks 17 iUI (HTML / CSS / JS) 18 CiUI (HTML / CSS / JS) 19 JQTouch (HTML / CSS / JS)

Paper Prototype Pen + Paper http://www.designcommission.net/stencils/ iphone_stencil_paper.pdf

Paper Prototype Downloadable .PDF letter or A4 sized printable template http://www.designcommission.com/shop/iphone- stencil-kit/

Paper Prototype http://labs.boulevart.be/index.php/2008/06/05/ sketch-paper-for-the-mobile-designer/

Online Prototype http://iphonemockup.lkmc.ch/

Blue Print http://www.ﬂickr.com/photos/ﬂingmedia/2734477874/

Balsamiq http://www.balsamiq.com/

Omnigrafﬂe Stencils http://www.grafﬂetopia.com/search/iphone

Adobe Illustrator & Photoshop http:// http:// www.mercuryintermedia.com/ www.teehanlax.com/ blog/index.php/2009/03/iphone- blog/?p=1628 ui-vector-elements/

Adobe Firework CS3 & CS4 http://blog.metaspark.com/2009/02/ﬁreworks-toolkit-for- creating-iphone-ui-mockups/

Yahoo! Design Stencil Kit OmniGrafﬂe, Visio (XML), Adobe Illustrator (PDF and SVG), and Adobe Photoshop (PNG) http://developer.yahoo.com/ypatterns/about/stencils/

iPhone SDK Dash Code http://developer.apple.com/iphone/library/documentation/AppleApplications/ Conceptual/Dashcode_UserGuide/Contents/Resources/en.lproj/Introduction/ Introduction.html

Xcode’s Interface Builder

No.4 Backup Anything impossible would be possible Backup your Artwork & Xcode projects

iPhone SDK Frameworks HTML CSS JavaScript Titanium PhoneGap http://www.appcelerator.com/ http://phonegap.com/ products/titanium-mobile/

iPhone SDK Frameworks MonoTouch Corona C# .NET Lua http://monotouch.net/ http://www.anscamobile.com/

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

Mockup / Prototype Business Developers Paper Prototype Paper Prototype Sketching iPhone SDK IDEs iPhone SDK Frameworks iPhone Webkit Frameworks

Rapid Prototyping Developers Paper Prototype (Fast) iPhone SDK IDEs (Drag & Drop)

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

sumopaint.com Free Images http:/ /www.freephotosbank.com/ http://www.everystockphoto.com/ http://www.imageafter.com/

Testing Code on Device http://www.mobileorchard.com/iphone- development-provisioning/

$99 iPhone Developer Program Portal Vibration Location Manager Mail Application Map Application Safari Application Device Orientation Accelerometer Audio Performance Overall Performance

iPhone Developer 1. Add Device Program Portal 2. Xcode Organizer

iPhone Developer Program Portal 3. Create Developer Certiﬁcate 4. Add to Keychain

iPhone Developer Program Portal 5. Create Apple ID 6. Create Provisioning Proﬁle

iPhone Developer Program Portal 7. Add Provisioning Proﬁle to Xcode Organizer 8. Test Code

Case Study

A No.

B No.

C No.

Tell Me Which is Best & Why

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

Q&A

Best Practice iPhone SDK App Design

0 comments

Notes on slide 1

16 Favorites & 1 Event