一頁只做一件事。沒有必要在單個頁面上僅顯示單個元素或組件（盡管可以完成）。

2008年，我在* Boots.com *工作。他們希望制作一個單頁結帳頁面，該頁面使用當時的最新技術，包括手風琴組件，AJAX和客戶端驗證。

每個步驟（郵寄地址，運送選項，信用卡詳細信息）都放在手風琴小組中。每個面板都是通過AJAX提交的。提交成功后，面板將崩潰，下一個面板將通過滑動動畫進行擴展。

它看起來像這樣：

Boots的單頁結帳頁面使用手風琴面板顯示每個步驟。

用戶已經努力完成訂單處理。錯誤很難糾正，因為上下滾動不方便。手風琴組非常痛苦，令人分心?？蛻舨豢杀苊獾匾笪覀冏龀龈淖?。

我們重新設計了每個面板成為一個頁面，因此我們不需要手風琴或AJAX。但是，我們仍然保留客戶端驗證以防止不必要的服務器請求。

它看起來像這樣：

Boots checkout頁面：每個步驟都是一個單獨的頁面。

此版本的轉換率要好得多。雖然我不記得具體的數字，但我知道客戶很滿意。

六年后（2014年），我在* Just Eat *工作，同樣的事情發(fā)生了。我們設計了一個單頁結帳流程，其中每個部分都有一個單獨的頁面。這一次，我記錄了相關數據。

結果是每年增加200萬個訂單。要明確，這是訂單數量，而不是利潤。此數據基于新版本后至少一周后結帳轉換率增加的百分比。這部分被轉換為訂單，數量激增了52倍。

這是我們的移動優(yōu)先設計：

Just Eat的結賬分為多個頁面。我們進一步簡化了設計中的支付頁面：用戶在進入相關頁面之前首先選擇“現(xiàn)金支付”或“銀行卡支付”。不幸的是，我們還沒有測試過這種優(yōu)化。

兩年后（2016年），GDS的Robin Whittleton告訴我，將每一步劃分為單獨的頁面是一種獨立的設計模式，稱為“一頁只有一件事”。除了它產生的數據效果之外，這個模型背后還有足夠的合理性，我們將在稍后介紹。

但在此之前，讓我們仔細看看這個模型是什么。

“一頁只做一件事“究竟是什么意思？

一頁只做一件事。沒有必要在單個頁面上僅顯示單個元素或組件（盡管可以完成）。例如，頁眉和頁腳很可能仍會保留。

同樣，這并不意味著每頁只能有一個輸入框（當然，這很好）。

此模式是指將復雜過程分解為多個小塊，并在單獨的頁面上顯示每個小塊。

例如，不是將地址輸入表單放在發(fā)貨選項和付款表單頁面上，最好將地址輸入放在專用頁面上。

地址輸入表單有許多輸入框，但它實際上是用戶的一個獨立問題。在專門的頁面中回答這個問題是有意義的。

讓我們看看這個模型的好處。

它在哪里？

雖然這種模式通?？梢砸娦Вㄊ聦嵣?，它指的是訂單和轉換率），但我們更好地理解它背后的原理。

1.減少認知負擔

正如Ryan Holiday在《The Obstacle Is The Way》中所說：

回想一下第一次看到復雜代數時的情況。整個是一堆亂七八糟的未知符號。但是當你把它拆分并成為獨立的部分時，答案就會出現(xiàn)。

逐步分解等式，就可以輕松解決問題。

用戶在填寫表格或任何其他重要事項時也是如此。如果屏幕上的元素減少，則只有一個選擇，并且障礙被最小化。因此，用戶將專注于完成任務。

2.處理錯誤更容易

當用戶填寫小表格時，可以容易地檢測并盡早呈現(xiàn)錯誤。如果只有一個錯誤需要修復，則很容易并且可以減少用戶放棄的可能性。

即使有多個錯誤，Kidly的地址填寫表格也很容易糾正。

3.頁面加載速度更快

如果頁面設計簡單，加載速度會更快。更快的加載速度可降低用戶離開并建立對我們服務的信任的風險。

4.易于跟蹤行為

頁面上的內容越多，理解用戶離開的內容就越難。不要誤會我的意思：頁面數據分析無法設計，但它是一個很好的副產品。

5.輕松跟蹤流程并返回上一步

如果用戶需要經常提交信息，我們可以將它們保存在更精細的粒子中。例如，如果用戶中途退出，我們也可以發(fā)送電子郵件以鼓勵他們完成訂單。

6.減少甚至消除滾動

不要誤會我的意思：滾動不是一個大問題——在用戶的期望中，網頁就像這樣使用。但是如果頁面很短，則用戶不必滾動。主要操作項更有可能出現(xiàn)在屏幕視圖中，強調其重要性并且易于完成。

7.易于生產分支

有時我們需要根據之前的答案為用戶提供不同的路徑。舉一個簡單的例子，兩個鏈接的下拉菜單，用戶在第一個菜單中的選擇，將影響第二個菜單的內容。

一個頁面可以輕松地做一件事來處理這種情況：用戶做出選擇并提交，服務器決定用戶接下來會看到什么——自然具有簡單和包容的功能。

我們也可以使用JavaScript。但是，無論是構建還是確保接口的可用性，都需要更高的成本。如果JavaScript出錯，則會破壞用戶體驗。此外，基于所有這些排列選項加載頁面會顯著增加頁面負擔。

或者，我們可以使用AJAX，但這不會避免渲染新頁面（或部分）。更重要的是，它并沒有減輕服務器端的數據往返壓力。

不僅。我們需要發(fā)送更多代碼并啟動AJAX請求，以及處理錯誤和顯示負載指標。這反過來會使頁面加載速度變慢。

自定義負載指示器存在問題，因為它們不準確，與瀏覽器的本機加載進度不同。用戶也不熟悉它們——它們相對于整個網站而言是特殊存在的。在任何情況下，相似性是用戶體驗的慣例，除非確實有必要，否則不要破壞它。

此外，頁面上有兩個動態(tài)更新的鏈接條目，這將要求用戶以特定順序操作。我們還可以通過可用/禁用和顯示/隱藏來控制這些輸入，但這也更復雜。

最后，對用戶的一些更改可能會導致后續(xù)元素消失或更改，這會讓人感到困惑。

8.屏幕閱讀器更加用戶友好

如果頁面上的內容減少，則屏幕閱讀器不必通過大量冗余的輔助信息長途跋涉。用戶可以直接轉到第一個標題并快速開始處理表單。

9.易于更改細節(jié)

想象一下有人即將確認訂單。在關鍵時刻，他發(fā)現(xiàn)付款信息有誤。此時返回專用頁面比查找頁面的一部分更容易*。

用戶點擊“編輯”，用戶將轉到具有專用標題和相關表單項的付款信息頁面。

被困在一個長頁面可能會分散注意力。請記住，用戶點擊鏈接表示他們想要執(zhí)行特定操作——頁面上的其他內容都是干擾。

長頁面也可以增加工作量。例如，如果要在頁面中展開和折疊面板，則需要更多額外的邏輯思維。

一頁只做一件事，這些問題就解決了。

10.用戶可以更好地控制數據

用戶不只是加載了一半的頁面。全部或全部。如果他們需要更多信息，他們將點擊鏈接，他們可以選擇。只要每個步驟更接近目標，用戶就不介意點擊。

11.解決了性能問題

如果一切都很復雜——單頁應用程序是一個極端的例子——性能問題很難解決。是由于執(zhí)行時間問題？內存泄漏？或者它是由AJAX請求引起的？

很容易認為AJAX可以改善用戶體驗，但添加少量代碼可以創(chuàng)建更快的體驗。

復雜性轉移到客戶端，這將模糊服務器的基本問題。但如果頁面只做一件事，性能問題就不容易產生。如果出現(xiàn)問題，可以很容易地解決問題。

12.它有前進的感覺

因為用戶不斷地移動到下一步，所以有一種向前移動的感覺，在填寫表格時給予用戶積極的感覺。

13.降低丟失信息的風險

長表單需要更長時間才能完成。如果所花費的時間太長，頁面超時可能會導致信息丟失和嚴重挫折。

或者，計算機可能卡住，*《我是布萊克》*中的主要字符Daniel就是這樣的例子。他的健康狀況變得越來越糟，他第一次用電腦墜毀，數據丟失了。最后他放棄了。

14.第二次使用經驗更順暢

例如，如果我們存儲用戶的付款信息，我們可以跳過該頁面并將其直接帶到“結帳確認”頁面。這將減少障礙并提高轉換率。

15.這是移動優(yōu)先設計的補充

移動優(yōu)先設計僅在小屏幕上提供最重要的信息。一個頁面只做一件事，它遵循相同的方式。

16.設計過程很簡單

當我們設計一個復雜的流程時，它會分解為小頁面和組件，使其更容易理解。

更改頁面以更改順序也很方便。我們一次只研究一件事，就像用戶一樣，我們更容易分析問題。

這可以減輕設計負擔——這種模式對用戶有益，同時還具有其他優(yōu)勢。

這種模式適合所有情況嗎？

不完全是。 Caroline Jarrett在2015年寫了一篇文章《一頁只做一件事》，非常清楚。她解釋說用戶研究< ;;會告訴你，長頁面中的一些問題更合適。

但反過來，她也提到“對于設計師來說，‘屬于一個群體’問題……對于用戶來說，不必放在一個頁面上”。

她提出了一個鼓舞人心的例子。在GOV.UK的驗證頁面上，他們試圖在兩個頁面上添加“創(chuàng)建用戶名”，“現(xiàn)狀”和“創(chuàng)建密碼”。

正如許多設計師所認為的那樣，卡羅琳認為將兩者放在不同的頁面上有點太多了。事實上，用戶根本不介意這一點。

關鍵是從一個頁面開始，然后驗證用戶研究和驗證可以進一步改善用戶體驗。

這并不意味著最終結果必須是合并頁面——根據我的經驗，最好的結果往往是把事情分開，僅此而已。當然，我也想聽聽你的經歷。

總結

這種低調，不引人注目的用戶體驗設計模式具有靈活性，高性能和包容性。這是真正擁抱互聯(lián)網的方式，對于自信和謹慎的用戶來說很容易。

在頁面上顯示許多（或全部）內容可能會產生一種簡單的錯覺，但是像代數問題一樣，除非它們被分解，否則很難處理。

如果您將任務視為用戶想要完成的事務，則必須將其分解為多個小步驟。這就像我們正在用一塊磚和一塊網頁構建一個漸進式表格。每一頁背后的隱喻都為潛意識創(chuàng)造了一種進步的感覺。

我還沒有遇到任何其他設計模式，我有很多優(yōu)點。這是一種真理時刻——答案永遠是最簡單的。

原作者：Adam Silver

原始地址：https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/

« SEOer應合理分析主頁和列頁面權重 | 企業(yè)上的云更方便！ 22官方微開源引擎解決所有困難 »