iPhone Human Interface Guidelines for Web Applicat

iPhoneHumanInterfaceGuidelinesforWebApplicationsUserExperience2010-01-29AppleInc.©2010AppleInc.Allrightsreserved.Nopartofthispublicationmaybereproduced,storedinaretrievalsystem,ortransmitted,inanyformorbyanymeans,mechanical,electronic,photocopying,recording,orotherwise,withoutpriorwrittenpermissionofAppleInc.,withthefollowingexceptions:AnypersonisherebyauthorizedtostoredocumentationonasinglecomputerforpersonaluseonlyandtoprintcopiesofdocumentationforpersonaluseprovidedthatthedocumentationcontainsApple’scopyrightnotice.TheApplelogoisatrademarkofAppleInc.Useofthe“keyboard”Applelogo(Option-Shift-K)forcommercialpurposeswithoutthepriorwrittenconsentofApplemayconstitutetrademarkinfringementandunfaircompetitioninviolationoffederalandstatelaws.Nolicenses,expressorimplied,aregrantedwithrespecttoanyofthetechnologydescribedinthisdocument.Appleretainsallintellectualpropertyrightsassociatedwiththetechnologydescribedinthisdocument.ThisdocumentisintendedtoassistapplicationdeveloperstodevelopapplicationsonlyforApple-labeledcomputers.Everyefforthasbeenmadetoensurethattheinformationinthisdocumentisaccurate.Appleisnotresponsiblefortypographicalerrors.AppleInc.1InfiniteLoopCupertino,CA95014408-996-1010Apple,theApplelogo,Aqua,Dashcode,iPhone,iPod,iPodtouch,Mac,MacOS,andSafariaretrademarksofAppleInc.,registeredintheUnitedStatesandothercountries.JavaisaregisteredtrademarkofOracleand/oritsaffiliatesHelveticaisaregisteredtrademarkofHeidelbergerDruckmaschinenAG,availablefromLinotypeLibraryGmbH.IOSisatrademarkorregisteredtrademarkofCiscointheU.S.andothercountriesandisusedunderlicense.SimultaneouslypublishedintheUnitedStatesandCanada.EventhoughApplehasreviewedthisdocument,APPLEMAKESNOWARRANTYORREPRESENTATION,EITHEREXPRESSORIMPLIED,WITHRESPECTTOTHISDOCUMENT,ITSQUALITY,ACCURACY,MERCHANTABILITY,ORFITNESSFORAPARTICULARPURPOSE.ASARESULT,THISDOCUMENTISPROVIDED“ASIS,”ANDYOU,THEREADER,AREASSUMINGTHEENTIRERISKASTOITSQUALITYANDACCURACY.INNOEVENTWILLAPPLEBELIABLEFORDIRECT,INDIRECT,SPECIAL,INCIDENTAL,ORCONSEQUENTIALDAMAGESRESULTINGFROMANYDEFECTORINACCURACYINTHISDOCUMENT,evenifadvisedofthepossibilityofsuchdamages.THEWARRANTYANDREMEDIESSETFORTHABOVEAREEXCLUSIVEANDINLIEUOFALLOTHERS,ORALORWRITTEN,EXPRESSORIMPLIED.NoAppledealer,agent,oremployeeisauthorizedtomakeanymodification,extension,oradditiontothiswarranty.Somestatesdonotallowtheexclusionorlimitationofimpliedwarrantiesorliabilityforincidentalorconsequentialdamages,sotheabovelimitationorexclusionmaynotapplytoyou.Thiswarrantygivesyouspecificlegalrights,andyoumayalsohaveotherrightswhichvaryfromstatetostate.ContentsIntroductionIntroduction7OrganizationofThisDocument7SeeAlso8Chapter1iPhoneandtheUser’sEnvironment9It’saBrowser-BasedWorld9iPhoneandItsPlaceintheUser’sWorld10iPhoneasWebPlatform10NetworkConnectivity10SafarioniPhone11TheiPhoneViewport11TheiPhoneUserInteractionModel13Chapter2ContentoniPhone:IsItaWebpageoranApplication?15TypesofiPhoneContent15DecideHowtoPositionYourContent16DesignforYourUsers17Chapter3PrinciplesandGuidelinesforCreatingGreatiPhoneContent21SimplicityandEaseofUse21MakeItObvious22AvoidClutter23MinimizeRequiredInput23ExpressInformationSuccinctly24ProvideFingertip-SizedTargets24AvoidUnnecessaryInteractivity25Focus25Communication26Consistency28Responsiveness29Interoperability29Adaptability30Chapter4Metrics,LayoutGuidelines,andTips31CreateanIconforYourWebApplicationorWebpage31UseCustomCSS32LayOutContentforSafarioniPhone3332010-01-29|©2010AppleInc.AllRightsReserved.ConsiderHidingtheSafarioniPhoneUserInterface36ConsidertheListApproach37Edge-to-EdgeListMetrics38Rounded-RectangleListMetrics39AccommodatetheBuilt-inFormInterface40Keyboards41ThePop-upMenu42CreateCustomFormControls43BeAwareofDefaultControlStyles43ProvideaCustomNavigationSolution46PayAttentiontoText47Glossary49DocumentRevisionHistory5142010-01-29|©2010AppleInc.AllRightsReserved.CONTENTSFiguresandTablesChapter1iPhoneandtheUser’sEnvironment9Figure1-1DifferencesbetweenSafarioniPhoneandSafarionthedesktop12Table1-1GesturesusersmaketointeractwithiPhone13Chapter2ContentoniPhone:IsItaWebpageoranApplication?15Figure2-1SafarioniPhonedisplaysthemissingplug-iniconwhenthird-partyplug-insarepresent15Figure2-2Thebuilt-inWeatherapplicationfocusesonasingletask16Chapter3PrinciplesandGuidelinesforCreatingGreatiPhoneContent21Figure3-1Themostimportantinformationshouldbethemostprominent22Figure3-2Thebuilt-inStopwatchfunctionmakesitsusageobvious23Figure3-3Thebuilt-inCalculatorapplicationdisplaysfingertip-sizedcontrols25Figure3-4Thebuilt-inCalendarapplicationisfocusedondaysandevents26Figure3-5AnalertinSafarioniPhone27Figure3-6Thecontrolsandlistofthebuilt-inWorldClockfunctionmakeitconsistentwithotherbuilt-inapplications28Chapter4Metrics,LayoutGuidelines,andTips31Figure4-1AsimpleiconbeforeitisdisplayedasaWebClip32Figure4-2AsimpleicondisplayedasaWebClipontheHomescreen32Figure4-3TheadditionaltrailerscontrolsontheApplemovietrailerswebpagewhenviewedinSafarionthedesktop33Figure4-4TheprevioustrailerscontrolontheApplemovietrailerswebpagewhenviewedinSafarioniP