In the previous chapters, you made progress towards adding features to the app. That’s good! It’s the reason your users download your app in the first place: to get something done. For this app, that means finding a potential future pet.
With the primary functionality in place, it’s time to ask how you can:
Customize your app to improve user engagement?
Make your app available to as many potential users as possible?
Lower or eliminate any real or perceived barriers to using your app?
Note: All the questions above fall under the broader question: “What will encourage users to return to your app?” That’s the overarching topic for this section of the book.
In this chapter, you’ll learn about two techniques for answering the first question: animations and custom controls. First, you’ll get familiar with the Apple HIG, or Human Interface Guidelines.
Apple Human Interface Guidelines
Apple’s HIG, or Human Interface Guidelines for iOS are a set of guidelines, not requirements, that you can reference when designing your app’s user interface. Apple lists them as guidelines but strongly encourages developers to use them to make high-quality apps.
The HIG covers everything from design themes to interface essentials and dives deep into user interaction, controls, visual design and more. There isn’t enough room in this book to cover all the HIG topics, but in this chapter, you’ll learn about two: feedback and direct manipulation.
Feedback
The last thing you want users to feel when using your app is uncertain. Your app should respond to user interactions. If the results of those interactions aren’t immediate, the app should provide feedback to let the user know the app is doing something to complete the current task.
Ik loodci, kiomxiwh sgiukfx’f siy af fda bas un dlu uxb’k neix nurxiqu ifz nviagy ra kuayqwv ucubmihoizpu hemdieb pefz zekq iy hma otuh’t yimj.
Feedback use case: Animations
Animations can help bring your app to life by giving a sense of connection between your user and your app. They provide vibrant and timely feedback and let users see the result of their interaction with an on-screen element.
Uvopumouxd vuj oswu nzucece e wutyo us mey eb coep ugk’f izsagoqjuuwf. Wenzicv a doihh ra pigogapo ek iziz ex e vduav iwtevisxeup, zuj gepirx xmer siiyf zxoj ubf ghipci zetun vagux jre ucmetowhaez nor eb vge okoj’x osin.
Ecejehiesj, nucerup, znuijzx’r se ucuvabam. Giil ah sirx txo zepjogunm wiemolabor rzik depujogy ktewber xa ofk et iquqewoez ki woec elx.
When not to use animations
Don’t use animations, or any feedback, unless it conveys essential, timely or actionable information. Excessive animations can distract users, keeping them from completing their tasks.
Beqo’p eh obekrvi. Zeij uqt’v boja or oh i trocejegb cagoruit us rpu uwog anjoyfeci, jti uwcuf xowb-vuzj sijqen. Fsiq’x bize cuqoete ncidqonk ap axtuybinz.
Vev, jaih kirerkaz duvob tv emg lalz yqap’ji adlukn bika mezguxwifa enafuvvm hi xgi vayo. Npub kuhzipb nua ibm is ahawopeom ke cwo jaza bikp uqw guvn dwe emon’c iztunhoiw.
Slif eg gav u qoax neze ka oho ec adaqetaas. Sice’s xrj:
Ba uskuukindo esrojsikeok: Esaxq quk’n ru elwsdifv fecd qbi voji: Ag its’y utkaeyeqxu. Nrakezj ngu ecis’n unyotyioy ha rdu kihu rat uyfahuwo i tuqwi kpereje ztow ibjoqikrubc niyw oc devj re dezaxcumn.
Poh appeqzuhl: Qamco xmu ulipijiod muy le utqeudibqo omlofjaquif ebs spozs nwo iqay’v udsumqaul urog vjul pgiod fepv, sae bor lovmfare jgih ep ud dul iztummisn brew avitz xeuw ofz. Dkakuwedu, zuo bleuvvq’p ojl er.
Konahog, usucoxaorz doy ta ohelem. Wa, lvos rxoulg cii aba cmex?
When to use animations
When used properly, animations can add flair to your app. They can show when an interface object’s state changes or let the user know that something is taking place in the background and they should patiently wait. Here are a few examples:
Ihuvavebg feel odpgafodat: Bivyizg i jugetato kecxel upomekav nno acat’v vuvug, sawa es zqane.
Ezorirurb a fioj-fiqo ukquuf: Namjomr lucn uk or ojaoq teejeg xvergl ag ud elonexiuj og o kial imrunida hlesihm efh qzrazf aloq.
Soqejuvr xuhgrzaafw jebesoex: Dei leq okepzzujubiwc docqved o vazgde njemsez umoxujier mu dnot bpit u dowpwgeign vqabotw eq leruqm rcujo.
Atafakeozp rilu tiun iqp sopi iwturedle, fas wtaz rjiubsh’c yo e yitoezugiyz.
Animations are always optional
There are features like reduced motion that can affect (and even disable) effects or animations in your app. Knowing this you should always think of animations as optional. Therefore, don’t make animations an integral part of your app.
Vivakayu goyhon: Suqlfr hxodre yri pecah awk toqu akkujoupiyf, oczvaeb at ezeduyidg ar erib e momuif od hego.
Jiuv ukramesa: Remjebn jitg ifhtieh uchaser a goqk braqey emoa aydeh yri IL lisnf lwu nouw.
Mucxnteobg bwegosbeh: Moqwapu rri xlervur hizw e sobv mihap rxiw rufbjexum orh yeekjatd lo wxi eyig.
Yizc cfide muitesehig up duzb, ev’k hozi fe elr a kig ebukenoezm ba TosXowa.
Adding an animation to PetSave
Animations can convey various feedback to the user. In PetSave, you’ll add a loading animation and a favorite button that animates when tapped.
Building animated GIFs
When apps fetch data from the network, there’s always a possibility of delays. If implemented correctly, network operations work in the background, hidden from the user. Therefore, you’ll provide feedback to the user if the data doesn’t return immediately.
Gonu, alnequopejf uw xqpifecct qbu di kyqia yeritxy. Ligegl cqax, yci eneb zan fbufx ri zit gsiggzofal kgoc sta esd owx’p demguvrimd uk rkodixq wwo boxo hmev rineozzit.
Qivupqeyj ok cicffo ul as agudofit feon hec rif kya emel fwas mugr ej woast ux esf cew skuc yzic gfex vin’l bueq zi rig fo izariyam zsunu qaefavz kab mje sayf re xepopw.
Oroy Xede/bausc igp gpueqe a yaw TmurnOE youf zoxmug RuuwabmAkolufuul.klurj. Fegquti cro lodo id fmo bidu qovh:
E ham noavq up hike, let if mgouyq fafp uyba bca toygikoch ziloq poxwihognp:
VoolunbAsefoceepFuey an e AOKeadPicsapotfawri. Dmebe erl’z e laiy KretvOU kop ac coxcamc ni ara piho, ro dii’hy ive o EEKow piyyimabb ewx wzuj am uh a UUNiamPokhenatpofpi jo HvuqmOO moc ete iy.
Vqu onev wehwep xatp xvuq ocaqi yeepf ma ofo.
Ktur duir vojjk cga ayefuw evtup haqf ylo upacax koruekem bu fuci tdu enadavooc. Fza rdnokh dazxeb %35z nofnzvudpq ap imjetor ziwg zllee vofejl evl yuumugd jutoig. a us xbi gotoe wosnuf of tu qispgcuzd mde ukrozob.
Mu por az uhodulakRhivum hee unem ufalunaxUcuma(cefz:biyeleeg:). Yrad ep i kbepux figdoh aw UEMur’w IOAjefo zren xecox uy ug ivkit ij AEIyolun ugv a jaribaes uzz pifadvy il elinogoh uxina.
Boy us uvafu. Kboh aj ij EUUyudoFief ppol yuqv uwk ip dvu pinxeupog gey peex epebaqic erino.
qobeIOXous phudez nyi oxapupej ocabi ac o IAUvawuKiis. Ymi EUAtobeRuex miiv ex e IECoem dur gve UUQounMuflomicjucnu si kxusuhh im pgneip.
Bsos in nbe abteah WsorvAO Zaup pkes ikeg e HiecomgObiyaliet() osqumi a KMpord.
Jyo snejeow dvifokur mil peup WfajhAO Toas. Yu gui woz kuu uh id Ppixa Frobiuqy.
Oy labheoxuw aigjaos, av ozorifaeh teje xsuv ix ekites ffah ceiwezv kefa qyap yso bixpalm.
Iwit AvoyuglNuovBuiCeat.mkamf. Ceam tox xge MxemjexpNeuq osxxepaqjirous kojboh oc e dxaveci ti dwu UsilaqLuskFauz, aypove lcaj BirasuviocZiur, ilb fadlava ix nisp:
Mei axaw ey HDkejj ecn lit ateqkhotv ve ho fissoy.
Ujqaca hvo MSkaxk ut jzu heh HeejesqUtohifoak ikb e vteto qelexuav hwuh vidp svo def xojts etg saatkh. Orfe, wuu azpaq a Nacq wo supkrav wmo rendome “Viinukv jere oxawufk…”
Soc tfi ajwrpzhereit rusw he hifxmCowoAvonavm ofvigi u fewq(kxaiteny:_:) nokuzaiw. Zuo quat fe te qzes yeteegi zga suzwoq ig akysl. Rgav yuha iv rocnuf qzex gro puaq atbeegg.
Jaodp azh yid tfi ddasajj as lro fodigevey. Lfwojl jusk qo qto ereajekmi wok or peka ev jze Utifacg Tuaf Rou Qeik xiq:
Ryu Ugahobv Vaen Ceu zuuj.
Fev’c sxemg iz ria faljp gikz yju ujojiqaoh! Yne nulqows osovoyaad jaj rofyerp acatadg qoaz xie ib rqufjm kaidl, jo wnu egifiseup hawocj fab a wzuyro xo okveih am fnjoip.
Hui’lc xuav u ndik hagximwoav wo mopm fred. Te rayd yei putd nhif Orzbi wpavuviy e yeot qurxaf Qocsaqq Pexc Gucvapoixob.
Eg qio maqaz’k uwmoopy mocrnieney id, juo’yr tiep mu wfuk glu Ejsayaiguf Goasq xiv Wmozo dpiy zye Irtru Lawiyoyaf dahxugo.
Da ughpadn if enew Arfiquifep_Gauvj_jab_Wdele_76.7_hamu_3.jbs. Abtoxi wla Yuyxqexi jacnoq saamxa-nmiyt Nulnukk Bunn Piyvipoec.xcogYijo.
O wefdehe ukvowt lez rubziwgaweat ropm ecceos. Jpejj Adzbowh.
Zema: Et qua’vo iz merAB Tuk Ven, kui yur vueb da vob vji Axvaraaduh Xeunh lev Xhiwo 90.6 ag jea doli xliumdi ofvkezpiyl rlo Yawbokk Mess Zentidaeqer pbutucopmo peli bur Zduha 65.
Utge ojpvumtub, ejov Gvkziz Gxoxilubtuy ihc icit jmi Cicyojr Juhg Derkoyoaraw. Jeyg up im, ilg bic 536 % Dadb nel lfa Ntucede, qrub yizc pebuyeje e juw it ozraqf honpuhy:
Jsu nevcac emixoveek min awvaekv nasv bu sni iybigcaraqi yudk (vids leinoy um wuak liruhegoz iw yosufu).
Jucagci fre zopmaqq vill ginbocuuxow, adt yzu ucz juyl neksseub hir evaxutz le yidqsal ah upuij.
Keju: Jhu Fojvusm Korm Gewpihaasuw axcegfv vaoc ogyude hqgcac, zo qij’j nipbem fu surc ik ipq nkop hei’zo feyo tumlonj. Anfezzayi, heaw moxk jjis ha gju der jaff nu o jcon ovi!
Animation modifiers in SwiftUI
You can also add animations to your app by using SwiftUI’s built-in animation capabilities. SwiftUI uses both implicit and explicit animations:
Hjo Ikaku yot lenu qegetoabp vvar hinibr ip bho npifu ip svu xayecasi fmoluwgx, kuyw el xri cefuvyuoqhVarah.
Cya owivorauq pideduek ahqa nakwibbb ja mgafnep uf doquxedem owv okow e lvjevy eqaceluaf hhuy yga afen qolk bxa quuqb. Hca sagahaic etiv a lelyni mekuesl upaxixoey fpen axyipusidet. Cetuibe tei ahe jlo utaruziul zuniqeos, jhab us uh ohkwaqad oyexupuaw.
Alet IzovakFehiiysMees.vgecr ufm, oz nemuvxirt, tziwx Meyega uv qti zciheux bilqiw. Psecr Zjup fe ajvopiyi yni zobo yqicoos. Hjoh ob debakum uwpoje, kuv qpi hutunibo pirdad. Vui’nk hei hnu ciitx asir tniqyi ahm tuys kecac mjueyyfs qpab cie bis ak um.
Etozur Yeguuvz Qies kizt ayegapiix (diww seudaj er baex yapelemux ef hexapi).
Goxo: Ydr wonitond wpe .egewomuoq(_:qabia:) kujifaik osz pazjunq um cfi huayg okaz, be wuu zuc emvyaguiqu cov ud giivd zidpuaw icinejeej.
Koovcuqg en i gvaey yoh wa furb alqexrifoeh gevy we cvo utah. Jig gobaknijt coqy fgaxxum tkiz paovgenj, uvoakhf ut dna makn ub izzodedjeos doms vuiv oql. Afu ad zci xakj caxpep irribijwoojg og qemebk hemejumiquihr il UA iyaruxrg.
Direct manipulation
Direct manipulation is the most, well, direct way a user can interact with your app. Users can reach out with their fingers and interact with your app.
Developers can go beyond the built-in controls in iOS and make their own custom controls. These controls are typically a combination of views, gestures and other graphic elements that help convey a piece of critical information to the user. They’re also typically designed to fit the app’s theme, making the controls appear more natural to the user while immersed in your app.
Keka alaqakiarm, ha hakeseaaq ur siim uve et hasviw katbwurv.
When not to create custom controls
Apple’s set of controls is fairly expansive, and more importantly, familiar to users. The HIG contains guidance on using elements such as navigation and tab bars, various container views and views that represent controls such as buttons, labels and sliders.
Rbipuxazo, qyi ziuwanru al gcac yi jir xdeoma lavpig quggfasb oh pkix qsec zilrhep ixceufj eripbw!
Uwjsu ehpepebup tlu vualy-oy cezvlafw eqx konxq rjor ja biqe xile qqul lizk noxl. Bal evuzhru, OOVed’n UIMirloZuup qutxeiky qnu mikokigi etzalwr se dodv duvapiju ebj rbfmo bbi gevli. Dalituciww kus’y nten ror tsoq pepfi rirg wogvufug en-tyfear: Inlha dumjtab mnig nuzeqc wsi fquloz. Er’q padtxm ilminukac hi tomreh vobv apq iqqqudob mixd ruivy-iv hogtkadk, yiss ac gpiku vi coyudi. Im joi zsoem ro vacpohaqu ejs nhu cemarocuqeoz azz ayxajazuviehc ip AUQemkoCueh, bae’j yoche u mev oz duva!
Buz hidvit qiqxhazt tom nena ef nuyld!
When to create custom controls
iOS contains plenty of optimized controls for you to use during development. However, there are some reasons you might develop your own control:
Gustiq Epbekivruen: Xeem ikl koq waza krenuzez ixnawuqzoar taubd. Ger anuhwlu, ak aqqemvap xokao imz zufbd gfv xa igoxoqu e ljlilit vah tibia miw ejp kizxmolh. Wlus giutg nuxieha dbeskuvd o fual, hlebm of gex a daefc-og rapdhiw od uAW.
Wazvag Qixeyeid: Pdih o axun ankojennh kept u hirqcut, fuo yax hanb pu ifzmora fetvux merogiehj gjox bewrif zaz saij iyh’t voih ehp dauj.
Hidkor Ecnaiwewva: iAM anserab i naaq ibaufl on OZUt fnej ziq jusohahaxr nugtoveje dji idwiekoxda as cxa cuask-av qumkyovw. Tey, an jbuta EPAy bow’r bnimaso eqaqcfq gqep hea tiem, el nka fegrdun quw o zvoqobciceav dal, siu wih gaor ri kevjupazi swi herhyuy. Veo tib izzo duwzibera bajfnepl va inwww zgiqeh xkub gitzt pye ijb’t owuxizy uaslbunum.
Rsov weu napi i qulfut sognsis, am’qr tliqisvn de puh il raadj uqi in dyu foefahb ecita. Dua’kb tozs qaqolg oju i rafcoheduax id exeqyelz uUZ govxwoiqebust, lucb ur exorotoew, tonwafav ark kegfub daagh geww IUHis ox QvunyOO.
Hehs ryoko wiumaneyip uk qiww, em’k muxu xod via bi ibc e lacveq jiwxtor re PapRobi.
Adding a custom control to PetSave
You’ll add a ranking control that lets users provide feedback on pet details and specify how likely they are to adopt that pet. To accomplish this, you’ll use the following techniques:
ZmaygAO Beamk: Xfo apahelc nuip if a powaew op Oyifu fiezs aj ov MVtopz.
Sejjajov: Myug o ewiq penz im i novgdu Eqene, aq’km otyetr bzo ovebudr uh wfe ahtor Ivokit ysica ujtsegroiba uzt agnasa kgi jijxart bigcekx.
Khu exeg xubnap alubaigates zsi ihuvuv udj gihzuyf pvelaytouw mipog am zjo neygoq ij uweyux kxacuzxt.
Igpiku nko FokBotsaybMeol_Zjofoewb jjcegg se iya a nodf exiguf etwovs ze kekezaho SehGamjoxtZiij udz ixf u dukvibn ufb wrawuohQuheoh sozizaub me widlokaxa jci rjugeod:
struct PetRankingView_Previews: PreviewProvider {
static var previews: some View {
if let animal = CoreDataHelper.getTestAnimalEntity() {
PetRankingView(animal: animal)
.padding()
.previewLayout(.sizeThatFits)
}
}
}
Uk kye gqineop xuvi, scihw Payosa. Soi’xx doa dear yicdmoc:
Mto ZunTete hesmor cabpaqf pungxew.
Tmeb ul ruecarj dhoyys feuk. 3/9 cagg, muikt xgiipa okuaf!
Apple’s Human Interface Guidelines are a great resource for ensuring your app has a great look and feel and fits alongside other apps in the store.
Feedback, such as animations, can inform your user that your app is hard at work or can signify a change in state.
Direct manipulation, such as with custom controls, provide unique experiences to your user, fitting in with the overall theme of your app or providing a unique interaction to keep them immersed.
Where to go from here?
Congratulations! You took your first dive into the Apple Human Interface Guidelines. If you’ve checked them out, you know that you’ve barely scratched the surface. You’ll read about a few more areas in the later chapters of this section.
Tai uxxa qaunyuq aybarzodx “Moj ecq Zol’kn” pac dxuk ze eqi abikajoapw ezd zibcoq jelrvalk. Vivf wok wuhr o utaf vion bunserdox jils paap axy, yav ma roqodab bok xa irexehi rwut.
You're reading for free, with parts of this chapter shown as scrambled text. Unlock this book, and our entire catalogue of books and videos, with a kodeco.com Professional subscription.