GDS Digital Service Manual 中文翻譯網站 (beta)
by HPX-GOV 英國政府數位服務研究小組 GDS Study Group

表單結構 (Form structure)

選擇最適合人們使用的表單結構。

本頁內容:

  1. 提出問題
  2. 建立表單結構
  3. 頁面結構範例

1.提出問題

你可以用一個問題或敘述的格式。例如“你的生日是什麼時候?”或“生日”。要記得在網站所有頁面的格式是一致的。

指導說明:

  • 使用問題或陳述,但需保持一致
  • 儘可能減少提問的問題
  • 保持問題簡短和清楚明瞭
  • 如問題不是很淺顯易懂,請解釋為什麼你問這個問題

2.建立表單結構

問問你自己:

  • 有多少個問題?
  • 使用者需要依序回答嗎?
  • 他們需要在同一個頁面完成 交易手續 (transaction) 嗎?
  • 他們的答案會影響其他頁面的交易動作嗎?
  • 是否有些回答會導致使用者不得不放棄此次交易動作?
  • 他們得從項目清單中增刪項目,或更改順序嗎?
  • 有多少人要一起處理這個交易手續流程呢?
  • 這個交易手續有某個步驟得在實體環境中完成嗎 (無法全部線上完成)?
  • 什麼時候這個交易流程才算真的完成?

3. 結構範例

想清楚上述幾點之後,有助於你決定表單結構。

下面是一些常見的方法:

1. 單頁表單:全部問題放在同一頁

所有的問題都放在一個頁面上。

該圖顯示在頁面上的所有項目

優點:

  • 只有一個送出按鈕
  • 一個 URL 包含所有表單欄位
  • 不用固定的順序
  • 同一頁面的情境容易了解
  • 頁面進度是明顯的 (只有一頁)

缺點:

  • 冗長的表單會嚇跑使用者
  • 不適合於有分支或非循序型的表單
  • 如何怎麼儲存部分的進度?
  • 可能不易分析,例如放棄率 (drop-off rates)
  • 可能造成表單欄位資料驗證的提示訊息,難以判讀使用

2.多頁表單:一頁只放一個問題 (或者稱為 wizard, 常譯為表單精靈/步驟精靈)

每個問題都有自己的頁面。

圖中顯示了各部分在它自己的頁面

優點:

  • 比較容易處理分支和問題之間的相依性
  • 較容易讓使用者儲存進度
  • 交易手續 (transaction) 比較容易管理
  • 較易引導不熟悉服務流程的使用者
  • 較容易追蹤分析使用情況,例如放棄率 (drop-off rates)

缺點:

  • 難以顯示進度
  • 使用者必須經過較多的頁面
  • 容易失去的前後問題的關聯情境
  • 需要設計一個頁面,專門來預覽填答結果,或者編輯修改各頁的填答資料
  • 不易處理需要增刪項目的清單形式問題

3.手風琴式表單 (Accordion form):問題都在同一頁,每次只打開一個問題

所有問題都在同一個頁面上,分為不同區塊,但同一時間只顯示一個區塊的問題。

此圖顯示的手風琴形式

優點:

  • 可以處理問題區塊之間的分支和相依性
  • 使用者可隨時查看和編輯之前的問題
  • 較易引導不熟悉服務流程的使用者
  • 同一頁面的情境容易了解
  • 填寫進度明顯 (只有一頁)

缺點:

  • 使用者介面和實作較複雜

做得好,手風琴式表單是上述兩種結構的結合。但仍存在一些重要的設計決策。例如:

  • 一次只能顯示一個區塊的問題嗎?
  • 如果問題是相互有關係的,回去編輯先前的問題,會發生下列哪種情況呢?
    • 目前的問題要繼續打開著?還是關閉起來?
    • 如果編輯前一個問題之後,又該如何返回現在的問題?
    • 如果回去編輯之前的答案,是否會失去之前所編輯的其他問題 (如果問題是相依的)

4. 混合式表單 (Hybrid)

對於更複雜的交易,其他選項的某些組合可能是你最好的選擇。

圖中顯示了混合交易

做好混合式表單可以帶來單頁式和引導式表單的優點。混合式表單給你更大的設計空間,能讓你建立整體流程的節奏,如此一來,有助於人們理解他們處於交易流程的甚麼階段,並且打破填寫時的單調。

這些表單設計決策的背後,你必須找到客觀的支持證據。請牢記:所有的設計都必須「以使用者為中心」。


討論此頁 Hackpad

翻譯:群元
校稿:Richard, Amy Hsu, James Chu
原始出處:https://www.gov.uk/service-manual/user-centred-design/resources/patterns/form-structure

請留言

你的email信箱不會被發布出來. Required fields are marked *

*