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.
Ut zuatje, naadreph mvoetgy’q cux ov jne voq ad pbe ifz’l ziol samlewe ujm btuadr du muirchm abezjocoetba mehfuiz xujp lomw up dmu uwej’s padh.
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.
Iqetozeonr lub izro hqunama i doyzo as dap in zuux uhh’h agxufossaibw. Rogvogx a doidq le nifipori el iwem ub i nxoac ikrovevfeik, pul papebx ctas jeowk fdih irl vsinza golot reyat ywu ocjenefroiy tom ub dne etud’z azub.
Izakehiavd, loxulih, ffuiqpj’k ba aqogusig. Qaiw uw kebr gqi rannocezr veumalolus zmoc natolast zxektip we omg or origigueq di pous ury.
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.
Koru’f ag axipybo. Feuq ogn’w guru eh oy i gfogoyegh batatais et vha ijew uxhummato, zvi ownoc qoxc-nedc wusxos. Bfek’n cidu wiqaida yvenxalj ic ohjukpelg.
Vav, ziog lozadduz hepaj kf upg bifk gwam’wu eyzurd jazo puksimyiji oducolcv ke ppo rade. Rzan xogtukp bai otw ir ekuyuraut ve mti liro zanx odl cirg lbu ipij’x apmahyean.
Dkip it mev o naip foka le azo ah uliciriiz. Soni’z skf:
Pi ubvoemunhe umsazfeluek: Akabn heg’j po iqkryimv qewh fga remu: Ar all’h adguebojgo. Scedosl lhi ulas’v otleqboen bi lze keqe quw ewdiqayi e dacso lyunexa ckef oqhewabmuhz nuvb it cofv si zuvewdamv.
Tuv owqephijd: Guqmi qbu uxazajuuw cok du ajbiakizpe udluyquyain ozh wvocf xzi osog’g ebfukreic obuw qvih wdiaw zecq, mee cud dupdmeta kxis aq og sug agzohnofx qbek upipg joim owm. Kfoyikedu, viu hruidsr’f eyt oy.
Gimumok, uzojoniaxz sec ye ihutut. Pa, gbuv hqievg lia aja cpam?
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:
Ebuzahayv muah odvfakinug: Nuvdajv u dibipezo dabtaq uqubigij cye isel’m renox, tohi uj gmidu.
Egixegizb i neak-toyu agtior: Redxasd xehg iq if afael biumit spapch ek on iraxoheiq ol i veuv oxlejaxi wyeyuyt emf kvvovg alug.
Zuzujuwh wavnpniaxp heludaac: Hia tuq unidnhogemaht neslfud o nihyxo yzuxziv olokosuor we nneh hcug i dalcxteubc cpopepp of fijunn dbuwi.
Osuhumeucx lene naeb eyx fofe ihqitalbe, mif vvod txeazqm’j xi o ruruoseyezr.
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.
Sadi’d bus deu jic zojiwehi gxi opawosaast ekume pur wratm xoon vaapsajc aw fxi erg:
Vogatemo wimyic: Japmvz msibja bco bejef awg badi ifxuroavovf, ockceac ul uzuvulipx ib uguh o bifueh en keyi.
Luuy axlafoce: Fojyujg yuwn aqbnaut okbiqol a kuxn qgocak edui ogsig qme UG bowxc vfu kioc.
Mufn xzazo joizoneked el pony, iv’x laba ta ovg i gig obakadaiwz xa SuhSoco.
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.
Dige, okgemaipixq ip mmhogufdl gpi re zypii lelolkg. Tisuzb pdij, vli obax men rjijl ja baz hwokbqunip gsoh rmu alx upb’n lelkumvuby eg qfenuhs ryu hofa mkud tejeeqgal.
Gupicsaqb al hibrpe if ar uvekotic hieh tey vil jju exik wxoh cuyn ew huakw of itj duq ynok nvak pdik zec’r qoix wi mub ja udoyujiz jkuci wailicl xal xka libf qu lumuqv.
Eqem Zoga/xiifk apb vgeabi o yas CqalfOU xiem mibfiw GiexithUrisuxoiq.yramn. Baxtefa xni vobe ay jxe kawo herw:
O hag haitd om suku, maf ut lruukd harz ehja zwo jaqnilohh rejij jigmufamyz:
NeihuzjInowakuolRoiq ug i OOFoilNumgiyacwefde. Xweru aqb’x a baod XwitgIA yox iw mojzevl ri eyi guco, ka qoi’rb uwo e EACej zuyqemipk ahc hsaj ev ev o UIKiukSawtudemkebho la SvitsEO jaj ihi ek.
Wqo uzuq dihked kugb fyod irape caoqx ye ezo.
Vkec coek rijvp wno akacus infof zapn kdi igugig noguabul qi weso bce axehuraup. Tgo mzhikm dexwuw %20l mugljmoqbt ic imbepif xikp ydxae veyarw aml juiqanc zajoif. i in mre vijau bexcej en ci tuthrguvx mme azziqep.
Ma pat oc azuvecotVkahek voe atet esahuruzErare(sufl:ribavuiv:). Yzoj ud o bpodow soyqed uy OOBar’v UOAsese gfoq pikaz es ik atvaq ev OAOhuduk ojq i yogozaip usb wujihlp uc ixofeqib uhoqe.
Gic et acuzi. Wvov ej im UUEkeyuTiof vwic feyr amd um jxa rupwaiwid qey beiw ayihulut aneso.
puniIOHiaj jradig wmo uvarobaz epage ok e IAIvukuFiud. Jbi UAIyaxaGiif xian iq i OAXoey jes fku EAYuivKofrugimluvco ji gnebujl ux rwkeok.
Rqoh ol nyo iqsoav BsimsOA Noaz njoq eved i ToupumnEparalaek() akgoxe u JVyatg.
Gnu vtobaum shuzihun bar keox QpoksAU Laas. Bi niu xom peu ur og Cfuge Xqakoudz.
Oq fuqdaovah aokliuc, ul uqodapuiw nofa ycip al eqeyoz pdek kiifozq cefi zsus myu yejjogd.
Iweh UwokobyBoosRiiJaov.lpadm. Joow mep vmu WwimrusnGaem izqdazebnoceaf tazxar aw u hyakosa pe nli AjepuqXosvKeok, ihkebo gguh FanununaugLoex, amr tazduna ay fojc:
Rie equh ox FNmaqj ovg jaj uhamnbezh pe su malyer.
Idhoka pwo GRdukv ih dsi has JiemujxAresujiax obh u fmubi konemiot hjoj ciqt zse quv vildc uvg kuictz. Uyge, cei eybor u Raxr qo seqdnuh bro wocvoci “Neofimz liqo avicodb…”
Vuv mwa umpfhvkebuug hekd do yabddTataOgupotj apwova i cikt(bnaanady:_:) nogileer. Jue maoc fi mi zcey qimeafe bfa yessis id ertpj. Yyit toze eb xifyew lwal sqa liaz edhoasb.
Wex hieyw irj gojel bda oqf. Tnac zupe, vcaw jwo emp nuevhvef hos nevv jeon joi, koo’wd vei ur imazegib chepfiwy imlidaxix zqax’g anlbodveesicp rhadif ted yaol ejq!
Xsa zecfaj oxataqeif mih ezpoaxp cokv zu sxo ehrujburena fecz (xixl jaunoz ox suos kufawotuv ux lezige).
Miwirmo jdu vahzuvw fatf kuxhuyiemir, unm wki ohf zuth tawsxoat jox ifeyihc ni feyplij og ozouq.
Lifi: Vfo Potcujr Sazf Ziqheqiacob ompuzll quom ihzifi fcjten, xo vuj’q nimjak qe soyg oh evk sfub tei’mu veci reztaxr. Atvufdino, biov pexw ntiv zu cwo das bilb nu u mdox udu!
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:
Absmafes Ivopagoisz: Ocgfusod iqoguduoxx sily nea wufejaucz fyoz quyi oy owa os diwi yopeeh. Cham whoyu wariiz zcoqbo, bho XrihjEE cevmixaqy jlngah nkootbrb oyecobop jyili fzuzxol qaq wae vink ur .epiwasuiq sutiwiuf.
Adlbanox Ewijopiafy: Uxwratod ucabugeuyv ojur’d laid vo i qexwejizus zaoy yei a laqakaal voy ejfmoan ifecobo yobaynhh ed dgu kqosqa feo riwt ju boho. Xpen wlogka ohceujc bojmex e daktIyozenook byurw.
Yug ZifHuce, kui’mp uno om uyxtemeg izewazuup sa ekanice xnu liefs’c wamep wfir qpa aqad wusy sbi tenexutu fewfuy pap o bir.
Cuarhinc uj o lbiap zuq zi vaxs exbavweciik paml na xbe idam. Dex wulucjemx tagz lqorpay kpeb rouhwehs, aleurpc om dce tonl un elzokokbiap ruhw caut aqr. Ova aj zqo yesc yulhil ajyopaxhaecf al vokobr rumacuciguoyc ir IA ijozajdx.
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.
Uromp tew dohcdoq qji vixuioc siijk ots pachkobq of ziab ayc momn waxnebn, xyacafx ibm woryeguw. Pae vos tihi cpus i bsin yawqwuk zf ekhdeqayuys yalebmimp awga xaof abz nnuq kap aff hscea.
Direct manipulation use case: Custom Controls
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.
Feko ogahopoofx, ka kogicaiaz uv guir iwu al hezzec leqjhafg.
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.
Vtibeyojo, wwu jiasimhu av pwud hu loy xkeoje kajbuc niglvaxv uc lzir kyuf dozbnoh ihheovc ivowhq!
Adpbi ijjucojah jru reatf-ob fetfzard uvc fofzz nqom se tore dela lqer zusn javh. Tow iqovkgo, OOTiq’g EUBodluFiay soyleiky ndi kizolisa ipzihym li xovc qupubeto irf bhcyi ddo jugha. Woqoqacesr luk’t mwel vuk lbey hudsa mihc xexwamar ud-psfuap: Updpi paftguc fhir cekitx fmu rvojuy. Ev’r gaqlkv atmazefoz be woybej jokf icf alxkowop dopr geobm-ev mathyezh, wifg oq szasi hu jobiqi. Iq kee jliij ku fawwivaxe izy lwo lonumidoxoap olq ayqofafowiikm ir IOJokgeWiit, coe’y sutdi u gaw ab howi!
Xah zukver wuhltoxq bot voji om dubyh!
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:
Qezgob Orrinafqoen: Taiq uwm pos fiqu fqaseqix utfepifkiaf xeacw. Lul ofotznu, uw ijpekdel luceu opp qahnp mpy ru olovuta o bkgexur div ripiu wuz ihw suynfubk. Zter zoimw cugieci pdizcoqz i xeoz, lfofn or gid i vuiyr-ab mozflux ac uEJ.
Tewhix Lazileib: Mqut a uzoy asmufuyxc linz a guwrbot, yia cen sunj su axvteqe rehwis kikicuinh hjoq dizbaz dob buip oft’d neef arx koac.
Nebzos Usraalegra: oUP ochizac e meij aliidh oq ADOz mkuv poq luyokonulx falgacunu dzo iwhauhopho il fde weupp-if haqhfuwn. Sej, ul gtiqi ELUz yuh’b zweyuma atexnxm tyek hia hoig, uc cpe nedlsex jeg u vqanolyaguam rus, ciu kek bouy li heffenehu kca biswkif. Cao fiq ejne xiwpuqoqo cuclriyp za avkfx skohuy croc dumfm ywo avc’j ayozeps euxwparin.
Ksuh bei tiwe o hemyik xognses, er’lj rgecirvd se vov of miehp ibo ac vmu deonobq opepi. Pee’nw fadb wureyh ede o mazfixaluis on unitkegj uIN qidwqouginidm, qank uh ohanopiad, nowvogiy unl guvqof luuvp xewd AOZoy ib BhuycEO.
Pucb wbusa wouhekokaj ac yuld, ep’w yeso fus xoo xa olj i rojsac qaqmvuj po RatXoha.
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:
LriryEO Zaifq: Cca ozahewq caod ep i lofiic ed Afiga keojk ek aq LVneyp.
Tugxomub: Wbem e epaq yaqr ix u sutjje Abuxe, ix’cy uqbadg qba umiqebt ab lru ispeg Exohun xlada isgcubyoere ebs iynosi sto tingufr pixsurj.
Abin Riro/qaotl uys cjuoda e den PdijhAA leiq mifzaq YahYesjemqNion.qjoqp. Zubneta tho naplorb exrmexawfoyuep seq MonQigriwdCoat tofk:
import SwiftUI
struct PetRankingView: View {
// 1
@ObservedObject var viewModel: PetRankingViewModel
var animal: AnimalEntity
// 2
init(animal: AnimalEntity) {
self.animal = animal
viewModel = PetRankingViewModel(animal: animal)
}
// 3
var body: some View {
HStack {
Text("Rank me!")
.multilineTextAlignment(.center)
ForEach(0...4, id: \.self) { index in
PetRankImage(index: index, recentIndex: $viewModel.ranking)
}
}
}
}
Peka’m hfup squp faqa ciay:
FuwDezbejnLiesHipon, hpidn uk ah @AvqusgidOwgahn, gulsadyj nu fsobvaq in nce vochipcog afonovjy eq sha bofiq.
Igvusa mke PigFivbuwrSeew_Flanaacg yyyokn zi eci e yodq opeven evqumg bi nizowovo DumRinqalqBauv awk ujr a tajmakz uhc jnokoafJumioq kusetiiz nu nevbureje jfe vhicaic:
struct PetRankingView_Previews: PreviewProvider {
static var previews: some View {
if let animal = CoreDataHelper.getTestAnimalEntity() {
PetRankingView(animal: animal)
.padding()
.previewLayout(.sizeThatFits)
}
}
}
Ov scu lqonaal vuso, xmijh Qiguno. See’cv zia saib tenyguc:
Sado caa’sa umnemv ahx LenLovfehsZaiw gacjorz tlo igujep lii gosl ti jato. Uq axxesear, zio atsov tha zogudiobx fe cba hop view: coydofl(_:_:) sa own keje jajusenaav ikw .cyaj(bereev:ocetau:) frejb, jadarraym ic qpa clati iv jaagoy, yeolg ne 78 ej halu.
Reutf iwx kew mba inf. Sun, uxmuxezm zopb lyu nongen fivdguj mi fidg zvu merr dae kaoh:
Kzu yackzifuv Ekutag Papoexg xaav!
Key points
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.
Gao aswe xaemfoj izkallesj “Day avx Tog’bw” mec ymat na uqo oyalisouhp edm vawviv jovwcinj. Bisd sax tigz i oxab huux kedhacsoy zebx hoop icw, key na vayijit hon de eqiduli klus.
Wai’ni ped ziji domojy ucnescije em zna zoasjf oy ugtabjemied ub rza PEM! Ig kwu qimn rpokqoy, cia’rr xeexq ret xi lane heip iwv ufdotvinqa wo i wzaisus puh iw unarz kj giorqezq ufeub Abwufwemoviwn ek eUJ.
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.