如何設計有效的登入頁面，以及應避免的錯誤

設計網站絕非易事。網站是一項大型專案，由一連串細小的決定組成，而這些決定最終決定了網站的樣貌。在這個過程中，您會面臨許多在瀏覽其他網站時可能視為理所當然的決定。

登入頁面的版面配置，就是這類小決定的一個例子。

使用者體驗是指一個人使用網站等產品的體驗，以及整體而言是否愉快。網站是您事業最重要的工具，在設計過程中，您應該從客戶體驗的角度看待整個專案。

功能性對網站非常重要。技術問題、載入緩慢、難以找到想要的內容等問題，都可能破壞使用者體驗。就登入頁面而言，使用者都是有明確目的的人：他們不是已經是會員，就是正打算註冊。

對整個網站，您都要仔細規劃並安排每個元件。本文的目的是探討規劃與編排網站的最佳做法，並特別聊聊登入頁面。我們會先介紹一般的最佳做法，再討論登入頁面的設計，以及如何衡量登入頁面的成效。

我們開始吧。

首先，我們從適用於整個網站的網頁設計最佳做法談起，其中也包括登入頁面設計的最佳做法，確保使用者能有效率且安全地存取帳戶。

1. 縮短頁面載入時間

好，這裡不會講得太技術，但這一點必須提出來。使用者不想坐著等頁面載入。同樣地，我們不會深入探討後端細節，不過您可以快速搜尋一下，找出縮短載入時間的方法。

2. 所有頁面風格一致

從主要頁面到到達頁面，您的網站都應該有明確定義的主題與風格。這種一致的設計也應該延伸到登入頁面，在所有使用者接觸點保持一致。以標誌為基礎，在各個頁面使用相近的色彩配置，能讓訪客感到熟悉，覺得自己來對了地方。

3. 讓導覽保持簡單

不要用雜亂的導覽列讓網站過於複雜。主要導覽列只應放必要的項目，子頁面可以用下拉選單呈現。您最不希望的，就是讓網站訪客不知所措。讓他們能輕鬆到達想去的地方。

4. 每個頁面都放上行動呼籲（CTA）

行動呼籲是把網站流量轉化為客戶的方法。目標是讓使用者覺得一切都很簡單。無論他們從哪裡進入、在網站上瀏覽到哪裡，我們都要讓使用者有機會留下資料，進而成為客戶。

5. 讓內容容易閱讀

做法有很多，但您絕對不希望使用者一進入頁面就看到一大段冗長的文字。有幾種策略可以運用，我們來談談其中幾種。

首先，段落要簡短扼要，把文字拆成較小、更容易消化的片段。

接著，變換排版形式。注意到這篇文章現在被分成一個個編號段落了嗎？這也是一種有效的策略。

同樣地，用項目符號拆分內容也是好方法。

項目符號讓頁面內容看起來不那麼繁重。
項目符號幫您更快表達重點。
別用過量的資訊讓使用者感到無聊！
關於頁面內容的最後一個建議也適用於這裡，不過它可能更適合獨立成一個主題。

6. 運用多媒體

運用各種圖片、圖形、影片、圖表、橫幅，以及任何您想得到的元素，讓頁面內容更生動。多媒體能為頁面增添個性、吸引使用者參與，最重要的是，還能帶來樂趣。

7. 使用外掛

無論您使用哪個平台架站，都應該善用外掛為網站增加功能。舉個例子，假設您使用 WordPress 架站。

於是，您開始搜尋熱門的 WordPress 外掛。您經營一家美髮沙龍，希望顧客能直接在網站上預約，也就是說，您要找的是 WordPress 預約外掛或預約排程外掛。

您真幸運。

您偶然發現了 Bookly，這是一款預約管理系統外掛。在網站加入這類外掛，能為使用者帶來極大的價值。

好，到目前為止，我們已經介紹了網站的一般最佳做法。接下來，我們將專門討論登入頁面，以及最佳設計的技巧與策略。為了確保順暢的使用者體驗，思考設計登入頁面時應避免哪些常見錯誤非常重要。

設計時，務必把使用者放在首位。相信您已經深刻體會到這一點，但再怎麼強調都不為過。建立買家人物誌，是設計過程中非常有幫助的練習。

確保大家理解一致很重要。對於想知道什麼是買家人物誌的讀者，我們就從這裡開始。

買家人物誌的定義是：根據對客戶的研究與資料，描繪出的理想客戶形象。

在每個設計決定中，您都應該先考量買家人物誌。以登入頁面來說，您需要考量的實際上有兩種人物誌。

在開始規劃設計時，我們把它們分開，逐一來看。

1. 潛在會員

這種買家人物誌是網站上的新使用者，有興趣成為會員，但目前還沒有帳戶。這裡的目標（同時也能滿足兩種人物誌）是清楚、簡單地呈現登入和會員註冊的位置。

讓這兩個選項明顯區隔。一個好策略是為這兩項功能設置兩個不同的方框，並用不同顏色區分。此外，請用清楚的大字標示各個方框。

不要把這件事弄得太複雜。

同樣地，我們來談談資料欄位。最好的策略是分階段蒐集需要的資訊。首先，找出新會員絕對必要的資訊。

理想情況下，保持簡單，在主頁面只詢問姓名和 email。接著，您可以把他們導向第二個頁面，詢問更多資訊以完成註冊流程。

2. 回訪會員

這種買家人物誌是回訪的會員，他們只想盡可能輕鬆、無痛地登入。當然，上述的版面原則在這裡同樣適用，但若要真正提升登入體驗，我們要在這裡加入一些選項。

這些選項的目的，是讓回訪會員的登入流程極為簡單順暢。我們來看看幾種簡化流程的方法。

首先，讓使用者下次回來登入時更輕鬆。提供一個「記住我」核取方塊，這樣網站就能在該使用者下次用同一台裝置回訪時，自動帶入登入資訊。這些使用者回到網站時，只需要按下登入按鈕即可。

就這麼簡單。

好，現在讓輸入密碼的人也更輕鬆。提醒使用者密碼有區分大小寫。這看似微不足道，但相信我們，這能幫助使用者順利登入。

接下來是那些健忘的使用者：他們沒有勾選「記住我」、使用的是新裝置，或沒有記下密碼和／或使用者名稱。

這些人正在大喊：「救命！」

兩個簡單的按鈕就能解決所有這些擔憂。您需要提供「忘記密碼」按鈕和「忘記使用者名稱」按鈕。接著，向使用者寄送一組說明，讓他們找回或重設密碼和使用者名稱，然後就能存取帳戶。

專業提示：讓使用者感受到您的關心，提醒他們勾選「記住我」選項和／或記下密碼，以免日後再遇到這個問題。像這樣主動提供協助，有助於與使用者建立信任和關係。

好，到目前為止我們已經介紹了很多內容。接下來，我們要看看如何追蹤並衡量設計與頁面設定的成效。您應該給網站至少 90 天累積資料，然後設定 A/B 測試，持續發展並改善網站。

在繼續深入之前，我們先快速回顧一下目前介紹過的所有內容。

網站設計最佳做法

• 確保頁面快速載入。使用者可沒什麼耐心。
• 在整個網站建立一致的風格與主題。
• 讓使用者能輕鬆導覽。
• 在每個頁面使用 CTA。
• 把內容拆分得容易消化。不要長段落！
• 運用多媒體讓頁面更生動、更有活力。
• 運用外掛為頁面加入進階功能。

登入頁面最佳做法

• 建立買家人物誌，了解您的終端使用者是誰。
• 讓新會員註冊和回訪會員登入的選項容易辨識。
• 確保兩種流程都簡單無痛，簡化使用者需要做的事。
• 在兩種流程中提供建議和實用提示，讓使用者知道您隨時願意協助，而且重視他們的體驗。
• 到目前為止，最重要的重點是：您必須時時站在使用者的立場思考。網站的每個決定都要從使用者體驗的角度出發。使用者體驗至上！

現在我們來談談追蹤。

首先要說的是——不，這不是在幫 Google 打廣告。事實上，就是沒有比 Google Analytics 更好的網站分析工具。

建立 Google Analytics 帳戶，並參加簡短的線上培訓課程，了解如何充分發揮這項工具的優勢。Google 本身就提供這些課程，而且是免費的。因此，今天我們不會完整教學 Google Analytics，但會提供一些通用的技巧，讓您衡量我們介紹過的所有設計工作。

1. 設定商業目標與目標達成

您網站的目標是什麼？大量流量如果沒有為您帶來任何可衡量的業務，其實不值得您花時間。找出目標（也就是您希望流量在網站上完成的行動），並在分析帳戶中將它們建立為目標達成。

2. 監控使用者的搜尋字詞

先說明一下，要做到這一點，您需要建立並連結 Google Search Console 帳戶。它是免費且簡單的，Google 說明也能告訴您如何快速輕鬆地完成設定。完成之後，請查看使用者透過哪些搜尋查詢來到您的網站，並運用這些資料持續調整並優化搜尋引擎最佳化策略。

3. 使用頁面分析工具

使用這項工具，找出每個頁面上吸引最多點擊與注意的位置。您可以用它查看頁面上哪些部分有效、哪些無效。對登入頁面來說，這可能是很有價值的資料。

4. A/B 測試

對於表現不佳的頁面，試著做些調整並進行測試，讓新策略並排比較。記錄資料，並隨時做出必要的修改。網站是一個需要持續關注的有機體。

希望今天的內容對您有所幫助。設計是一個範圍很廣的主題，也是一個永遠不會結束的過程。在您設計、建立、實施與監控網站時，這些最佳做法都能派上用場。祝您好運！

Bookly 常見問題

登入頁面應避免哪些常見錯誤？

在使用者還不知道從哪裡開始之前，就顯示太多欄位。一次要求頭像、安全問題和電話號碼，再加上一個隱藏的 CAPTCHA——這樣只會讓人放棄。避免雜亂。標籤要清楚：寫「Email」，而不是「使用者識別碼」。不要每次登入都強制重設密碼。要求 16 個字元、包含符號、大小寫字母和表情符號的密碼，聽起來或許很安全，但帶來的困擾比保護更多。還有，拜託不要把「忘記密碼」藏在底部灰色的小字裡。如果使用者看不到，他們就會直接離開。

如何設計使用者友善的登入頁面？

從大膽的簡潔開始：一個表單、兩個欄位——email 和密碼——置於畫面中央。為行動裝置使用者提供又大又好點的按鈕。提供「顯示密碼」切換選項，讓人在昏暗環境中也不會打錯。在欄位正下方提供清楚的「忘記密碼」連結。 

如果您支援社群帳號或單一登入選項，請把這些按鈕放在主要表單之後，加上分隔線和溫和的「或使用以下方式繼續」提示。錯誤訊息要禮貌且精確：「我們的紀錄中沒有這個 email」比「登入失敗」好得多。最後，使用熟悉的字型、品牌配色，以及充足的留白，讓畫面不顯得擁擠。這正是登入頁面設計最佳做法的核心，也能為您的登入頁面設計提供可靠的藍圖。

怎樣的登入頁面才安全又有效？

SSL 加密是不可或缺的。確保網址以 HTTPS 開頭，並讓鎖頭圖示清楚可見。限制登入嘗試的頻率，讓機器人無法整天暴力破解密碼。提供雙重驗證選項——簡訊、email 或驗證器 App——為使用者多加一層防護。在伺服器上以加鹽雜湊儲存密碼。在後台記錄失敗的登入嘗試以便監控。但不要用術語淹沒使用者，要用淺白的方式說明安全措施：「我們以業界標準的加密技術保護您的資料」，既能讓使用者安心，也能落實登入頁面設計在安全與清晰方面的最佳做法。

糟糕的登入設計會如何影響使用者留存？

當人們無法快速登入時，就會離開。每多一次點擊或一則令人困惑的錯誤訊息，都會讓人失去興趣。登入時的阻力，就像想進門時卻發現門被鎖上。受挫的使用者會放棄購物車、略過更新，然後消失在競爭對手敞開的大門裡。您辛苦製作的電子報？沒人看到。您想完成的交易？沒了。簡單來說，笨拙的登入頁面就像一個漏水的桶子。優先打造順暢的存取體驗，正體現了登入頁面設計的最佳做法，也能讓使用者一再回訪。