移動端表單設計思考——「One thing per page」

移動端的表單頁實在是最常見也最容易出岔子的頁面，最近就因為一個長表單頁的設計，產品經理和交互設計師撕了起來。

https://www.smashingmagazine.com/2017/05/better-form-design-one-thing-per-page/

找到了一些共鳴。

兩方方案大致如下：

方案A

方案B

此表單頁包含多種填寫方式（單選/多選/輸入框）。

A方案將所有填寫項放置在一個頁面上，使用「手風琴」將部分已選項隱藏。

B方案將填寫項分組，分別放置於不同頁面。

哪個更清晰更簡單？

有人說：A方案只有一個頁面，B方案有5個，肯定是A更簡單呀！（笑而不語.jpg）

什麼是「One thing per page」？

「One thing per page」不是指一個頁面只有一個元素或者一個填寫項。而是指將填寫表單這個複雜的任務分成幾步來完成，每個步驟由一個頁面呈現。

各步驟可能是以信息屬性來劃分（例如將填寫地址和選擇支付方式放在不同頁面），也可能兩步驟之間有填寫順序（例如先驗證手機號，後設置密碼）。

「One thing per page」這種設計形式非常適合移動端。移動端因為其屏幕小，頁面空間受限，所以要求表單的設計要最簡最精。

比起PC端大空間可以讓信息更全面的展示，對於移動端來說任務清晰、流程感強更為重要。總有人跟我說某個方案讓用戶多點了一下，頁面多跳轉了一次，體驗很不好。

別逗了好嗎，用戶才不關心是不是多點了一下，他們更關心我點的這一下是不是更接近成功了！

舉個簡單的栗子：

這是一個驗證訂單的頁面，用戶需要填寫3種不同的編碼（暫不管減少填寫項的問題）。

從數量上來看，填寫內容不多，需求方希望一個頁面搞定。但考慮到填寫編碼本身是個極複雜極容易出錯的任務，並且填寫3種編碼還有順序要求，最後還是分成2個頁面完成。見下圖：

這樣做的好處：

1.第一步若服務碼錯誤就不會進入下一步，避免用戶顛倒填寫順序，白填了半天（當然可以添加填寫順序的提示或完成服務碼填寫後當前頁面再出現後面的填寫項。但我更傾向減少當前頁面的提示和跳動，越簡單越好嘛）。

2.第二步填寫的2個編碼無先後順序，且都會用到另一個硬體設備（壞掉的手機），所以把他們分為一組，放在一個頁面上，方便快速填寫。

3.每個頁面填寫的內容極少，從視覺上不會讓用戶感到畏懼。且沒有其他干擾信息，填寫或找錯都更專註更方便。

「One thing per page」什麼樣？

主要有2種形式

1.一個總表單頁，點擊填寫項跳轉至單獨頁面進行填寫，完成後返回到總表單。

多用於需要最後確認所有信息的表單，例如填寫訂單頁。

總表單頁看似複雜，但重要的操作都分散到各自單獨的頁面操作。

2.每頁有一個或一組填寫項，按順序分步驟填寫。

多用於流程性很強的任務，特別是涉及到分步驗證的任務。且不需要進行最後的信息確認，例如註冊、申請售後等。

One thing per page 有什麼優點？

1.降低認知負荷

複雜的表單填寫任務被拆分成了若干小任務，每個頁面承載的內容也就少了，因此

信息少，干擾就少，就能減少用戶思考的時間，讓用戶能專註於當前單個任務上。

一定程度上縮短頁面，減少滾動發生。滾動並不是個大問題，但如果頁面沒有滾動，信息就能更直觀。

給用戶最少且最有用的信息，更多信息可以藏在「詳情」里。放心，如果用戶真的需要某個不常見信息時，他們是不會介意多點一次的。

栗子：

千機網手機維修下單是個很複雜的任務，但是分頁分步驟填寫，配合簡短說明和默認項，讓整個過程變得簡單了。

2.更容易處理錯誤

填寫一個短小的表單時，能更容易發現和處理錯誤。移動端除了採用錯誤項標紅提示，有時也會用toast彈框提示。在各種信息中去找填寫錯誤的項，也是挺抓狂的……

修改細節更容易。如果發生了錯誤，返回到一個專門的頁面去修改比去一個信息超多的頁面更容易，也減少了二次錯誤的發生率。

想像在手機屏幕小+卡頓嚴重+填寫錯誤的情況下，用戶面對滿屏的信息，十分著急想要修正錯誤。結果手一滑，點出了個鍵盤，又一滑，點出了個滾輪……

3.降低了信息丟失的風險

一個頁面填寫很多信息，必定會耗費大量的時間，發生意外的可能性就很大了，斷網沒電點錯取消（當然你可以添加防錯提示和自動保存）。

分頁面進行信息保存，完成一頁保存一頁，再次進入已填步驟還能直接跳過。（雖然這一條不能全部適用）

4.給用戶增加積極的反饋（特別是第二種形式）

每完成一步，用戶都會得到一個更接近於成功的反饋，增加了用戶的信心。填寫表單最希望看到的就是「恭喜，完成了」。

對於有驗證的表單（比如只有圖片驗證通過了才能填寫下一項），分頁面填寫就能避免用戶不按順序填寫可能造成的錯誤，避免挫敗感。

栗子：

網易嚴選註冊第一步需要先輸入手機號，通過圖片驗證，第二步才能發送手機驗證碼。

5.頁面載入更快

頁面承載元素越少，載入速度越快。這也能減少用戶放棄填寫的可能，增加網站信任度。

6.跟蹤行為更容易

後期對頁面進行跟蹤優化，這個頁面為什麼會讓大量用戶離開？頁面內容越少，越容易確定問題根源。

7.解決性能問題

內容少的頁面更少出現性能問題，如果出現了也很容易找到問題所在。

這種設計形式到底多有用？我沒有數據，但有設計師提到，用「One thing per page」調整後的訂單填寫頁，每年增加了200萬的訂單量。好驚人的數字……

當然，即便有了這麼多好處，也不能適用所有情況。也有研究表明，單個頁面例如登錄頁，用戶並沒有因為所有填寫項都在一頁上就降低了填寫效率。

關鍵在於怎麼將填寫項更合理的分組。表單頁的設計本來就是「視情況而定」，如果遇到複雜的表單，我認為「One thing per page」可以一試。

說了這麼多，你認為文章開頭的兩種方案，哪一種更好一些呢？

文章來源：

http://www.ui.cn/detail/244885.html?utm_source=tuicool&utm_medium=referral

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！