行動裝置登入與註冊設計：讓建立帳號的步驟更清楚

選擇帳號開始有用的時機

從使用者想完成的工作出發。如果核心體驗無需帳號即可運作，先讓使用者探索；等到他們要使用需要儲存偏好設定、跨裝置存取、協作或交易的功能時，再要求登入。Apple 人機介面指南建議可行時延後登入，並在必須建立帳號時說明好處。

符合情境的提示，比開啟應用程式就遇到登入牆更容易理解。例如，閱讀應用程式可以先讓使用者瀏覽書名，等他們想同步閱讀清單時才要求建立帳號。如果從一開始就必須建立帳號，請在呈現欄位前說明原因。說明應具體且適度：「建立帳號以儲存專案，並在其他裝置開啟」比「加入我們的社群」更有幫助。

• 將必要資訊與選填的個人資料分開。
• 對訪客結帳或一次性任務，考慮是否能在提供當下價值後才要求建立帳號。
• 身分驗證成功後，帶使用者回到原本打算完成的操作。

讓登入選項清楚且容易辨認

使用者應能分辨自己是在建立帳號，還是返回既有帳號。為兩條路徑使用不同標籤，讓主要操作在視覺上清楚，並將替代方式放在方便比較、又不讓畫面過於雜亂的位置。視情況使用服務供應商名稱及平台核准的按鈕樣式；只有「繼續」這種泛用標籤，無法說明下一步會發生什麼。

只提供產品確實支援且能持續維護的登入方式。電子郵件、通行金鑰或平台身分識別選項，可能適合不同受眾。將它們呈現為選擇，不要宣稱某一種方式對所有人都最簡單或最安全。額外必填的資訊也應說明。

回訪使用者可能不記得上次的登入方式。讓帳號復原與其他登入方式容易找到，並說明電子郵件若與其他登入方式關聯時該怎麼辦。帳號連結指引可協助使用者保留既有帳號的存取權。

讓表單聚焦，並相容於使用者的工具

只要求建立或存取帳號所需的欄位。使用持續顯示的標籤，不要只靠預留位置文字作標籤；選擇適當的輸入類型和鍵盤，讓下一步操作清楚。如果註冊需要多項資訊，請將相關欄位分組，並將選填偏好設定延後到使用者進入產品後再處理。

身分驗證應與自動填寫和密碼管理工具相容。使用標準的欄位名稱與語意，避免自訂行為妨礙憑證填入。不要禁止貼上密碼；使用者可能使用密碼管理工具或其他工具。WCAG 指引特別指出，應允許瀏覽器及第三方密碼管理工具填寫登入欄位。

不同裝置和密碼管理工具的行為可能不同，因此請在支援的平台上測試流程，並允許手動修正。登入失敗後，實務上可行時保留電子郵件地址等有用的非敏感資料。

• 使用「電子郵件地址」等可見標籤，以及清楚的密碼標籤。
• 適當時允許使用者顯示或檢查密碼，但不要讓這個控制項成為唯一的修正方式。
• 將主要按鈕放在欄位附近，並使用「建立帳號」或「登入」等具體描述操作的標籤。

為錯誤、復原與下次造訪而設計

有用的錯誤訊息會用文字指出受影響的欄位或失敗的步驟，並告訴使用者如何繼續。電子郵件格式錯誤或欄位空白時，「發生錯誤」並不足夠。WCAG 2.2 成功準則 3.3.1 要求以文字辨識和描述偵測到的輸入錯誤；不能只靠顏色或圖示傳達訊息。

使用中性的語氣，並將欄位專屬指引放在欄位附近。例如，針對格式錯誤的地址，假設性文案可以寫：「請輸入 [email protected] 格式的電子郵件地址。」登入失敗時，產品可以說：「無法使用這些資料登入。請檢查電子郵件和密碼，或重設密碼。」避免在錯誤訊息中揭露敏感帳號資訊；措辭應符合產品的隱私及防濫用需求。

說明使用者提出重設請求後會發生什麼，提供返回登入畫面的方式，並協助他們找回先前使用的登入方式。日後造訪時，清楚顯示已登入狀態，並提供進入帳號設定、登出與說明的路徑。如果可以在應用程式中建立帳號，刪除帳號的入口也應容易找到。

• 將錯誤與其描述的欄位關聯，並確保不靠顏色也能感知。
• 將復原操作放在登入表單附近，避免讓使用者不必要地重新開始。
• 檢視初次使用及回訪狀態，包括電子郵件地址變更與登入方式無法使用的情況。

實用的帳號流程檢查

分別以新使用者、回訪使用者及需要恢復存取權的使用者身分走過流程。在實際情境中檢查畫面。行動裝置設計模式資料庫可幫助團隊比較不同表單如何安排輸入欄位、標籤與操作。

• 帳號非必要時，使用者能否在登入前先體驗產品價值？
• 畫面是否說明為何需要帳號，以及哪些資訊為必填？
• 使用者能否區分註冊、登入、替代方式與帳號復原？
• 欄位標籤是否持續顯示？自動填寫與貼上能否填入憑證？
• 錯誤是否以文字指出問題、保留有用輸入，並建議下一步？
• 成功後，使用者是否返回原本開始的任務？