CS4720

iOSHumanInterfaceGuidelines

CS4720– MobileApplicationDevelopment

https://developer.apple.com/ios/human-interface-guidelines/

CS4720

HumanInterfaceGuidelines• (…becausewe’renotworriedabouttherobotsusingiPhonesyet…)

• Maintenants:– ContentoverUI– Usethewholescreen– Single/simplecolors– Boarderless buttonsandwidgets

2

CS4720

ThemesofiOS• Clarity. Throughoutthesystem,textislegibleateverysize,iconsarepreciseandlucid,adornmentsaresubtleandappropriate,andasharpenedfocusonfunctionalitymotivatesthedesign.Negativespace,color,fonts,graphics,andinterfaceelementssubtlyhighlightimportantcontentandconveyinteractivity.

3

CS4720

ThemesofiOS• Deference. Fluidmotionandacrisp,beautifulinterfacehelppeopleunderstandandinteractwithcontentwhilenevercompetingwithit.Contenttypicallyfillstheentirescreen,whiletranslucencyandblurringoftenhintatmore.Minimaluseofbezels,gradients,anddropshadowskeeptheinterfacelightandairy,whileensuringthatcontentisparamount.

4

CS4720

ThemesofiOS• Depth. Distinctvisuallayersandrealisticmotionconveyhierarchy,impartvitality,andfacilitateunderstanding.Touchanddiscoverabilityheightendelightandenableaccesstofunctionalityandadditionalcontentwithoutlosingcontext.Transitionsprovideasenseofdepthasyounavigatethroughcontent.

5

CS4720

BasicUIControls

6

CS4720

BasicUIControls• Bars- Containcontextualinformationthattellsuserswheretheyareandcontrolsthathelpusersnavigateorinitiateactions

• Contentviews- Containapp-specificcontentandcanenablebehaviorssuchasscrolling,insertion,deletion,andrearrangementofitems

7

CS4720

BasicUIControls• Controls– Performactionsordisplayinformation

• Temporaryviews- Appearbrieflytogiveusersimportantinformationoradditionalchoicesandfunctionality

8

CS4720

UILayers

9

CS4720

StartingandStopping• Gostraightintotheapp– nosplashifpossible• Don’taskforinfoupfront– trytogatheritfromothersources

• Launchinthecurrentdevice’sorientation• Thereisno“quit”or“stop”– justanappswitch

• Savefinedetailstatedataasoftenasreasonable

10

CS4720

Whichwouldyourathersee?

11

CS4720

Navigation• Shouldbe“natural”• Nav bartotraversehierarchyofdata• Tabbarforseveralpeercategoriesorfunctionalities

• Newpagewhenthatpageisaninstanceofanitemfromanotherpage

12

CS4720

BasicUIControls

13

CS4720

Modals

14

CS4720

Modals• ModalsareUIelementsthatgrabcontroloftheexperienceuntiltheyaredismissed

• Meanttograbattentionandfordoingone,small,specifictask

• Usuallyaskingaquestionwithsetanswers• Makesurethereisawaytobackout• Recordcommonoptions• Respectnotificationwishesoftheuser

15

CS4720

Interactivity• Useakeycolortodenoteinteractiveelements• Highlightparticularinteractiveelementsiftheydosomethingdifferentthanthespacearoundthem

• Don’toverloadgestures!• IntegratestatusintoyourUIasmuchaspossible

• Avoidunneccesary alerts/modals• Usetheeasiestmethodtoinputdata

16

CS4720

Interactivity

17

CS4720

Branding• It’simportanttobedistinctive…but…• Becarefulyoudon’tpullauseroutoftheiOSexperience

• Youdon’tHAVEtomakeyourapplooklikethebuiltinapps…but…

18

CS4720

Branding

19

CS4720

ColorPalletandTypography• SanFranciscoisthenewfont• Don’thavetouseit…but…• Colorsareboldandclean

20

CS4720

Iconography• Agoodappiconisactuallyprettyimportant• iOSprovidesalotofbuilt-insmalliconsforuseinyourapp

21

CS4720

HowtoUseUIElements• https://developer.apple.com/ios/human-interface-guidelines/ui-bars/navigation-bars/

22