表單設計:一頁隻做一件事
開搶瞭！雙11創業者優選服務！
一頁隻做一件事，並不是一定要在一個頁面上隻展示單一的元素或組件(雖然也可以這麼做)。
2008年的時候，我在*Boots.com*工作。他們想做一個單頁的結賬頁面，運用那個年代最新潮的技術，包括手風琴組件、AJAX和客戶端驗證。
每個步驟(寄送地址、寄送選項、信用卡詳細信息)都收在一個手風琴面板中。而每個面板都通過AJAX提交。提交成功後，這個面板就會收起，並且通過滑動動畫展開下一個面板。
看起來就像這樣：
Boots的單頁結賬頁面，使用瞭手風琴面板展現每一個步驟。
用戶千辛萬苦才完成瞭下單過程。錯誤難以更正，因為上下滾動並不方便。手風琴面板讓人非常痛苦和分心。不可避免地，客戶要求我們作出改變。
我們進行瞭改版，讓每個面板單獨成為一個頁面，也就不需要手風琴和AJAX瞭。不過，我們還是保留瞭客戶端驗證，防止不必要的服務器請求。
看起來就像這樣：
Boots的結賬頁面：每一步都是單獨的一個頁面。
這個版本的轉化率好多瞭。雖然我不記得具體數字瞭，我知道客戶比較滿意。
6年後(2014年)，我在*Just Eat*工作，發生瞭同樣的事情。我們設計瞭一個單頁結賬流程，其中每個部分都有獨立頁面。這一次，我記下瞭相關數據。
結果是每年能增加2百萬訂單。要清楚，這是訂單量，不是利潤。這個數據是基於新版本至少一周後，結賬轉化率提升的比例得出的。這部分轉化成瞭訂單，數量激增52倍。
這是我們的移動端優先的設計：
Just Eat的結賬分為多個頁面。我們還在設計中進一步簡化瞭支付頁面：用戶先選擇 現金支付 或 銀行卡支付 ，然後才會轉到相關的頁面。可惜我們並沒有對這項優化進行測試。
兩年後(2016年)，GDS的Robin Whittleton告訴我，把每一步分為單獨頁面，是一種獨立的設計模式，叫做 一頁隻做一件事 。除瞭它產生的數據效果，這種模式的背後還有充分的合理性，這部分我們很快就會講到。
不過在這之前，我們來仔細看看這種模式到底是什麼。
一頁隻做一件事 到底靜電機租賃是什麼意思?
一頁隻做一件事，並不是一定要在一個頁面上隻展示單一的元素或組件(雖然也可以這麼做)。比如說，很可能仍然會保留頁頭和頁尾。
類似的，也不是說每個頁面上隻能有一個輸入框(當然，這麼做也是可以的)。
這種模式是指把復雜的流程分解成多個小碎片，把每個小碎片獨立一頁展示。
比如說，與其把地址輸入表單放在寄送選項和支付表單頁面，倒不如把地址輸入放在一個專用頁面。
地址輸入表單有許多輸入框，但它對於用戶來說，實際上是個單一的、獨立的問題。在專用頁面裡回答這個問題是有道理的。
我們看看這種模式到底好在哪裡。
好在哪裡?
雖然這種模式常常能結出碩果(其實就是指訂單和轉化率瞭)，我們最好還是要瞭解它背後的原理。
1. 減少認知負荷
正如Ryan Holiday在《The Obstacle Is The Way》中所說：
回想一下你第一次看到復雜代數式時的情景。這整個就是一團混亂的未知符號。但是當你將它分解，獨立成各個部分，答案便水落石出。
一步步分解等式，就能輕松解決問題。
用戶在填寫表單時也是一樣的道理，或者其他任何重要的事情都一樣。如果屏幕上元素減少，隻有唯一的選擇，阻礙就降到最低。因此，用戶會專註於完成任務。
2. 處理錯誤更容易
當用戶填寫小型表單時，錯誤可以很容易被發覺，並盡早呈現出來。如果隻有一個錯誤要修正，那就很容易，能降低用戶放棄的可能性。
即使有多個錯誤，Kidly的地址填寫表單也很容易更正。
3. 頁面加載更快
如果頁面的設計很簡單，加載就會更快。更快的加載速度能降低用戶離開的風險，為我們的服務建立起信任。
4. 易於追蹤行為
一頁上內容越多，就越難以瞭解用戶因為什麼離開。不要誤會我的意思：頁面數據分析不能左右設計，但這是個很不錯的副產品。
5. 易於追蹤過程和返回上一步
如果用戶需要頻繁提交信息，我們可以把它們以更細的顆粒來保存。舉個例子，如果用戶中途退出，我們還可以發送郵件，鼓勵他們完成訂單。
6. 滾動操作減少，甚至被消滅
不要誤會我的意思：滾動不是什麼大問題 用戶的期望中，網頁就是這麼用的。但如果頁面短小，用戶就沒必要滾動瞭。主操作項就更容易出現在屏幕視野內，能強調它的重要性，易於任務完成。
7. 容易產生分支
有時候，我們需要根據之前的答案，給用戶提供一條不同的路徑。舉個簡單的例子，兩個聯動的下拉菜單，用戶在第一個菜單裡的選擇，會影響第二個菜單中的內容。
一頁隻做一件事可以輕松處理這種情況：用戶作出選擇並提交，服務器來決定用戶接下來看到什麼 天然具有簡單和包容的特點。
我們也可以用JavaScript。不過無論是構建還是確保界面的可用性，都需要更高的成本。如果JavaScript出錯，用戶的體驗也就被破壞瞭。而且，根據所有這些排列組合選項來加載頁面，會顯著加重頁面負擔。
或者，我們可以使用AJAX，但這並沒有避免渲染新頁面(或者部分)。更關鍵的是，它並沒有減輕服務端的數據往返壓力。
還不止這些。我們需要發送更多代碼量，並且發起AJAX請求，還要處理錯誤、顯示加載指示器。這又讓頁面加載變慢瞭。
自定義加載指示器是有問題的，因為它們並不準確，不像瀏覽器的原生加載進度。用戶也不熟悉它們 相對於整個網站來說，它們是特殊的存在。無論如何，相似性台中靜電油煙機租賃是用戶體驗的慣例，除非真有必要，否則不要打破它。
而且，頁面上有兩個動態更新的聯動輸入項，這會需要用戶按照一定順序來操作。我們也可以通過可用/禁用和顯示/隱藏來控制這些輸入項，但這樣也更加復雜。
最後，用戶的某些更改，可能會導致隨後的元素消失或者變化，這也讓人迷惑。
8. 對使用屏幕閱讀器的用戶更友好
如果頁面上內容減少，屏幕閱讀器就不必長途跋涉穿過許多多餘的次要信息。用戶可以直接前往第一個標題，然後迅速開始操作表單。
9. 易於更改細節
想象一下某人正要確認訂單。關鍵時刻，他發現支付信息裡有一處錯誤。此時回到專用頁面比找到頁面*當中*的某個部分更容易。
用戶點擊 編輯 ，會前往支付信息頁面，裡面有專用的標題和相關的表單項目。
深陷一個長頁面中是會令人迷失方向。記住，用戶點擊鏈接代表他們要執行特定的操作 頁面上的其他東西都是幹擾信息。
長頁面還可能會加重工作量。比如說，如果想要在一個頁面中展開和收起面板，你就需要更多額外的邏輯思考。
一頁隻做一件事，這些問題都得到瞭解決。
10. 用戶對數據更有掌控力
用戶不會隻加載一半的頁面。要麼全部，要麼沒有。如果他們需要更多信息，就會點擊鏈接，他們有選擇能力。隻要每一步都更接近目標，用戶並不介意點擊。
11. 解決瞭性能問題
如果每件事都復雜無比 單頁應用就是一個極端例子 性能問題就很難解決。是因為執行時間問題?內存泄漏?還是AJAX請求導致的?
人們很容易認為AJAX能提升用戶體驗，但增加代碼量很少情況能創造更快的體驗。
復雜性轉移到客戶端，會掩蓋服務端的根本問題。但如果頁面隻做一件事情，性能問題就不容易產生。如果真發生瞭問題，排查原因也很容易。
12. 它有一種在前進的感覺
因為用戶在不停地前往下一步，會產生一種正在前進的感覺，在用戶填寫表單時給他們一種積極的感受。
13. 降低丟失信息的風險
長表單需要更長時間來完成。如果所花時間太長新竹靜電機租賃，頁面超時可能導致信息丟失，產生嚴重的挫敗感。
又或者，電腦可能卡死，*《我是佈萊克》*裡的主角Daniel就是這樣的例子。他的健康每況愈下，而且第一次用電腦就遇到瞭死機，然後數據丟失。最終他放棄瞭。
14. 第二次使用的體驗更順暢
比如，假設我們儲存瞭用戶的支付信息，我們可以直接跳過那一頁，直接帶他們去 結賬確認 頁面。這會減少阻礙，提升轉化率。
15. 這是移動優先設計的一種補充
移動優先的設計，提倡在小屏幕上隻呈現最重要的信息。一頁隻做一件事，也遵循著相同的方式。
16. 設計過程很簡單
當我們設計一套復雜流程時，分解成細小頁面和組件，可以讓人更容易理解這些問題。
還可以方便地調換頁面來改變順序。我們一次隻研究一件事，這點和用戶一樣，能讓我們更輕松地分析問題。
這可以減輕設計負擔 這種模式讓用戶受益的同時，還能有這樣的附加福利。
這種模式適合所有情況嗎?
也不完全是。Caroline Jarrett在2015年寫過一篇文章《一頁隻做一件事》，裡面講得很清楚。她解釋道，用戶調研 會告訴你某些問題組合起來放在長頁面裡更合適 。
但是反過來，她也提到瞭 對於設計師來說 屬於一組 的問題 對於用戶而言，並不一定要放在一個頁面上 。
她提出瞭一個頗具啟發性的例子，GOV.UK的驗證頁面中，他們嘗試把 創建用戶名 和 創建密碼 先後放在兩個頁面上。
就像許多設計師所認為的，Caroline覺得把這兩者放在不同頁面有點太過瞭。實際上，用戶對此一點也不介意。
關鍵在於，以一頁隻做一件事為出發點，然後通過用戶研究，驗證把其中一些項目編組合並，是否能進一步改善用戶體驗。
這並不代表最終結果一定是把頁面合並 在我經驗中，最好的結果往往是把事情拆分開來，僅此而已。當然，我也希望聽聽你的經驗。
總結
這種低調不起眼的用戶體驗設計模式很靈活、高性能、有包容性。這是真正擁抱互聯網的方式，對於自信滿滿和小心翼翼的用戶而言都很簡單。
一個頁面上展現很多(或者全部)內容可能會營造一種簡單的幻象，但就像代數式問題一樣，除非把它們分解，否則很難處理。
如果把任務看作是用戶想要完成的一筆交易，把它分解為多個小步驟很有必要。這就像我們在用網頁的一磚一瓦來搭建漸進式表單。每一頁背後的隱喻，都給潛意識營造一種正在前進的感覺。
我還沒有遇到過哪種其他的設計模式，能具備這麼多的優點。這就是那種真理時刻 答案總是最簡單的。
原文作者：Adam Silver
原文地址：https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/
留言列表
