⌘ K
Filipino
Mga pattern ng UI

Disenyo ng UI ng fintech app: gawing malinaw at payapa ang mga gawain sa pera

Isang praktikal na gabay sa disenyo ng UI ng fintech app, na sumasaklaw sa konteksto ng balanse, status ng transaksyon, mga form sa pananalapi, mga hakbang sa pagkumpirma, naa-access na mga error, at mga checklist ng pagsusuri.

Pangkat editoryal ng ScreenKits6 min basahin
Konseptuwal na mga interface sa pananalapi na may card ng balanse, chart, mga transaksyon, at card sa pagbabayad.
Konseptwal na likhang sining ng editoryal; hindi isang nakunan na interface ng app.

Maraming numerong kailangang unawain at mahahalagang desisyong kailangang gawin sa maliit na screen ang isang financial app. Maaaring tama ang balanse pero nakalilito kung walang konteksto; maaaring simple ang form ng paglilipat pero hindi malinaw ang bayarin, oras, o huling hakbang. Ginagawang madaling unawain ng mahusay na UI ng fintech app ang kasalukuyang estado at binibigyan ang tao ng pagkakataong suriin ang inilagay niyang detalye.

Gabay sa disenyo ito, hindi payong pinansyal, pamumuhunan, o legal. Mga halimbawa lamang ang mga sitwasyong inilalarawan dito; hindi patunay ng pagsunod sa batas o seguridad ang mga pattern ng interface. Magsimula sa gawain, gumamit ng payak na pananalita, at gawing madaling makita ang mga pagbabago sa estado at susunod na hakbang.

Mga pangunahing punto

  • Ipares ang mga balanse sa mga malinaw na pangalan ng account, currency, at nauugnay na timing o konteksto ng availability.
  • Ilarawan ang mga estado ng transaksyon sa mga salita at ipaliwanag kung ano ang susunod na magagawa ng tao.
  • Panatilihing nakatutok, nakikitang may label, at nakakatulong ang mga form sa pananalapi kapag nangangailangan ng pagwawasto ang isang format o field.
  • Suriin ang mga pangunahing detalye bago ang isang aksyon at magbigay ng malinaw na feedback pagkatapos nito, kabilang ang kapag hindi sigurado ang resulta.
  • Gumamit ng teksto, istraktura, at mga naa-access na kontrol upang ang kahulugan ay hindi nakasalalay sa kulay o visual na posisyon lamang.

Gawing nababasa ang mga balanse sa konteksto

Ang isang malaking bilang ay hindi maliwanag. Tukuyin ang account na kinabibilangan nito at ipakita ang pera gamit ang isang pamilyar na simbolo o code. Kung ang produkto ay nakikilala ang kasalukuyan, available, nakabinbin, o namuhunan na mga halaga, direktang lagyan ng label ang mga konseptong iyon at ipaliwanag ang mga ito kung saan kinakailangan. Iwasang magpakita ng dalawang magkaibang uri ng balanse na may halos magkaparehong istilo at walang kahulugan.

Maaari ding isama sa konteksto kung kailan huling na-update ang halaga o kung aling aktibidad ang nakabinbin pa rin. Piliin ang detalyeng makakatulong sa isang tao na bigyang-kahulugan ang screen, sa halip na magdagdag ng mga pandekorasyon na numero. Gumamit ng pare-parehong pag-format ng numero at sapat na espasyo upang gawing madaling makilala ang mga digit, decimal separator, at minus sign. Para sa mahahabang pangalan ng account, magpanatili ng sapat na teksto upang mapaghiwalay ang mga account sa halip na umasa sa kulay o isang icon lamang.

  • Gumamit ng isang tahasang label ng account at currency na malapit sa halaga.
  • Ipaliwanag ang mga espesyal na termino gaya ng "magagamit" o "nakabinbin" sa simpleng wika.
  • Panatilihing nauunawaan ang parehong halaga at estado gamit ang mas malaking text at pantulong na teknolohiya.

Ipakita ang katayuan ng transaksyon bilang nagbabagong estado

Ang isang transaksyon ay isang proseso, hindi lamang isang hilera sa isang listahan ng kasaysayan. Bigyan ang bawat item ng isang maigsi na katayuan, petsa, halaga, at katapat o destinasyon kung naaangkop. Panatilihing nakikita ang label ng katayuan sa text; kulay o isang icon ay maaaring palakasin ito, ngunit hindi dapat dalhin ang kahulugan sa sarili nitong. Tukuyin ang aktibidad na naghihintay, natapos, tinanggihan, o nangangailangan ng pansin ayon sa aktwal na estado ng produkto.

Halimbawa, ang hypothetical na paglipat ng 45.00 EUR kay Alex ay maaaring unang basahin ang "Naka-iskedyul para sa 4 Nobyembre," pagkatapos ay "Pagproseso," at kalaunan ay "Nakumpleto." Kung nag-time out ang isang koneksyon pagkatapos ng pagsusumite, huwag kumpiyansa na ipahayag ang tagumpay o pagkabigo nang walang ebidensya. Sabihin na hindi pa available ang status, ipaliwanag kung paano suriing muli, at gawing malinaw kung ang muling pagsubok ay maaaring lumikha ng isa pang kahilingan. Ang eksaktong mga salita at mga magagamit na pagkilos ay nakasalalay sa tunay na gawi ng transaksyon ng produkto.

Halimbawa ng estadoAno ang maaaring ipaliwanag ng screenKapaki-pakinabang na susunod na hakbang
Naka-iskedyulAng nakaplanong petsa at destinasyonSuriin o i-edit, kung pinapayagan ito ng produkto
PinoprosesoNa pinoproseso pa ang kahilinganMaghintay o tingnan ang mga detalye
NakumpletoAng naitalang resulta at petsaBuksan ang resibo o mga detalye ng aktibidad
Kailangan ng atensyonAno ang hindi makumpletoSuriin ang nakasaad na isyu o humingi ng tulong

Magdisenyo ng mga pormang pinansyal na pumipigil sa maiiwasang kalituhan

Humingi ng impormasyon kung kinakailangan para sa gawain, at pangkatin ang mga kaugnay na patlang upang mabasa ang form sa isang makabuluhang pagkakasunud-sunod. Gumamit ng patuloy na mga label tulad ng "Tatanggap" o "Halaga"; ang isang placeholder ay isang halimbawa, hindi isang kapalit para sa isang label. Kung inaasahan ng isang field ang isang partikular na format, sabihin ito bago ipasok—halimbawa, kung ang isang halaga ay tumatanggap ng mga sentimo o kung aling identifier ang kabilang sa field. Inirerekomenda ng gabay sa pagpasok ng data ng Apple na gawing malinaw ang hiniling na impormasyon, bawasan ang hindi kinakailangang pagpasok, at pagpapatunay ng mga halaga habang ibinibigay ng mga tao ang mga ito.

Pumili ng mga kontrol sa input na akma sa impormasyon at payagan ang mga tao na iwasto ang mga entry. Panatilihing nakikitang opsyonal ang mga opsyonal na field at nakikilala ang mga kinakailangang field. Kung may mga kahihinatnan ang isang pagpili, ilarawan ang mga opsyon sa simpleng wika sa halip na ipahiwatig ng mga tao ang kahulugan mula sa mga maiikling code. Ang gabay sa field ay dapat na sapat na malapit sa kontrol nito upang manatiling naiintindihan kapag ang screen ay nag-reflow o pinalaki.

Bigyan ang mga tao ng kapaki-pakinabang na pagsusuri at hakbang sa pagkumpirma

Bago ang isang kahihinatnan ng aksyon, ibuod ang impormasyon na isusumite ng isang tao: pinagmulan, patutunguhan, halaga, petsa, at anumang ipinapakitang mga singil o timing na nauugnay sa daloy. Pagsama-samahin ang pinakamahalagang desisyon sa mga detalye at gawing madaling mahanap ang mga ruta sa pag-edit. Dapat ilarawan ng pangunahing aksyon ang pagkilos, gaya ng "Paglipat ng iskedyul," sa halip na isang hindi maliwanag na "Magpatuloy."

Dapat sagutin ng screen ng kumpirmasyon ang "Ano ang nangyari?" at "Ano ang maaari kong gawin ngayon?" Maaaring suportahan ng isang reference o view ng resibo ang paghahanap sa ibang pagkakataon. Iwasang ituring ang isang button tap bilang patunay na ang pinagbabatayan na operasyon ay nagtagumpay; dapat ipakita ng interface ang aktwal na resulta na ibinalik ng produkto.

  • Panatilihing pare-pareho ang buod sa mga inilagay na halaga at mga napiling opsyon.
  • Ibalik at i-edit ang mga pagkilos na panatilihin ang gawain ng user kung saan praktikal.
  • Pagkatapos isumite, sabihin kung ang kahilingan ay natanggap, pinoproseso, o may nakumpirma na resulta.
  • Para sa hindi tiyak na tugon, ipaliwanag kung paano suriin ang kasalukuyang katayuan bago mag-imbita ng isa pang pagsusumite.

Gawing naa-access ang mga error at update

Kapag may nakitang error sa input, tukuyin ang field at ilarawan ang isyu sa text. Ang "di-wastong halaga" ay hindi gaanong kapaki-pakinabang kaysa sa isang mensaheng nagpapaliwanag sa tinatanggap na format o nawawalang halaga. Panatilihin ang mga wastong entry para maayos ng mga tao ang isang problema nang hindi nagsisimulang muli. Ang patnubay ng WCAG 2.2 ng W3C ay tumatawag para sa mga natukoy na error sa pag-input na tukuyin at ilarawan, at para sa mga label o tagubilin na ibibigay kapag kinakailangan ang input.

Mahalaga rin ang mga update sa status. Kung ang isang page ay nagbago mula sa "Pagproseso" sa "Nakumpleto" nang hindi gumagalaw ang focus, ilantad ang update na iyon sa paraang matutukoy ng pantulong na teknolohiya. Inilalarawan ng WCAG 2.2 ang mga mensahe ng katayuan bilang mga pagbabagong nagpapabatid ng mga resulta, paghihintay, pag-unlad, o mga error nang hindi nangangailangan ng pagbabago sa konteksto. Panatilihing proporsyonal ang mga alerto: ipahayag ang mga makabuluhang pagbabago nang hindi paulit-ulit na nakakaabala sa isang tao para sa bawat visual na pag-refresh.

Suriin ang contrast, pagbabago ng laki ng text, keyboard o switch access, at mga pangalan ng screen-reader sa ipinatupad na interface. Gumamit ng malinaw na mga heading at control label, at huwag magsenyas ng tagumpay, error, o direksyon ng transaksyon sa pamamagitan ng kulay lamang. Binibigyang-diin ng mga prinsipyo ng disenyo ng Apple ang malinaw na feedback at pagtulong sa mga tao na makabawi mula sa mga pagkakamali; ito ay mga kapaki-pakinabang na layunin, habang ang aktwal na accessibility ay nangangailangan ng pagsusuri sa kumpletong produkto.

Isang checklist ng pagsusuri ng interface ng fintech

Maglakad sa isang karaniwang gawain mula sa panimulang balanse nito hanggang sa huling katayuan. Suriin ang ordinaryong landas, isang pagwawasto, at isang pagkaantala tulad ng isang mabagal na koneksyon. Ihambing ang mga kaugnay na mobile screen sa library upang makita kung paano inaayos ng iba't ibang interface ang impormasyon at mga aksyon, pagkatapos ay tasahin ang sarili mong daloy laban sa tunay na gawi ng produkto nito.

  • Maaari bang sabihin ng isang tao kung aling account at pera ang inilalarawan ng balanse?
  • Ang mga nakabinbin at nakumpletong estado ba ay pinangalanan nang malinaw at ipinakita sa teksto?
  • Ang bawat field ba ay may nakikitang label at anumang kinakailangang pagtuturo ng format?
  • Maaari bang suriin ng mga tao ang patutunguhan, halaga, at oras bago isumite?
  • Tinutukoy ba ng mga error ang isyu at nag-aalok ng praktikal na pagwawasto?
  • Nananatiling nakikita ba ang isang update nang walang kulay, tumpak na paningin, o focus na inililipat?
  • Kapag hindi sigurado ang resulta, ipinapaliwanag ba ng interface kung paano suriin bago subukang muli?

Mga mapagkukunan at karagdagang pagbabasa

Gawing inspirasyon ang iyong susunod na daloy.

Mag-browse ng mga totoong screen, ihambing ang mga pattern, at tingnan kung paano magkasya ang mga piraso.

I-explore ang mga screen ng app