Disenyo ng pag-log in at pag-sign up sa mobile: gawing malinaw ang hakbang sa account

Piliin kung kailan magiging kapaki-pakinabang ang isang account

Magsimula sa trabahong pinuntahan ng tao. Kung ang pangunahing karanasan ay maaaring gumana nang walang account, hayaan ang mga tao na mag-explore muna at humiling ng pag-sign in kapag naabot nila ang isang feature na nangangailangan ng mga naka-save na kagustuhan, cross-device na access, pakikipagtulungan, o isang transaksyon. Inirerekomenda ng Mga Alituntunin ng Human Interface ng Apple na ipagpaliban ang pag-sign in kapag posible at ipaliwanag ang benepisyo kapag kinakailangan ang isang account.

Ang isang prompt sa konteksto ay mas madaling maunawaan kaysa sa isang launch-time na pader. Halimbawa, maaaring hayaan ng isang app sa pagbabasa ang isang tao na mag-browse ng mga pamagat, pagkatapos ay hilingin sa kanila na gumawa ng account kapag pinili nilang mag-sync ng listahan ng babasahin. Kung ang paggawa ng account ay mahalaga sa simula, sabihin kung bakit bago magpresenta ng mga field. Panatilihing kongkreto at proporsyonal ang paliwanag: "Gumawa ng account para i-save ang iyong mga proyekto at buksan ang mga ito sa isa pang device" ay mas kapaki-pakinabang kaysa sa "Sumali sa aming komunidad."

• Paghiwalayin ang kinakailangang impormasyon mula sa mga opsyonal na detalye ng profile.
• Para sa pag-checkout ng bisita o isang beses na gawain, isaalang-alang kung ang paggawa ng account ay maaaring maghintay hanggang matapos maihatid ang agarang halaga.
• Pagkatapos magtagumpay ang pagpapatotoo, dalhin ang mga tao sa pagkilos na nilayon nilang kumpletuhin.

Gawing malinaw at nakikilala ang mga pagpipilian sa pag-sign in

Dapat masabi ng isang tao kung gumagawa siya ng account o babalik sa isa. Bigyan ng magkakaibang mga label ang dalawang ruta, panatilihing malinaw sa paningin ang pangunahing aksyon, at maglagay ng mga alternatibong pamamaraan kung saan maihahambing ang mga ito nang hindi nababalot ang screen. Gumamit ng mga pangalan ng provider at mga paggagamot na naaprubahan ng platform kung saan nauugnay; ang isang generic na label na "Magpatuloy" lamang ay hindi nagpapaliwanag kung ano ang susunod na mangyayari.

Mag-alok lamang ng mga paraan na sinusuportahan at maaaring mapanatili ng produkto. Ang email, passkey, o opsyon sa pagkakakilanlan ng platform ay maaaring magkasya sa iba't ibang audience. Ipakita ang mga ito bilang mga pagpipilian, hindi bilang isang pag-aangkin na ang isang paraan ay pinakamadali o pinakaligtas sa pangkalahatan. Ipaliwanag ang anumang karagdagang kinakailangang impormasyon.

Maaaring hindi maalala ng mga bumabalik na user ang kanilang paraan ng pag-sign in. Gawing natuklasan ang pagbawi at kahaliling pag-sign-in, at ipaliwanag kung ano ang gagawin kung nauugnay ang isang email sa ibang paraan. Ang gabay sa pag-link ng account ay makakatulong sa mga tao na mapanatili ang access sa isang umiiral nang account.

Panatilihing nakatutok at tugma ang mga form sa mga tool ng mga tao

Humingi lamang ng mga field na kailangan para gumawa o ma-access ang account. Gumamit ng mga patuloy na label sa halip na umasa sa text ng placeholder bilang tanging label, pumili ng naaangkop na uri ng input at keyboard, at gawing malinaw ang susunod na pagkilos. Kung ang pag-sign up ay nangangailangan ng ilang piraso ng impormasyon, pangkatin ang mga nauugnay na field at ipagpaliban ang mga opsyonal na kagustuhan hanggang matapos na maabot ng tao ang produkto.

Dapat gumana ang pagpapatotoo sa mga tagapamahala ng autofill at password. Gumamit ng mga karaniwang pangalan ng field at semantics, at iwasan ang custom na gawi na pumipigil sa pagpuno ng kredensyal. Huwag i-block ang password paste: maaaring gumamit ang mga tao ng password manager o ibang tool. Ang patnubay ng WCAG ay tumatawag na nagpapahintulot sa mga browser at third-party na mga tagapamahala ng password na punan ang mga field sa pag-log in.

Maaaring mag-iba ang gawi sa mga device at tagapamahala ng password, kaya tingnan ang daloy sa mga sinusuportahang platform at payagan ang manu-manong pagwawasto. Pagkatapos ng isang nabigong pagtatangka, panatilihin ang mga kapaki-pakinabang na hindi sensitibong halaga gaya ng email address kapag praktikal.

• Gumamit ng nakikitang label gaya ng “Email address” at isang malinaw na label ng password.
• Pahintulutan ang mga tao na ipakita o suriin ang isang password kapag naaangkop, nang hindi ginagawa ang kontrol na iyon ang tanging paraan upang itama ang pagpasok.
• Panatilihin ang pangunahing button malapit sa mga field at bigyan ito ng label na partikular sa pagkilos gaya ng "Gumawa ng account" o "Mag-sign in."

Disenyo para sa mga pagkakamali, pagbawi, at sa susunod na pagbisita

Ang isang kapaki-pakinabang na error ay tumutukoy sa apektadong field o nabigong hakbang sa text at nagsasabi sa tao kung paano magpatuloy. Hindi sapat ang "May nangyaring mali" kapag hindi wasto ang format ng email o walang laman ang isang field. Ang WCAG 2.2 Pamantayan ng Tagumpay 3.3.1 ay nangangailangan ng natukoy na mga error sa pag-input upang matukoy at mailarawan sa teksto; kulay o isang icon ay hindi dapat mag-isa na magdala ng mensahe.

Gumamit ng neutral na wika at ilagay ang patnubay na partikular sa field malapit sa field. Halimbawa, maaaring sabihin ng hypothetical na kopya para sa isang mali ang pagkakabuo ng address: "Maglagay ng email address sa format na [email protected]." Para sa hindi matagumpay na pag-sign in, maaaring sabihin ng isang produkto: "Hindi ka namin ma-sign in gamit ang mga detalyeng iyon. Tingnan ang iyong email at password, o i-reset ang iyong password." Iwasang ilantad ang sensitibong impormasyon ng account sa mga mensahe ng error; pumili ng mga salita na akma sa privacy ng produkto at mga pangangailangan sa pag-iwas sa pang-aabuso.

Ipaliwanag kung ano ang mangyayari pagkatapos humiling ng isang pag-reset, magbigay ng paraan pabalik sa pag-sign in, at tulungan ang mga tao na mahanap ang paraan na ginamit nila noon. Sa mga susunod na pagbisita, malinaw na ipakita ang naka-sign in na estado at magbigay ng ruta sa mga setting ng account, pag-sign out, at tulong. Kung maaaring gumawa ng mga account sa app, gawing madaling mahanap ang pagtanggal ng account.

• Iugnay ang isang error sa field na inilalarawan nito at gawin itong nakikita nang walang kulay lamang.
• Panatilihing malapit ang mga pagkilos sa pagbawi sa form sa pag-sign in at iwasang mag-restart ang mga user nang hindi kinakailangan.
• Suriin ang parehong first-use at returning-user states, kabilang ang mga binagong email address at hindi available na paraan ng pag-sign in.

Isang praktikal na pagsusuri sa daloy ng account

Maglakad sa daloy bilang isang bagong tao, isang bumabalik na tao, at isang taong nakakakuha ng access. Suriin ang mga screen sa konteksto. Makakatulong ang library ng mga mobile pattern sa mga team na ihambing kung paano inaayos ng mga form ang mga input, label, at pagkilos.

• Maaabot ba ng mga tao ang kapaki-pakinabang na halaga ng produkto bago mag-sign in kapag hindi mahalaga ang account?
• Sinasabi ba ng screen kung bakit kailangan ang isang account at aling impormasyon ang kinakailangan?
• Maaari bang makilala ng isang tao ang pag-signup, pag-sign in, mga alternatibong pamamaraan, at pagbawi ng account?
• Nananatiling nakikita ba ang mga label ng field, at maaari bang i-autofill at i-paste ang mga kredensyal?
• Pinangalanan ba ng mga error ang problema sa text, pinapanatili ang kapaki-pakinabang na input, at nagmumungkahi ng susunod na hakbang?
• Pagkatapos ng tagumpay, bumalik ba ang tao sa gawaing sinimulan nila?