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

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

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

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

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

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

狀況 1:馬上反應

當以下情況時,我們應該使用「開關元件」:
不需要還要進行某些動作,即可反應出選擇後的結果時
馬上顯示某功能的「開啟 / 關閉」或「出現 / 隱藏」的結果或狀態時
使用者執行一些不需要確認或審核的動作時

狀況 2:確認設定的選項

當以下情況時,我們應該使用「checkbox」:
在送出調整或改變的需求前,使用者需要「再次確認」或「預覽結果」時
在顯示結果前,送出需求的按鈕通常是「提交」、「好」 或「下一步」時
使用者必須執行額外的動作來執行這些選項時

狀況 3:複選

當以下情況時,我們應該使用「checkbox」:
具有複數選項且使用者必須從中選擇一個或以上時
需要一一點選多個開關元件,且無法及時看到結果(還需等待一段時間,如系統處理中)。

複數選項時最好使用 checkboxes。

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

當以下情況時,我們應該使用「checkbox」:
當某選項底下還有子選項需要確認時

狀況 5:顯示明確的狀態

當以下情況時,我們應該使用 「checkbox」:
開關元件的 「狀態」 容易被使用者混淆時,例如很難瞭解選項上的開關按鈕表明的是「狀態」或「動作」
需要提供明確的已擇或未選狀態時

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

狀況 6:選項的關聯性

當以下情況時,我們應該使用「checkbox」:
使用者必須從「具關聯性的選項」中選擇時

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

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

選項間皆是「不同或獨立」的功能或行為時

獨立的選項可用開關元件

狀況 7:單一選項

當以下情況時,我們應該使用「checkbox」:
選項僅是「是或否」的決定時
只有一個選項可「選擇或不選擇」,而且它所表示的意思明確時

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

僅在「開或關」的選項上做選擇時

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

結論

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

參考文獻:
Control and Patterns
When to Use a Switch or Checkbox
Selection Controls
UX Design: Checkbox and Toggle in Forms

文章出處/ 設計大舌頭

誠摯邀請你成為好朋友-->
        

About The Author

設計大舌頭

設計大舌頭是一個長期關注各項 UX 相關議題的平台,包含 UI 設計、互動設計、app UI、設計趨勢、智慧財產以及服務設計等。我們試圖讓更多讀者了解設計師們的巧思,並推廣 Design Thinking 的思維,歡迎大家加入這個討論園地。

Related Posts

留下你的看法: