Cross-Platform Design na Nakabalot sa Bahagi 3: UI Polish at Interaction Design

Ang katawan ng tao ay umiral na bago pa naging posible ang alinman sa nakikita natin sa ating paligid ngayon at nakalikha ng masalimuot na mga sistema na nagtutulak sa kung paano tayo nakikipag-ugnayan sa mundo, at ngayon, ay ang pinagtutuunan ng pansin ng lahat ng pananaliksik sa IT, biotech man ito o disenyo. Ang mga sistemang ito ay nagtuturo sa ating mga karanasan sa buhay. Ang ating mga pandama ay ang ating mga kumpas, na nagpapakilala sa kasiya-siya mula sa nakakasakit, nakaaaliw mula sa napakabigat.

Habang dumarami ang daloy ng mga papasok na signal at higit na umiikot ang ating buhay sa mga digital device, naging mas mahalaga ang papel ng mga UI at UX designer kaysa dati. Sa panahon ngayon, gumagana nang full-time ang ating mga pandama nang walang pahinga, at nasa mga taga-disenyo na mag-curate ng mga karanasang nagdaragdag ng halaga sa halip na makabawas sa kanila.

Ang pag-fine-tune sa pinakamaliliit na detalye ay kung ano ang lumilikha ng karanasang pinagsusumikapan namin: intuitive, kasiya-siya, at streamlined.

Ngunit upang matiyak na ang bawat hakbang na iyong gagawin ay ginawa sa tamang direksyon, kailangan mo ng mas malalim na pag-unawa hindi lamang sa layunin na iyong nilalayon na makamit, kundi pati na rin sa mga tool at konsepto na maaaring maghatid sa iyo doon.

Sa bahaging ito, tuklasin ko ang "UI Polish at Disenyo ng Pakikipag-ugnayan" — ang proseso ng pagpino at pagpapahusay ng mga visual at interactive na aspeto ng isang user interface upang lumikha ng mga all-round na nakakatuwang karanasan. Tingnan natin ang mga bagay na tutulong sa iyo na bumuo ng mga karanasang tumutugon sa mas malalim na antas sa iyong mga user.

Paano Nakikita ang Mga App

Ang magandang bagay tungkol sa UI at UX ay ang bawat taga-disenyo ay isang user din, at ang pakiramdam ng pag-enjoy sa daloy ng isang interface ay napakaganda anuman ang iyong trabaho. Walang nagkakamali! Ang pagkakaiba lamang ay, habang para sa mga gumagamit, ito ay humihinto sa kasiyahan, para sa amin, ang trabaho ay nagpapatuloy.

Magsimula tayong maging mas tiyak. Ang kasiyahan sa konteksto ng UI ay tumutukoy sa mga positibong emosyon na nararanasan ng isang user kapag nakikipag-ugnayan sa isang produkto, interface, o serbisyo — higit pa sa pagtupad sa isang functional na pangangailangan. Isa itong mahalagang aspeto ng karanasan ng user dahil ginagawa nitong hindi malilimutan ang karanasan, na nagtutulak sa kasiyahan at katapatan ng user. Ginagawa nitong tunay na espesyal ang iyong app.

Ito ang susunod na antas pagkatapos magdisenyo ng arkitektura ng isang produkto, ang balangkas, — at ang hakbang na ito ay tungkol sa pagdaragdag ng mga kalamnan, balat, at pagbibigay-buhay sa produkto.

Upang makamit ito, kailangan ng mga taga-disenyo ng malalim na pag-unawa sa kung paano nakikita at nararanasan ng mga tao ang isang produkto. Bumaling tayo sa teorya ng emosyonal na disenyo ni Don Norman . Ipinaliwanag niya na ang mga user ay nakikipag-ugnayan sa mga produkto sa tatlong antas : visceral, na kung saan ay ang agarang emosyonal na reaksyon sa hitsura at pakiramdam ng isang produkto, pag-uugali, na sumasaklaw sa kung gaano kahusay gumagana ang produkto at kung gaano ito kasiya-siyang gamitin, at mapanimdim, na kung saan ay ang Ang mga gumagamit ng pangmatagalang koneksyon ay nabubuo habang iniisip nila ang kanilang karanasan sa paglipas ng panahon.

Ipinapaliwanag ng teorya ni Norman na ang mga antas na ito — visceral (unang mga impression) , pag-uugali (kung paano ito gumagana) , at mapanimdim (pangmatagalang emosyonal na epekto) — ay hindi linear; sila ay patuloy na nakikipag-ugnayan. Ang visual appeal (visceral) ng isang produkto ay patuloy na nakakaapekto sa mga user habang sila ay nakikipag-ugnayan dito sa functionally (pag-uugali), at ang bawat aksyon ay tumutugon sa kung ano ang nararamdaman ng mga user tungkol dito sa paglipas ng panahon (reflective).

Halimbawa, ang interface ng isang makinis na telepono na may maayos na nabigasyon ay malamang na mag-udyok ng agarang kasabikan, ngunit ito ay ang kumbinasyon ng kadalian ng paggamit at pangmatagalang kasiyahan na bumubuo ng pangmatagalang katapatan. Sa disenyo, ang pagtuon sa kung paano nagsasapawan ang mga antas na ito ay susi sa paglikha ng karanasan ng user na maaalala ng isa.

Ito ang dahilan kung bakit nakaupo ang kasiyahan sa intersection ng mga antas na ito sa balangkas. Hindi ito nakatali sa isang aspeto lamang ng karanasan. Ito ay ang synergy sa pagitan ng hitsura ng isang produkto, kung paano ito gumagana, at kung paano ito nagpaparamdam sa mga user sa paglipas ng panahon na lumilikha ng isang karanasang dapat tandaan.

Ano ang Nakakatuwa sa Apps

Ang mga aspeto ng disenyo ay malalim na nakatali sa mga antas ng pang-unawa, at sa proseso ng pag-polish ng UI, ang koneksyon na ito ay nagiging mas malinaw. Ang kakayahang magamit ay gumaganap ng isang direktang papel sa paglikha ng kasiyahan sa pag-uugali — ang pakiramdam na nakukuha ng mga gumagamit kapag gumagana ang lahat nang maayos.

Kunin, halimbawa, ang karanasan sa pag-save ng larawan sa Pinterest discovery feed.

Kapag ang isang user ay pumili ng isang larawan, ito ay lumalaki nang walang putol, na nagbibigay-daan para sa isang detalyadong view nang hindi umaalis sa feed, na agad na nagpapahusay ng visual na pakikipag-ugnayan. Pagkatapos, ang isang signature na pagpindot nang matagal sa larawan ay nagpapakita ng mga mabilisang pagkilos tulad ng pag-save ng larawan sa isang koleksyon o pagbabahagi nito sa iba.

Ang lahat ng mahahalagang aksyon ay nasa iyong mga kamay, na nagdaragdag ng mapaglarong ugnayan sa functionality. Ang disenyong ito ay hindi lamang pinapasimple ang proseso ng pag-curate ng mga personal na koleksyon ngunit pinapayaman din ang pangkalahatang kasiyahan ng user.

Higit pa rito, may kasamang aesthetic appeal at emosyon . Ang mga ito ay nagdaragdag ng visceral layer , ang agarang, emosyonal na tugon sa hitsura at pakiramdam ng produkto. Ang isang malinis, mahusay na idinisenyong interface na may banayad na mga animation o maalalahanin na mga pagpipilian ng kulay ay nag-aanyaya sa mga user na pumasok, na nagpapaginhawa sa kanila sa simula pa lang. Ito ang "wow" na salik na nakakakuha ng pansin, ngunit hindi lang maganda ang hitsura nito — hinihikayat nito ang mga user sa karanasan, pinalalakas ang kakayahang magamit at ginagawang kasiya-siya ang mga pakikipag-ugnayan.

Sa halimbawa ng Pinterest, lampas sa pangunahing kakayahang magamit, nagdaragdag ang app ng mga layer ng polish na ginagawang mas 'buo' ang karanasan. Halimbawa, kapag pinindot nang matagal ang isang larawan at pinipili ang mga aksyon tulad ng 'I-like', 'I-save', o 'Ibahagi', maaaring mapansin ng mga user ang banayad na haptic na feedback.

Bukod dito, nagtatampok ang Pinterest ng ilang partikular na galaw na ginagamit ngayon ng maraming app, gaya ng pagbabalik sa discovery feed sa pamamagitan ng pag-swipe pababa o pag-navigate sa mga item sa pamamagitan ng pag-swipe pakaliwa at pakanan. Maaaring mukhang maliit ang mga detalyeng ito, ngunit malaki ang kontribusyon ng mga ito sa pangkalahatang kasiyahan at kasiyahan ng karanasan.

Ngunit ang tunay na magic ay nangyayari sa gitna — kapag ang kakayahang magamit at aesthetics ay nagtutulungan, na lumilikha ng isang pinag-isang karanasan na sumasalamin sa maraming antas. Iyan ay kapag ang mga user ay lumipat mula sa "Ito ay gumagana" patungo sa "I love this!" Hindi na ito tungkol sa paghahatid lamang ng produkto.

Ang bawat solong elemento, bawat pattern na ipinatupad, ay nag-aambag sa kung paano makikita ang iyong app. Ang isang pakikipag-ugnayan, tulad ng pag-order ng isang serbisyo, ay makakaapekto lamang sa karanasan sa pag-uugali o parehong pag-uugali at emosyonal. Ihambing ang makalumang paraan ng pag-order ng taxi sa pamamagitan ng telepono, na kadalasang may kasamang paghihintay nang naka-hold, hindi palaging kaaya-ayang pakikipag-usap sa mga estranghero, at hindi malinaw na mga oras ng paghihintay, sa moderno, naka-streamline na proseso sa Uber app.

Hindi lang nito pinapasimple ang proseso ng pag-order ngunit pinapahusay din nito ang karanasan ng user sa pamamagitan ng pagbibigay ng mga real-time na update sa lokasyon ng driver, isang malinaw na pagpapakita ng mga rate ng pamasahe, at maayos na mga transition sa pagitan ng iba't ibang yugto ng proseso ng pagsakay. Anong shift, ha?

Gayunpaman, ang paghahati sa pagitan ng aesthetics at function sa UI ay talagang higit pa sa isang pormalidad. Ang anumang interface ay maaaring maging kasiya-siya, at anumang 'aesthetic' na elemento ay maaaring maging 'functional'. Kunin ang Dynamic Island ng Apple — ang kilalang itim na notch sa mga naunang iPhone. Sa mga susunod na modelo, nag-evolve ito mula sa isang simpleng pangangailangan sa disenyo hanggang sa isang functional at naka-istilong tampok. Sa una, ang bingaw ay isang kompromiso upang ilagay ang nakaharap na camera at mga sensor habang pinapalaki ang espasyo sa screen.

Pagkatapos, sa paglipas ng panahon, ginawa ito ng Apple bilang isang mahalagang bahagi ng teknolohiya ng Face ID, na nag-aalok ng mabilis at secure na paraan ng pagpapatunay na mabilis na tinanggap ng mga user.

Narito ang ilang mga halimbawa kung paano maitataas ang mga purong 'utilitarian' na elemento nang may mga touch of delight:

Ang tunay na kakayahan ng isang taga-disenyo sa paggawa ng mga kasiya-siyang app ay nakasalalay sa pag-unawa kung kailan, paano, at bakit dapat magbigay ng mga emosyonal na elemento. Nakadepende ito sa use case, konteksto, at diskarte — ang tatlong pundasyong haligi na gumagabay sa bawat desisyon sa disenyo. Ito ay tungkol sa pag-unawa kung kailan dapat unahin ang kakayahang magamit, kung kailan ipakilala ang mga emosyonal na layer, at kung kailan maayos na isasama ang dalawa upang lumikha ng mga karanasang malalim na kumokonekta sa mga user.

Aminin natin, kahit na ang pinaka-kagiliw-giliw na animation ay maaaring maging mapagkukunan ng pagkabigo kung sabik kang nanonood nito habang ang isang $1000 na pagbabayad ay hindi naproseso.

Halimbawa 1. iMessage Keywords Animation

Kapag nagpadala ka ng ilang partikular na keyword tulad ng "Congratulations" o "Maligayang Kaarawan" sa iMessage, ang text ay magti-trigger ng full-screen na animation, gaya ng mga balloon o confetti, na nagdaragdag ng masaya at nakakaengganyong visual na pagdiriwang sa mensahe.

Halimbawa 2. Branded Profile Pics sa Google Docs/Sheets

Ang Google Docs at Sheets ay nagpapakita ng makulay at may tatak na mga larawan sa profile na nagpapakita kung sino ang nag-e-edit ng dokumento nang real-time. Hindi lamang nito ginagawang mas personal ang pakikipagtulungan ngunit tinutulungan din nito ang mga user na mabilis na matukoy ang kanilang mga co-editor.

Halimbawa 3. iOS Memoji Kasunod ng Password Input Field

Kapag nag-i-input ng password sa isang iOS device, isang Memoji na character ang bumubuhay sa loob ng field ng password, na sumasalamin sa iyong mga facial expression. Kung mali ang iyong pagpasok dito, maaari itong sumimangot o magkibit balikat bilang tugon. Kung may pagkaantala sa pag-type, maaaring humikab pa ang Memoji, na nagdaragdag ng kakaibang ugnayan sa napakamundong gawaing ito. Naglalagay ito ng kaunting personalidad at katatawanan sa iyong pang-araw-araw na gawain.

Halimbawa 4. Google Dinosaur Kapag Naka-off ang Internet

Nagtatampok ang Google Chrome ng nakatagong larong dinosaur na lumalabas kapag walang koneksyon sa internet. Ito ay isang simple, nakakahumaling na laro, ngunit ang pinakamahalaga - isang mahusay na paraan upang gawing kasiyahan ang panandaliang pagkabigo.

Halimbawa 5. Pagtanggal ng Telegram ng Mensahe

Sa Telegram, kapag nag-delete ka ng mensahe, mawawala ito sa isang maayos na animation na biswal na pinuputol ang mensahe tulad ng papel bago ito mawala, na nagbibigay sa mga user ng pakiramdam ng kontrol sa kanilang hindi madaling unawain na mga digital na pag-uusap.

Don't Make Me Think: Mga Pattern ng Disenyo at Mga Bahagi

Ang puso ng isang pinakintab na UI ay mga pattern at bahagi. Ang mga pattern ng disenyo ay itinatag na mga solusyon sa mga karaniwang hamon sa interface. Nagbibigay ang mga ito ng pamilyar na istraktura para makipag-ugnayan ang mga user. Ang mga ito, sa turn, ay binubuo ng mga bahagi - ang mga bloke ng gusali ng interface, tulad ng mga pindutan, input field, at mga modal.

Magkasama, lumilikha ang mga pattern at mga bahagi ng tuluy-tuloy na karanasan ng user kung saan intuitive na nauunawaan ng mga user kung paano i-navigate ang app.

Upang iangat ang mga functional na elemento (gaya ng mga menu, form, o button), maaari naming pagandahin ang mga ito gamit ang mga aesthetic at emosyonal na diskarte. Maaari kang magdagdag ng mga banayad na animation, makisali sa mga micro-interaction, at maingat na paggamit ng kulay at palalimbagan, na higit pa sa paggana. Ang lahat ng ito ay nagiging iyong sistema ng disenyo – isang koleksyon ng mga magagamit muli na bahagi at pattern na ginagabayan ng malinaw na mga panuntunan, na tinitiyak ang pagkakapare-pareho sa buong app.

Ang mga paunang natukoy na animation, mga scheme ng kulay, at mga pattern ng pakikipag-ugnayan ay nagdudulot ng mga partikular na emosyon, kaya ang sistema ng disenyo ay nagiging isang mahusay na tool para sa paglikha ng magkakaugnay at nakakaengganyo na mga interface. Ang diskarte na ito ay nagbibigay-daan sa mga designer na patuloy na ilapat ang mga pagpapahusay na ito nang hindi nagsisimula sa simula, na nagpapatibay sa pagkakakilanlan ng tatak at pagbuo ng tiwala ng user.

Halimbawa 1. Mapaglarong Widget ng Duolingo

Sa Duolingo, kapag mali ang sagot mo sa isang tanong, hindi lang nagpapakita ng simpleng mensahe ng error ang app. Sa halip, tumutugon ito ng isang magiliw na animation at mga nakakahimok na salita mula sa mascot nito, ang Duo the Owl. Ginagawa ng diskarteng ito ang isang potensyal na sandali ng pagkabigo sa isang positibong karanasan sa pag-aaral, na pinapanatili ang mga user na motibasyon at binabawasan ang mga negatibong emosyon na nauugnay sa paggawa ng mga pagkakamali. Mga real-world na taktika, ngunit animated.

Halimbawa 2. Card Animation ng Netflix

Ang animation ng show card ng Netflix ay nagpapakita ng tuluy-tuloy na disenyo ng UI, na nagpapahusay sa pakikipag-ugnayan ng user sa mga device. Kapag pumili ng palabas ang isang user, lalawak ang card sa isang full-screen na trailer , na nagbibigay ng cinematic na preview na nakakakuha ng pansin. Ang maayos na paglipat na ito, na nagdaragdag ng kasiyahan, ay pare-pareho, kasama ang kanilang TV app, kung saan ang parehong animation ay humahantong sa isang awtomatikong nagpe-play na trailer.

Tinitiyak ng pinag-isang diskarte na ito sa mga platform ang magkakaugnay na karanasan ng user, binabawasan ang cognitive load at pinapasimple ang nabigasyon.

Halimbawa 3. Mga Mabilisang Utos ni Slack

Ang kasiyahan at emosyonal na pakikipag-ugnayan ay maaari ding magmumula sa mga feature ng produkto, hindi lamang sa disenyo ng UI. Inihalimbawa ito ng Mga Mabilisang Utos ng Slack sa pamamagitan ng pagpapahusay sa pagiging produktibo at pag-streamline ng mga pakikipag-ugnayan sa loob ng app. Dinisenyo na may pagtuon sa pagiging produktibo, ang Quick Commands ay nagbibigay-daan sa mga user na makatipid ng makabuluhang oras sa pamamagitan lamang ng pag-type ng kinakailangang command. Halimbawa, maaaring i-update ng mga user ang kanilang status gamit ang /status o patahimikin ang mga notification gamit ang /mute nang direkta sa kahon ng input ng mensahe.

Hindi lang nito pinapabilis ang daloy ng trabaho ngunit pinapaliit din nito ang mga pagkaantala, na nagbibigay-daan sa mga user na tumutok sa kanilang mga gawain. Ang intuitive at nakakatipid sa oras na katangian ng Quick Commands ang dahilan kung bakit mahal na mahal sila ng mga user. Ang aking personal na paborito ay /kibit-balikat, na idinaragdag ¯\(ツ)/¯ sa dulo ng iyong mensahe, at ito ay napakasaya!

Ang Papel ng Disenyo ng Pakikipag-ugnayan

Bagama't ang mga pattern ng disenyo at mga bahagi ay ang mga bloke ng pagbuo ng isang pinakintab na UI, binibigyang-buhay ng disenyo ng pakikipag-ugnayan ang lahat. Ang disenyo ng pakikipag-ugnayan ay tungkol sa kung paano nakikipag-ugnayan ang mga user sa mga bahaging iyon — kung paano sila nagki-click, nag-tap, nag-swipe, at nag-navigate sa app.

Halimbawa, ang isang menu ay isang pangkaraniwang elemento ng navigational UI, ngunit ang disenyo ng pakikipag-ugnayan ang tumutukoy sa nararamdaman nito. Maayos ba ang pag-slide ng menu? Agad ba itong tumutugon sa isang pag-swipe na galaw? Haptic touch kapag nakumpleto na? Mayroon ba itong banayad na mga animation na ginagawang kaaya-aya ang paglipat?

Ang isang magandang halimbawa ng epektibong disenyo ng pakikipag-ugnayan ay ang epekto ng 'Genie' sa macOS , na ginagamit para sa pagliit ng mga window ng Finder. Ang animation na ito ay maayos na inilipat ang window sa pantalan, na kahawig ng paggalaw ng lampara ng genie. Ito ay visually appealing at functionally informative at nagpapakita sa mga user nang eksakto kung saan pupunta ang window, na tumutulong na mapanatili ang spatial na oryentasyon.

Ang disenyo ng pakikipag-ugnayan at ang sistema ng disenyo ay gumagana nang magkakasuwato. Sa disenyo ng pakikipag-ugnayan, ang mga pare-parehong gawi para sa lahat ng bahagi, gaya ng kung paano tumutugon ang mga button kapag na-click o kung paano pinapatunayan ng mga form ang pag-input, tinitiyak na ang app ay kumikilos nang predictably sa bawat screen. Ang pagkakapare-pareho na ito ay ang bumubuo ng kumpiyansa ng user — ibig sabihin, kumportable ang mga user na malaman kung paano tutugon ang app, na nagpapababa ng alitan at nagpapahusay sa pangkalahatang karanasan.

Kapag ginawa nang tama ang disenyo ng pakikipag-ugnayan, gumagana ito kasama ng mga pattern at bahagi upang lumikha ng magkakaugnay na karanasan kung saan ang bawat pag-tap, pag-click, at pag-swipe ay parang intuitive. Ito ay isang bagay na tunay na nagbibigay-buhay sa mga interface.

Sa iba ko pang mga artikulo, binigyang-diin ko ang kahalagahan ng pagbuo ng isang koponan kasama ang iyong mga developer. Ang mga taga-disenyo ay kailangang makipagtulungan sa mga developer dahil salamat sa kanila ang mga animation at pakikipag-ugnayan na ito ay talagang mabisa at maipapatupad nang epektibo. Ang pagbibigay sa koponan ng detalyado at malinaw na mga detalye para sa mga animation — kabilang ang timing, easing, at gawi — ay susi. Sa ganitong paraan, tumpak na isinalin ang hinahangad na pananaw sa disenyo sa panghuling produkto, na ginagawa itong makintab, propesyonal, at emosyonal na matunog para sa gumagamit.

Higit sa Karaniwan

Ang kasiyahan sa buhay ay higit pa sa paggawa ng mga teknikal na aksyon na maaaring humantong sa iyo doon. Ito ay isang kabuuan ng pinakamaliit na detalye na lumilikha ng isang buo, kasiya-siyang karanasan. Ang disenyo ay pareho. Ang isang functional na interface ay isang matatag na pundasyon - ngunit ito ay mura. Ang pag-unawa sa kung paano nakikita at ginagamit ng mga user ang iyong app ay nakakatulong na lumikha ng mga karanasang madaling gamitin at makabuluhan. Sa tingin ko ang emosyonal na teorya ng disenyo ni Don Norman ay isang mahusay na gabay sa masalimuot na koneksyon sa pagitan ng lahat ng aspeto na gumagawa ng magandang disenyo – kasiya-siya.

Ang emosyonal na koneksyon, mga pattern ng disenyo, pagkakapare-pareho, at disenyo ng pakikipag-ugnayan ay ang mga bagay na nagbibigay-buhay dito. Dagdag pa, ito ay isang malakas na paalala na sa disenyo ng produkto, ang paglalakbay ay mahalaga tulad ng destinasyon. Sa pamamagitan ng mga banayad na animation, nakakaengganyo na mga micro-interaction, at maalalahanin na mga visual na detalye maaari mong gawing kasiya-siyang sandali ang mga nakagawiang pakikipag-ugnayan para sa milyun-milyong user. Iyan ang magic ng disenyo.