表單結構 (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