網頁表格設計原則 – One Thing Per Page

在進行網上購物時, 要填寫資料最麻煩的地方是要不停拉動頁面, 而新設計按選項分類安排介面頁數, 不但為進行網購的用家帶來方便, 也大大提升了購物網的交易率。

boots1-780w-opt-1.png

原來的設計: 把每個要填寫的資料放在同一頁,以展開收納的動態方式,讓用家查看每一個部分詳細資料

用戶需要更努力完成表格。但是Error很難解決,因為用戶每次進行修改時必要向上向下滾動。展開收納的動態方式使用家容易分心。

boots2-780w-opt.png重新設計後,每一個部份以獨立頁面呈現。

以Just Eat為例, 頁面在2014年重新編排, 轉為按部分安排頁面, 每個部分佔一頁, 避免要用家拉動頁面。更新過後, 網頁的訂單數目一年內上升了二百萬單。而在2016年, Robin Whittleton同樣提出這種頁面安排成功的背後原因。

justeat-780w-opt.png

“One Thing Per Page” 指的不是每一頁都只有一個元素, 而是把複雜的步驟分成不同部分, 再安部分分配頁面。例如, 由原本把購物要填妥的資料由單一頁面, 分類成地址, 送貨和付款三部分, 而三部分分別顯示在三個頁面中。

“One Thing Per Page”的好處

  • 簡化認知的加載 – 資料經分類後每個頁面要填的資料減少, 複雜程度下降
  • 容易處理差錯 – 每頁頁面都會檢查有否出錯, 方便用家及時解決
    errors-780w-opt.png
  • 加快加載速度 – 每頁的內容減少可以加快頁面加載的速度
  • 有助分析市場反應 – 企業可分析用家在填哪類資料時較易放棄交易, 從而可以不斷改善
  • 方便追索進度及返回較前的步驟 – 用家可在每填妥一頁後都預先儲存, 避免每次都需重新填寫資料
  • 避免或減少拉動頁面為用家帶來的麻煩
  • 方便按照用家的選項設定之後要填妥的資料 – 同時方便企業只顯示與用家相關的選項
  • 方便使用螢幕閱讀器的用家
  • 方便更改資料 – 用家可直接點回需要更改資料的頁面直接修改
    kidly-780w-opt.png
  • 為用家節省數據用量 – 用家可選只下載完整或相關的部分
  • 更易處理系統顯示問題 – 每頁的內容較簡單, 系統出現的顯示問題也相對減少並更易處理
  • 鼓勵用家填妥資料 – 分部完成填寫資料令用家產生成功感
  • 減低失去資料的機會 – 要一次填好資料費時而且易因超過時間限制而失去所有已填好的資料, 分開頁面就可避免這個問題
  • 儲存用家的資料, 節省他們再次使用時要填的資料
  • 方便使用智能電話的用家
  • 系統設計省時 – 分類設計每頁的工驟比設計一體的表格容易

“One Thing Per Page”是否適用於任何情況?

不一定, 部分研究使用一體頁面比分頁有更好的效果。然而,把需填妥的資料先分類並不會為用家帶來負面的影響。

總結

當我們要處理反煩複的工作時,先把工作分成不同的部分能令工作更易完成,同時,提供漸進所帶來的優越感。

errors-780w-opt.png