網(wǎng)頁表單設(shè)計的優(yōu)點

2008年的時候，我在*Boots.com*工作。他們想做一個單頁的結(jié)賬頁面，運用那個年代最新潮的技術(shù)，包括手風(fēng)琴組件、AJAX和客戶端驗證。

每個步驟(寄送地址、寄送選項、信用卡詳細(xì)信息)都收在一個手風(fēng)琴面板中。而每個面板都通過AJAX提交。提交成功后，這個面板就會收起，并且通過滑動動畫展開下一個面板。

看起來就像這樣：

Boots的單頁結(jié)賬頁面，使用了手風(fēng)琴面板展現(xiàn)每一個步驟。

用戶千辛萬苦才完成了下單過程。錯誤難以更正，因為上下滾動并不方便。手風(fēng)琴面板讓人非常痛苦和分心。不可避免地，客戶要求我們作出改變。

我們進行了改版，讓每個面板單獨成為一個頁面，也就不需要手風(fēng)琴和AJAX了。不過，我們還是保留了客戶端驗證，防止不必要的服務(wù)器請求。

看起來就像這樣：

Boots的結(jié)賬頁面：每一步都是單獨的一個頁面。

這個版本的轉(zhuǎn)化率好多了。雖然我不記得具體數(shù)字了，我知道客戶比較滿意。

6年后(2014年)，我在*Just Eat*工作，發(fā)生了同樣的事情。我們設(shè)計了一個單頁結(jié)賬流程，其中每個部分都有獨立頁面。這一次，我記下了相關(guān)數(shù)據(jù)。

結(jié)果是每年能增加2百萬訂單。要清楚，這是訂單量，不是利潤。這個數(shù)據(jù)是基于新版本至少一周后，結(jié)賬轉(zhuǎn)化率提升的比例得出的。這部分轉(zhuǎn)化成了訂單，數(shù)量激增52倍。

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

Just Eat的結(jié)賬分為多個頁面。我們還在設(shè)計中進一步簡化了支付頁面：用戶先選擇“現(xiàn)金支付”或“銀行卡支付”，然后才會轉(zhuǎn)到相關(guān)的頁面?？上覀儾]有對這項優(yōu)化進行測試。

兩年后(2016年)，GDS的Robin Whittleton告訴我，把每一步分為單獨頁面，是一種獨立的設(shè)計模式，叫做“一頁只做一件事”。除了它產(chǎn)生的數(shù)據(jù)效果，這種模式的背后還有充分的合理性，這部分我們很快就會講到。

不過在這之前，我們來仔細(xì)看看這種模式到底是什么。

“一頁只做一件事”到底是什么意思?

一頁只做一件事，并不是一定要在一個頁面上只展示單一的元素或組件(雖然也可以這么做)。比如說，很可能仍然會保留頁頭和頁尾。

類似的，也不是說每個頁面上只能有一個輸入框(當(dāng)然，這么做也是可以的)。

這種模式是指把復(fù)雜的流程分解成多個小碎片，把每個小碎片獨立一頁展示。

比如說，與其把地址輸入表單放在寄送選項和支付表單頁面，倒不如把地址輸入放在一個專用頁面。

地址輸入表單有許多輸入框，但它對于用戶來說，實際上是個單一的、獨立的問題。在專用頁面里回答這個問題是有道理的。

我們看看這種模式到底好在哪里。

好在哪里?

雖然這種模式常常能結(jié)出碩果(其實就是指訂單和轉(zhuǎn)化率了)，我們最好還是要了解它背后的原理。

1. 減少認(rèn)知負(fù)荷

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

回想一下你第一次看到復(fù)雜代數(shù)式時的情景。這整個就是一團混亂的未知符號。但是當(dāng)你將它分解，獨立成各個部分，答案便水落石出。

一步步分解等式，就能輕松解決問題。

用戶在填寫表單時也是一樣的道理，或者其他任何重要的事情都一樣。如果屏幕上元素減少，只有唯一的選擇，阻礙就降到最低。因此，用戶會專注于完成任務(wù)。

2. 處理錯誤更容易

當(dāng)用戶填寫小型表單時，錯誤可以很容易被發(fā)覺，并盡早呈現(xiàn)出來。如果只有一個錯誤要修正，那就很容易，能降低用戶放棄的可能性。

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

3. 頁面加載更快

如果頁面的設(shè)計很簡單，加載就會更快。更快的加載速度能降低用戶離開的風(fēng)險，為我們的服務(wù)建立起信任。

4. 易于追蹤行為

一頁上內(nèi)容越多，就越難以了解用戶因為什么離開。不要誤會我的意思：頁面數(shù)據(jù)分析不能左右設(shè)計，但這是個很不錯的副產(chǎn)品。

5. 易于追蹤過程和返回上一步

如果用戶需要頻繁提交信息，我們可以把它們以更細(xì)的顆粒來保存。舉個例子，如果用戶中途退出，我們還可以發(fā)送郵件，鼓勵他們完成訂單。

6. 滾動操作減少，甚至被消滅

不要誤會我的意思：滾動不是什么大問題——用戶的期望中，網(wǎng)頁就是這么用的。但如果頁面短小，用戶就沒必要滾動了。主操作項就更容易出現(xiàn)在屏幕視野內(nèi)，能強調(diào)它的重要性，易于任務(wù)完成。

7. 容易產(chǎn)生分支

有時候，我們需要根據(jù)之前的答案，給用戶提供一條不同的路徑。舉個簡單的例子，兩個聯(lián)動的下拉菜單，用戶在第一個菜單里的選擇，會影響第二個菜單中的內(nèi)容。

一頁只做一件事可以輕松處理這種情況：用戶做出選擇并提交，服務(wù)器來決定用戶接下來看到什么——具有簡單和包容的特點。

我們也可以用JavaScript。不過無論是構(gòu)建還是確保界面的可用性，都需要更高的成本。如果JavaScript出錯，用戶的體驗也就被破壞了。而且，根據(jù)所有這些排列組合選項來加載頁面，會明顯加重頁面負(fù)擔(dān)。

或者，我們可以使用AJAX，但這并沒有避免渲染新頁面(或者部分)。更關(guān)鍵的是，它并沒有減輕服務(wù)端的數(shù)據(jù)往返壓力。

還不止這些。我們需要發(fā)送更多代碼量，并且發(fā)起AJAX請求，還要處理錯誤、顯示加載指示器。這又讓頁面加載變慢了。

自定義加載指示器是有問題的，因為它們并不準(zhǔn)確，不像瀏覽器的原生加載進度。用戶也不熟悉它們——相對于整個網(wǎng)站來說，它們是特殊的存在。無論如何，相似性是用戶體驗的慣例，除非真有必要，否則不要打破它。

而且，頁面上有兩個動態(tài)更新的聯(lián)動輸入項，這會需要用戶按照一定順序來操作。我們也可以通過可用/禁用和顯示/隱藏來控制這些輸入項，但這樣也更加復(fù)雜。

最后，用戶的某些更改，可能會導(dǎo)致隨后的元素消失或者變化，這也讓人迷惑。

8. 對使用屏幕閱讀器的用戶更友好

如果頁面上內(nèi)容減少，屏幕閱讀器就不必長途跋涉穿過許多多余的次要信息。用戶可以直接前往第一個標(biāo)題，然后迅速開始操作表單。

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

想象一下某人正要確認(rèn)訂單。關(guān)鍵時刻，他發(fā)現(xiàn)支付信息里有一處錯誤。此時回到專用頁面比找到頁面“當(dāng)中”的某個部分更容易。

用戶點擊“編輯”，會前往支付信息頁面，里面有專用的標(biāo)題和相關(guān)的表單項目。

深陷一個長頁面中是會令人迷失方向。記住，用戶點擊鏈接代表他們要執(zhí)行特定的操作——頁面上的其他東西都是干擾信息。

長頁面還可能會加重工作量。比如說，如果想要在一個頁面中展開和收起面板，你就需要更多額外的邏輯思考。

一頁只做一件事，這些問題都得到了解決。

10. 用戶對數(shù)據(jù)更有掌控力

用戶不會只加載一半的頁面。要么全部，要么沒有。如果他們需要更多信息，就會點擊鏈接，他們有選擇能力。只要每一步都更接近目標(biāo)，用戶并不介意點擊。

11. 解決了性能問題

如果每件事都復(fù)雜無比，單頁應(yīng)用就是一個極端例子，性能問題就很難解決。是因為執(zhí)行時間問題?內(nèi)存泄漏?還是AJAX請求導(dǎo)致的?

人們很容易認(rèn)為AJAX能提升用戶體驗，但增加代碼量很少情況能創(chuàng)造更快的體驗。

復(fù)雜性轉(zhuǎn)移到客戶端，會掩蓋服務(wù)端的根本問題。但如果頁面只做一件事情，性能問題就不容易產(chǎn)生。如果真發(fā)生了問題，排查原因也很容易。

12. 它有一種在前進的感覺

因為用戶在不停地前往下一步，會產(chǎn)生一種正在前進的感覺，在用戶填寫表單時給他們一種積極的感受。

13. 降低丟失信息的風(fēng)險

長表單需要更長時間來完成。如果所花時間太長，頁面超時可能導(dǎo)致信息丟失，產(chǎn)生嚴(yán)重的挫敗感。

又或者，電腦可能卡死，《我是布萊克》里的主角Daniel就是這樣的例子。他的健康每況愈下，而且第一次用電腦就遇到了死機，然后數(shù)據(jù)丟失。最終他放棄了。

14. 第二次使用的體驗更順暢

比如，假設(shè)我們儲存了用戶的支付信息，我們可以直接跳過那一頁，直接帶他們?nèi)ァ敖Y(jié)賬確認(rèn)”頁面。這會減少阻礙，提升轉(zhuǎn)化率。

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

移動優(yōu)先的設(shè)計，提倡在小屏幕上只呈現(xiàn)最重要的信息。一頁只做一件事，也遵循著相同的方式。

16. 設(shè)計過程很簡單

當(dāng)我們設(shè)計一套復(fù)雜流程時，分解成細(xì)小頁面和組件，可以讓人更容易理解這些問題。

還可以方便的調(diào)換頁面來改變順序。我們一次只研究一件事，這點和用戶一樣，能讓我們更輕松的分析問題。

這可以減輕設(shè)計負(fù)擔(dān)——這種模式讓用戶受益的同時，還能有這樣的附加福利。

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

也不完全是。Caroline Jarrett在2015年寫過一篇文章《一頁只做一件事》，里面講得很清楚。她解釋道，用戶調(diào)研“會告訴你某些問題組合起來放在長頁面里更合適”。

但是反過來，她也提到了“對于設(shè)計師來說‘屬于一組’的問題……對于用戶而言，并不一定要放在一個頁面上”。

她提出了一個頗具啟發(fā)性的例子，GOV.UK的驗證頁面中，他們嘗試把“創(chuàng)建用戶名”和“創(chuàng)建密碼”先后放在兩個頁面上。

就像許多設(shè)計師所認(rèn)為的，Caroline覺得把這兩者放在不同頁面有點太過了。實際上，用戶對此一點也不介意。

關(guān)鍵在于，以一頁只做一件事為出發(fā)點，然后通過用戶研究，驗證把其中一些項目編組合并，是否能進一步改善用戶體驗。

這并不代表最終結(jié)果一定是把頁面合并——在我經(jīng)驗中，最好的結(jié)果往往是把事情拆分開來，僅此而已。當(dāng)然，我也希望聽聽你的經(jīng)驗。

總結(jié)

這種低調(diào)不起眼的用戶體驗設(shè)計模式很靈活、高性能、有包容性。這是真正擁抱互聯(lián)網(wǎng)的方式，對于自信滿滿和小心翼翼的用戶而言都很簡單。

一個頁面上展現(xiàn)很多(或者全部)內(nèi)容可能會營造一種簡單的幻象，但就像代數(shù)式問題一樣，除非把它們分解，否則很難處理。

如果把任務(wù)看做是用戶想要完成的一筆交易，把它分解為多個小步驟很有必要。這就像我們在用網(wǎng)頁的一磚一瓦來搭建漸進式表單。每一頁背后的隱喻，都給潛意識營造一種正在前進的感覺。

我還沒有遇到過哪種其他的設(shè)計模式，能具備這么多的優(yōu)點。這就是那種真理時刻——答案總是最簡單的。

文章名稱：網(wǎng)頁表單設(shè)計的優(yōu)點
URL地址：http://www.bm7419.com/news38/159938.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供域名注冊、自適應(yīng)網(wǎng)站、網(wǎng)站排名、軟件開發(fā)、網(wǎng)站建設(shè)、網(wǎng)站策劃

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)