Zi 字媒體

一頁只做一件事，並不是一定要在一個頁面上只展示單一的元素或組件（雖然也可以這麼做）。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原文地址：#專欄作家#可樂橙，（colachangreen）。人人都是產品經理專欄作家，UI/UX設計師，關注互聯網，關注科技。現居杭州，與小夥伴們正在創業途中。或許不是一名優秀的設計師，至少是個快樂的設計師。本文翻譯發佈於人人都是產品經理，未經許可，不得轉載。