Checkbox 與 開關元件(Toggle Switch)的正確使用情境

UI 上的表單往往帶有一些控制元件(如:checkbox)來協助使用者更容易的輸入,相對的,如何在對的時機使用對的控制元件就是設計表單的挑戰之一。

Checkbox 有三種狀態:未選(unselected)、已選(selected)及indeterminate。前兩個很好理解,第三個狀態表示:該選項底下還有子選項,且其中包含未擇及已選。

開關元件(toggle switch)模擬實體開關的操作方式,讓使用者可以快速將某功能開啟或關閉,例如現實生活中的電燈開關。

點擊開關元件同時帶有兩個動作:選擇並執行 ; 而 checkbox僅表示選擇了一個項目,若要執行會需要另一個控制元件觸發。

那該怎麼選擇這兩個控制元件呢?其實我們應該更關注“使用情境”來判斷,而不是依造它們的功能。

以下有幾個情境可以協助設計師們來判斷,藉此帶來更好的設計與體驗。

狀況 1:馬上反應

當以下情況時,我們應該使用 “開關元件”:

  • 不需要還要進行某些動作,即可反應出選擇後的結果時
  • 馬上顯示某功能的“開啟 / 關閉”或“出現 / 隱藏”的結果或狀態時
  • 使用者執行一些不需要確認或審核的動作時

checkbox

 

狀況 2:確認設定的選項

當以下情況時,我們應該使用 “checkbox”:

  • 在送出調整或改變的需求前,使用者需要 “再次確認” 或 “預覽結果” 時
  • 在顯示結果前,送出需求的按鈕通常是 “提交”、“好” 或 “下一步” 時
  • 使用者必須執行額外的動作來執行這些選項時

 

狀況 3:複選

當以下情況時,我們應該使用 “checkbox”:

  • 具有複數選項且使用者必須從中選擇一個或以上時
  • 需要一一點選多個開關元件,且無法及時看到結果(還需等待一段時間,如系統處理中)。

複數選項時最好使用 checkboxes.

 

狀況 4:不確定選項的狀態

當以下情況時,我們應該使用 “checkbox”:

  • 當某選項底下還有子選項需要確認時

 

狀況 5:顯示明確的狀態

當以下情況時,我們應該使用 “checkbox”:

  • 開關元件的 “狀態” 容易被使用者混淆時,例如很難瞭解選項上的開關按鈕表明的是 “狀態” 或 “動作”
  • 需要提供明確的已擇或未選狀態時

有時候開關元件不易直接的表示狀態或動作

 

狀況 6:選項的關聯性

當以下情況時,我們應該使用 “checkbox”:

  • 使用者必須從“具關聯性的選項”中選擇時

選項清單中的選項都具有關聯性,請用 checkboxes。

 

當以下情況時,我們應該使用 “開關元件”:

  • 選項間皆是“不同或獨立”的功能或行為時

獨立的選項可用開關元件

 

狀況 7:單一選項

當以下情況時,我們應該使用 “checkbox”:

  • 選項僅是“是或否”的決定時
  • 只有一個選項可“選擇或不選擇”,而且它所表示的意思明確時

 

當以下情況時,我們應該使用開關元件:

  • 僅在“開或關”的選項上做選擇時

僅有開或關之間的選擇時,開關元件是最好的選擇

 

結論

提供正確合理的控制元件在對的地方相當的重要,希望本文提供的案例及準則能協助判斷何時該使用checkbox或開關元件,來提升更好的表單體驗。

參考文獻:

相關文章:

  1. 如何設計 “可拖曳元件“(Drag and Drop)?
  2. 利用心理學與科學,完美克服介面上“內容加載”的等待感
  3. UI 對話框 的設計大有學問,看設計師如何思考
  4. UI 設計小技巧 – 電話號碼欄位
  5. 為什麼介面設計中,使用者的 個人頭像 大多是圓形的?

 

本篇經作者 Saadia Minhas 授權,翻譯於 Checkbox vs Toggle Switch:7 Use-Cases of Forms Design

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

分享此文: