什麼時候用 Toggle Switch 或是Checkbox？-設計正確的使用時機

在設計表單的時候有幾種不同的元件，可以用來加快填寫表單的速度。而在這些元件中比較常見的 Checkbox 與 Toggle Switch 常常會讓我覺得有點像又有點不像，在製作表單的時候會有點不太確定在什麼情境下分別使用這兩種元件。在搜集資料後發現，真的有人將這兩個元件做了一些詳細的說明，所以決定整理一下蒐集到的相關資料，作為我在設計上的學習筆記。

Toggle Switch

Toggle Switch 代表一個物理開關，允許用戶打開或關閉事物，如電燈開關。以下說明 Toggle Switch 的使用情境，都可以帶入情境為，開 或 關的動作會比較好懂

Austin Chan on Unsplash

1.即時的反應

在以下情況下使用我們可以使用Toggle Switch

• 可以立即給予操作反應的設定。
• 需要透過 開/關 或 顯示/隱藏功能 來顯示結果。
• 使用者操作時，不需要再次審查或確認的動作。

在這邊如果帶入飛航模式開啟;Wi-Fi跟藍牙關閉就會很直覺選擇Toggle Switch。

2.用戶正在切換獨立的功能或行為

在這邊我們思考的是，使用Toggle Switch的都是具有獨立功能的設定。所以這邊選擇使用Toggle Switch。

3.只需要思考開或是關的情境時

使用Toggle Switch可以最好了解 開/關 的運用情境。

Checkbox

Checkbox 具有三種狀態：未選（unselected）、已選（selected）及未知（indeterminate）。前兩個很好理解，第三個狀態表示：該選項底下還有子選項，且其中包含未選擇及已選擇。

Thomas Bormans on Unsplash

1.提交後需要確認與審核

使用 Checkbox 時

• 表單在提交前需要使用者確認和審核。
• 在這邊 Checkbox 最常使用的情境會是在畫面中需要進行、確定、下一步、應用等操作的時候。
• 使用者必須執行額外的步驟才能使功能執行。

當畫面中需要進行確定與下一步的應用時通常使用Checkbox。

2.複選情境

• 有多個選項可用，用戶必須從中選擇一個或多個選項。
• 如果像是右邊一個一個點擊開關，每次點擊後可能都會需要等待系統回應才能知道結果。

如果在列表中有多個選項，通常會使用 Checkbox 作為表單填寫的元件，在快速作答後一次在儲存按鈕將資料送到資料庫。

3.中間選擇狀態

當多個子選項分組在一個父選項下時，需要中間選擇狀態。中間狀態將代表選項中同時具有『已選擇』及『尚未選擇』的狀態。

4.清晰的視覺狀態

使用 Checkbox 時

• 有時很難理解這邊的是顯示狀態還是動作。這邊可以想像如果有勾選時代表『要』自動填寫表單;如果使用『打開』自動填寫表單會有點字面意義上面的混淆，因為字句中有自動填寫可能會跟開關互相抵觸。
• 需要提供明確的選擇或未選擇狀態。

有時使用Toggle Switch並不能清楚地表明它是狀態還是動作。

5.相關項目

在同樣類型的選項中，有多個選擇通常會使用Checkbox。

要選擇列表中的相關項目，請使用Checkbox。

6.單一選項

使用 Checkbox 時，可以帶入當下的情境是 『是』 或是『 否』;如果這邊使用『開』或是『關』就會有點不太合適。

• 選項為只有『是』或是『否』的情境時。

是/否 選項更適用於Checkbox。

參考資料來源

https://uxdworld.com/2018/08/13/checkbox-vs-toggle-switch-7-use-cases-of-forms-design/

https://designtongue.me/checkbox-_vs_toggle_switch/

重點總結

其實上述說的都是在設計時可以參考的使用方式，但我覺得產品設計其實是很靈活的，我們可能會根據實際狀況的不同而轉換設計的方式，這部分就需要大量的累積實戰的經歷 🥸