Mga daloy ng user: Ano ang mga ito at bakit mahalaga ang mga ito sa disenyo ng UX18 min read

Ang mahusay na UX ay hindi nagsisimula sa mga pixel. Nagsisimula ito sa pag-unawa kung ano ang sinusubukang gawin ng mga user, kung saan sila pumapasok sa isang produkto, kung aling mga desisyon ang kailangan nilang gawin, at kung anong landas ang magdadala sa kanila sa isang matagumpay na resulta.

Ang landas na iyon ay tinatawag na a daloy ng gumagamit.

Ang daloy ng user ay isang visual na mapa ng mga hakbang na ginagawa ng isang tao sa pamamagitan ng isang app, website, o partikular na gawain. Maaari itong magpakita ng buong karanasan sa produkto, tulad ng pag-onboard sa isang SaaS app, o mas maliit na daloy, tulad ng pag-sign up, pag-book ng demo, pag-subscribe sa isang newsletter, o pagkumpleto ng pag-checkout.

Para sa mga taga-disenyo, pangkat ng produkto, at tagapagtatag ng UX, ang mga daloy ng user ay isa sa mga pinakasimpleng paraan upang magdisenyo ng mas mahuhusay na interface bago gumawa ng mga detalyadong screen. Tinutulungan ka nila na makita kung saan maaaring malito ang mga user, kung saan napakaraming hakbang ang isang daloy, at kung aling mga screen ang talagang kailangan mong idisenyo.

Sa gabay na ito, ipapaliwanag namin kung ano ang mga daloy ng user, kung paano basahin ang mga ito, kailan gagawin ang mga ito, at kung paano nila sinusuportahan ang mas magandang disenyo ng UX.

Subukang magdisenyo ng mga daloy ng user gamit ang AI

Ilarawan ang daloy ng user na gusto mong idisenyo, pagkatapos ay hayaan ang Anima na gawing UX, mga screen, at code.

Ano ang daloy ng gumagamit?

A daloy ng gumagamit ay isang diagram na nagpapakita ng landas na tinahak ng isang user upang makumpleto ang isang layunin sa loob ng isang produkto. Sa disenyo ng UX, ang produktong iyon ay karaniwang isang app, website, web app, o digital na serbisyo.

Nagsisimula ang daloy ng user sa isang entry point, gaya ng homepage, landing page, resulta ng paghahanap, email link, login screen, o shopping cart. Nagtatapos ito sa panghuling pakikipag-ugnayan, tulad ng paggawa ng account, pagkumpleto ng pagbili, pagsusumite ng form, pag-publish ng proyekto, o pag-abot sa pahina ng kumpirmasyon.

Maaaring kumatawan ang isang daloy ng user:

• Isang buong paglalakbay sa produkto, tulad ng pagtuklas, pag-sign up para sa, at paggamit ng bagong app
• Isang gawain, tulad ng pag-reset ng password o pag-upgrade ng plano
• Isang tampok na daloy, tulad ng paggawa ng proyekto, pag-imbita sa isang teammate, o pag-export ng disenyo
• Isang daloy ng user interface, na nagpapakita kung paano kumonekta ang mga screen sa loob ng produkto

Ang layunin ay simple: gawing malinaw ang landas ng user bago mo idisenyo ang interface nang detalyado.

Isang halimbawa ng isang pangunahing istraktura ng daloy ng user

Daloy ng user kumpara sa daloy ng user interface

Ang mga tuntunin daloy ng gumagamit at daloy ng user interface ay malapit na nauugnay.

Nakatuon ang daloy ng user sa landas ng user patungo sa isang layunin. Sinasagot nito ang mga tanong tulad ng:

• Saan magsisimula ang gumagamit?
• Anong aksyon ang sinusubukan nilang kumpletuhin?
• Anong mga desisyon ang ginagawa nila sa daan?
• Ano ang mangyayari kung sila ay magtagumpay, mabigo, o kumuha ng ibang ruta?

Ang daloy ng user interface ay mas partikular na nakatuon sa kung paano kumonekta ang mga screen, estado, button, form, at elemento ng interface. Sinasagot nito ang mga tanong tulad ng:

• Aling screen ang susunod dito?
• Ano ang mangyayari kapag na-click ng user ang button na ito?
• Saan humahantong ang estado ng error na ito?
• Ano ang nakikita ng user pagkatapos isumite ang form?

Sa pagsasagawa, ang mga koponan ng UX ay madalas na gumagamit ng parehong magkasama. Tinutukoy ng daloy ng gumagamit ang landas. Ginagawang kongkreto ng daloy ng user interface ang landas na iyon sa loob ng produkto UI.

Paano magbasa ng daloy ng gumagamit

Inilalatag ng daloy ng user ang mga hakbang na ginagawa ng isang user mula sa entry point hanggang sa huling pakikipag-ugnayan. Ang bawat hakbang ay karaniwang kinakatawan ng isang hugis, na tinatawag ding node. Ang mga node ay konektado sa pamamagitan ng mga arrow na nagpapakita ng direksyon ng paggalaw.

Karamihan sa mga diagram ng daloy ng gumagamit ay gumagamit ng isang simpleng visual na wika:

• Bilog o hugis-itlog: Punto ng simula o pagtatapos
• Parihaba: Screen, page, o aksyon
• brilyante: Punto ng desisyon, gaya ng oo/hindi, tagumpay/kabiguan, o piliin ang landas
• Arrow: Direksyon ng paggalaw sa pagitan ng mga hakbang

Ipinaliwanag ang mga bahagi ng daloy ng user

Halimbawa, maaaring ganito ang hitsura ng isang simpleng daloy ng user sa pag-signup:

1. Napunta ang user sa homepage
2. Ang user ay nag-click sa “Magsimula nang libre”
3. Ang user ay nagpasok ng email at password
4. Sinusuri ng system kung wasto ang email
5. Kinukumpirma ng user ang account
6. Naabot ng user ang onboarding screen
7. Nakumpleto ng user ang pag-setup
8. Napunta ang user sa dashboard

Ang ganitong uri ng halimbawa ng daloy ng user ay tumutulong sa team na maunawaan ang karanasan bago idisenyo ang bawat screen.

Mga halimbawa ng daloy ng gumagamit

Nagiging mas madaling maunawaan ang mga daloy ng user kapag ikinonekta mo sila sa mga tunay na gawain ng produkto. Narito ang ilang karaniwang mga halimbawa ng daloy ng user na ginagawa ng mga koponan ng UX sa panahon ng pagpaplano ng produkto.

Pag-signup ng daloy ng user

Ang daloy ng user sa pag-signup ay nagmamapa kung paano nagiging rehistradong user ang isang bagong bisita.

1. Bisitahin ang landing page
2. I-click ang signup CTA
3. Pumili ng paraan ng pag-signup
4. Ipasok ang mga detalye ng account
5. I-verify ang email
6. Kumpletuhin ang onboarding
7. Abutin ang dashboard ng produkto

Ang daloy na ito ay tumutulong sa mga koponan na mabawasan ang alitan sa unang karanasan. Kung ang pag-signup ay may napakaraming hakbang, hindi malinaw na mga field ng form, o nakalilitong estado ng pag-verify, maaaring bumaba ang mga user bago nila makita ang produkto.

Tingnan ang daloy ng gumagamit

Ang daloy ng user sa pag-checkout ay nagmamapa kung paano lumipat ang isang user mula sa interes ng produkto patungo sa pagbili.

1. Tingnan ang pahina ng produkto o pagpepresyo
2. Magdagdag ng item o pumili ng plano
3. Suriin ang mga detalye ng cart o plano
4. Ipasok ang impormasyon sa pagbabayad
5. Kumpirmahin ang pagbili
6. Abutin ang pahina ng tagumpay o resibo

Ang daloy na ito ay lalong mahalaga para sa ecommerce, SaaS, at mga produkto ng subscription dahil maaaring makaapekto sa conversion ang bawat karagdagang hakbang.

Pag-login at pag-reset ng password sa daloy ng user

Ang isang daloy ng pag-login ay nagmamapa kung paano ina-access ng mga bumabalik na user ang kanilang account, kabilang ang mga edge case.

1. Buksan ang login page
2. Maglagay ng mga kredensyal
3. Pinapatunayan ng system ang input
4. Matagumpay na naka-log in ang user o nakakita ng error
5. Kung kinakailangan, magsisimula ang user sa pag-reset ng password
6. Kinukumpirma ng user ang email
7. Nagtatakda ang user ng bagong password
8. Bumalik ang user sa produkto

Isang halimbawa ng daloy ng user para sa proseso ng pag-login (daloy ng gawain)

Onboarding daloy ng user

Ang isang onboarding na daloy ng user ay nagmamapa kung paano naaabot ng mga bagong user ang kanilang unang matagumpay na sandali ng produkto.

1. Gumawa ng account
2. Sagutin ang mga tanong sa pag-setup
3. Pumili ng template o panimulang punto
4. Kumpletuhin ang unang aksyon
5. Tingnan ang katayuan ng tagumpay
6. Magpatuloy sa produkto

Para sa mga produkto ng AI, tool sa disenyo, at productivity app, ang mga onboarding flow ay kritikal dahil kailangan ng mga user na maunawaan kung ano ang susunod na gagawin nang mabilis.

Kailan gumawa ng daloy ng user

Gumawa ng mga daloy ng user nang maaga sa proseso ng disenyo, mas mabuti pagkatapos ng paunang pagsasaliksik ng user at bago ang high-fidelity na disenyo ng UI.

Sa yugtong ito, tinutulungan ka ng daloy ng user:

• Magpasya kung aling mga screen ang kailangang umiral
• Alisin ang mga hindi kinakailangang hakbang
• Tukuyin ang nakalilitong mga punto ng desisyon
• Ihanay ang koponan sa paligid ng istraktura ng produkto
• Plano mga prototype mas mabilis
• Iwasang magdisenyo ng mga pinakintab na screen para sa sirang landas

Ang mga daloy ng user ay kapaki-pakinabang din sa ibang pagkakataon sa lifecycle ng produkto. Kung ang isang umiiral na interface ay hindi gumaganap, ang isang daloy ng user ay makakatulong sa iyo na masuri kung saan ang mga tao ay bumababa, naglo-loop, o hindi nakumpleto ang mga pangunahing gawain.

Sa madaling salita, ang mga daloy ng gumagamit ay hindi lamang para sa mga bagong produkto. Ang mga ito ay kapaki-pakinabang din para sa pagpapabuti ng mga umiiral na produkto.

Ang papel ng gumagamit ay dumadaloy sa disenyo ng UX

Ang mga daloy ng user ay isang pangunahing bahagi ng disenyo ng UX dahil ikinokonekta ng mga ito ang mga layunin ng user sa istruktura ng produkto. Bago ka mag-alala tungkol sa spacing, typography, visual hierarchy, o mga bahagi, kailangan mong malaman kung ano ang sinusubukang gawin ng user at kung paano sila tinutulungan ng produkto na makarating doon.

Ang mga daloy ng gumagamit ay tumutulong sa mga koponan ng UX na gawin ang tatlong mahahalagang bagay.

1. Gumawa ng mas madaling gamitin na interface

Ang isang malinaw na daloy ng gumagamit ay ginagawang mas madaling maunawaan ang panghuling interface.

Kapag na-map mo ang daloy bago magdisenyo, makikita mo ang alitan nang maaga. Marahil ay kailangang gumawa ng desisyon ang isang user bago sila magkaroon ng sapat na impormasyon. Baka masyadong mabilis na lumabas ang isang form. Baka kulang ang confirmation step. Siguro mayroong tatlong mga screen kung saan ang isa ay magiging sapat.

Kung ang daloy ay nakakalito, ang interface ay malamang na nakakalito din.

2. Suriin ang isang umiiral na interface

Ang mga daloy ng user ay isang mahusay na paraan upang i-optimize ang mga umiiral nang produkto na maaaring hindi nagko-convert o nagpapanatili gaya ng inaasahan. Kung ang mga user ay hindi nagko-convert, nag-a-activate, o kumukumpleto ng isang mahalagang gawain, i-map ang kasalukuyang daloy.

Maaari mong makita na ang mga user ay ipinadala sa maling screen, humingi ng masyadong maraming impormasyon, o pinilit na dumaan sa isang landas na hindi tumutugma sa kanilang layunin.

3. Ihatid ang iyong diskarte sa mga miyembro ng koponan at mga stakeholder

Ang mga daloy ng user ay mahusay para sa pakikipagtulungan. Binibigyan nila ang mga designer, developer, PM, gumagawa ng desisyon, at stakeholder ng isang nakabahaging mapa ng karanasan.

Maaaring gamitin ng mga taga-disenyo ang daloy upang magplano ng mga screen. Magagamit ito ng mga developer para maunawaan ang mga state at edge case. Magagamit ito ng mga PM para linawin ang mga kinakailangan. Magagamit ito ng mga stakeholder upang suriin ang lohika ng karanasan bago mamuhunan ang koponan sa detalyadong disenyo o pagpapatupad.

Ang mga daloy ng user ay makakatulong din sa mga developer na maunawaan ang kabuuan istraktura sa likod ng iyong huling prototype, na gumagawa handoff mas mahusay.

Paglalakbay ng gumagamit kumpara sa daloy ng gumagamit

Ang mga paglalakbay ng gumagamit at mga daloy ng gumagamit ay madalas na nalilito, ngunit hindi sila ang parehong bagay.

A paglalakbay ng gumagamit nagsasabi ng mas malawak na kuwento ng kaugnayan ng isang user sa isang produkto. Karaniwang kinabibilangan ito ng mga layunin ng user, emosyon, motibasyon, pain point, at touchpoint bago, habang, at pagkatapos ng paggamit ng produkto.

A daloy ng gumagamit tumutuon sa landas na tinatahak ng isang user sa loob ng produkto upang makumpleto ang isang partikular na layunin.

Mga pangunahing pagkakaiba

Parehong kapaki-pakinabang. Tinutulungan ka ng paglalakbay na maunawaan ang konteksto ng user. Tinutulungan ka ng daloy na idisenyo ang aktwal na landas sa pamamagitan ng interface.

Paano lumikha ng daloy ng gumagamit

Maaari kang lumikha ng daloy ng user gamit ang isang whiteboard, tool sa disenyo, tool sa diagram, o tool sa disenyo ng AI. Ang format ay mas mahalaga kaysa sa kalinawan ng landas.

1. Tukuyin ang layunin ng user

Magsimula sa pagkilos na gustong kumpletuhin ng user.

• Gumawa ng account
• Bumili ng produkto
• Mag-book ng demo
• Mag-publish ng isang website
• Mag-imbita ng isang kasamahan sa koponan
• I-export ang isang disenyo sa code

Ang isang daloy ng gumagamit ay dapat na binuo sa paligid ng isang partikular na layunin, hindi isang hindi malinaw na lugar ng produkto.

2. Piliin ang entry point

Magpasya kung saan magsisimula ang user. Kasama sa mga halimbawa ang isang homepage, page ng pagpepresyo, resulta ng paghahanap, email campaign, dashboard ng app, notification, o nakabahaging link.

Ang iba’t ibang mga entry point ay maaaring lumikha ng iba’t ibang mga daloy. Maaaring hindi kailangan ng isang bumabalik na user at isang unang beses na bisita ang parehong landas.

3. Mapa ang masayang landas

Ang masayang landas ay ang pinakasimpleng matagumpay na ruta mula simula hanggang matapos.

1. Binuksan ng user ang page ng pagpepresyo
2. Pinipili ng user ang plano
3. Gumagawa ng account ang user
4. Ipinapasok ng user ang mga detalye ng pagbabayad
5. Kinukumpirma ng user ang pagbili
6. Dumating ang user sa page ng tagumpay

Nagbibigay ito sa iyo ng karanasan sa baseline.

4. Magdagdag ng mga desisyon at gilid na kaso

Ang mga tunay na user ay hindi palaging sumusunod sa perpektong landas. Magdagdag ng mga punto ng pagpapasya tulad ng:

• May account na ba ang user?
• Wasto ba ang form?
• Nagtagumpay ba ang pagbabayad?
• Pinili ba ng user ang buwanan o taunang pagsingil?
• May pahintulot ba ang user na magpatuloy?
• Ano ang mangyayari kung magkakansela ang user?

Ang mga sangay na ito ay kung ano ang ginagawang isang simpleng landas sa isang tunay na daloy ng gumagamit ng disenyo ng UX.

5. Pasimplehin ang daloy

Kapag na-map ang daloy, hanapin ang friction.

• Maaari ba tayong mag-alis ng isang hakbang?
• Maaari ba nating pagsamahin ang mga screen?
• Masyado ba tayong maagang humihingi ng impormasyon?
• Obvious ba ang susunod na aksyon?
• May dead end ba?
• Malinaw ba ang mga estado ng error?
• Lagi bang alam ng user kung ano ang nangyari?

Ang pinakamahuhusay na daloy ng user ay parang halata dahil ang pagiging kumplikado ay nalutas na sa likod ng mga eksena.

Ang gumagamit ay dumadaloy sa maikling salita

Ang mga daloy ng gumagamit ay mga mapa ng istruktura para sa disenyo ng produkto. Ipinapakita ng mga ito kung paano gumagalaw ang mga user sa isang app, website, o gawain mula sa entry point hanggang sa huling pakikipag-ugnayan.

Isang malakas na daloy ng user:

• Nagsisimula sa isang malinaw na layunin ng user
• Ipinapakita ang entry point ng user
• I-map ang mga hakbang, screen, at desisyon sa landas
• May kasamang mahahalagang edge case
• Tumutulong sa mga koponan na matukoy ang alitan bago ang detalyadong disenyo ng UI
• Pinapadali ang handoff para sa mga designer, developer, PM, at stakeholder

Para sa mga koponan ng UX, ang mga daloy ng user ay isa sa mga pinakapraktikal na tool para gawing istraktura ng interface ang pananaliksik ng user. Tinutulungan ka nila na magdisenyo nang may layunin sa halip na hulaan ang screen sa pamamagitan ng screen.

FAQ: Mga daloy ng user

Ano ang mga daloy ng gumagamit?

Ang mga daloy ng user ay mga diagram na nagpapakita ng landas na tinatahak ng user sa pamamagitan ng isang app, website, o gawain ng produkto. Karaniwang nagsisimula ang mga ito sa isang entry point, gaya ng homepage o login screen, at nagtatapos kapag nakumpleto ng user ang isang layunin, gaya ng pag-sign up, pagbili, o pagsusumite ng form.

Ano ang daloy ng gumagamit sa disenyo ng UX?

Sa disenyo ng UX, ipinamapa ng daloy ng user ang mga hakbang, screen, desisyon, at pagkilos na ginagawa ng user para makumpleto ang isang layunin. Gumagamit ang mga koponan ng UX ng mga daloy ng user upang magplano ng istraktura ng produkto, bawasan ang alitan, at magdisenyo ng mas malinaw na mga interface bago gumawa ng mga high-fidelity na screen.

Ano ang pagkakaiba sa pagitan ng daloy ng gumagamit at paglalakbay ng gumagamit?

Ang isang paglalakbay ng user ay nagpapakita ng mas malawak na karanasan, kabilang ang mga motibasyon ng user, emosyon, pain point, at touchpoint. Nakatuon ang daloy ng user sa partikular na landas na tinatahak ng user sa loob ng produkto upang makumpleto ang isang gawain.

Ano ang daloy ng user interface?

Ipinapakita ng daloy ng user interface kung paano nagkokonekta ang mga screen, UI, mga button, form, at mga pakikipag-ugnayan sa loob ng isang produkto. Ito ay malapit na nauugnay sa isang daloy ng gumagamit, ngunit ito ay mas partikular na nakatuon sa landas sa antas ng interface.

Kailan ka dapat gumawa ng daloy ng user?

Gumawa ng daloy ng user pagkatapos ng paunang pananaliksik ng user at bago ang detalyadong disenyo ng UI. Maaari ka ring gumawa ng mga daloy ng user sa ibang pagkakataon upang i-audit ang isang umiiral nang produkto, i-diagnose ang drop-off, o pahusayin ang conversion.

Ano ang mga halimbawa ng daloy ng gumagamit?

Kasama sa mga karaniwang halimbawa ng daloy ng user ang mga daloy ng pag-signup, mga daloy ng pag-checkout, mga daloy ng onboarding, mga daloy ng pag-login, mga daloy ng pag-reset ng password, mga daloy ng booking, mga daloy ng pag-upgrade, at mga daloy ng pag-imbita ng kasama sa koponan.

Bakit mahalaga ang daloy ng user?

Ang mga daloy ng user ay tumutulong sa mga team na maunawaan kung paano gumagalaw ang mga user sa isang produkto bago mamuhunan sa detalyadong disenyo o pag-develop. Ang mga ito ay nagpapakita ng alitan, nawawalang mga hakbang, nakakalito na mga desisyon, at hindi kinakailangang kumplikado sa maagang bahagi ng proseso.

Paano mo gagawin ang daloy ng gumagamit?

Magsimula sa layunin ng user, piliin ang entry point, i-map ang masayang landas, magdagdag ng mga desisyon at edge case, pagkatapos ay pasimplehin ang landas. Gumamit ng mga bilog o oval para sa simula at pagtatapos, mga parihaba para sa mga screen o aksyon, mga diamante para sa mga desisyon, at mga arrow upang ipakita ang direksyon.

Subukan ang Anima Playground para sa mga daloy ng user at disenyo ng UX

Anima Playground hinahayaan kang pumunta mula sa ideya ng produkto patungo sa daloy ng UX, disenyo, at gumaganang code sa browser. Ilarawan ang karanasang gusto mong buuin, pinuhin ito gamit ang AI, at gawing tunay na interactive na produkto ang resulta.

Simulan ang pagdidisenyo gamit ang Anima Playground.