選取控件的使用時機與限制

Check box, Radio button, Switch button, Drop down menu


最近在看公司內部或是其他網站的UI設計,發現check box, radio button, switch button和drop down menu (combo box)這些控件被誤用。以下簡單分享一下使用時機和usability的議題。

以下簡單區分元件用途:

Checkbox

複選框用在多選狀況,或是只有一個選項,作為功能的啟用,例如以下:

多選:選擇瀏覽器外觀(圖為Chrome Settings)
功能啟用:啟用快速搜尋功能(圖為Chrome Settings)

Radio Button & Drop Down Menu (Combo Box)

單選鈕和下拉選單用在單選上,如下:

單選:選擇初始頁面(圖為Chrome Settings)
註冊時常見的下拉選單:選擇位置(圖為Create your Google Account)

一般而言,因為radio button把可以選擇的選項都灑出來,不像combo box把選單藏著,需要點擊才知道內容,在usability上,radio button是優於combo box。而我自己3個選項以下,一定會優先使用radio button。

但如果選項太多,反而radio button並非首選。有文章指出,建議combo box選單項目應大約7–15。當選單超過15個以上的時候該怎麼辦呢?例如選擇國家和地區。

因為月份僅有12個選項,所以採用下拉選單;而日期可能會有30個,年份更多選項,所以採用文字框(圖為Create your Google Account)

文章內建議可以採用text field讓使用者自行填寫,再搭配auto-fill in,填寫一半,就會出現國家名稱選單,當然也必須將一些國家的簡稱或常用別名(如:America, the United States, the US)也一起放入資料庫。

不過我自己是擔心,有時候某些服務不不支援所以國家或地區,國名或地名不在資料庫中,當填寫完後,可能會無法確切知道是否支援,更慘的是,可能再試其他別名,試幾次之後才發現未有。

其實很多下拉選單支援字首搜尋,當你點擊combox後,按下該國家字首,例如按下T就會會出現以T為首的國家。然而這件事,多數的使用者並不知道。另外如果有連上網路,程式也可以透過上網的IP位置判別出你可能在哪個國家上網,進而給於一個預設值,也是常見的方式。

然而,除了選擇國家這個例子,我們還是會有其他用到下拉選單的時候,除了上述一些方是外,是否還有其他更明顯容易的操作方式,值得我們互動設計師繼續思考。

Switch Button

開關按鈕多用在一個功能的開關,而且不需要再按一個確認套用鍵,例如:Wi-Fi、省電模式的開啟與關關,如下:

Settings in Google Photo

Usability大師Jakob Nielsen在Checkboxes vs. Radio buttons一文指出,radio button用於單選,選項互斥;checkbox用於多選,當只有一個checkbox存在的時候,就可以作為功能的開關。

同時他也提出其他幾個規範:

  1. 使用標準化的樣式:當checkbox選取時,須有清楚的視覺標示,例如勾或叉(編註:在德語系國家習慣用x而非v),而radio button則是由圓框構成,選取時,中間會有圓點。
  2. 清楚表現出個別的群組關係:如果今天選項一堆,而選項有群組的分類時,建議可以使用標題隔開,或是調整間距。
  3. 選項應垂直排列:較容易閱讀,一瞥便知道自己選了什麼。
  4. 使用正面表述的語句:避免用負面表述,或一下正面一下負面的表述,讓使用者還要花心力思考。
  5. 盡量使用radio button取代下拉選單:減少使用性上的問題。
  6. 使用radio button列表時,應有推薦的預設值:這樣使用者除非需要更動,不然就無須再去點選。
  7. 因為radio button選項為互斥,使用者只能單選,所以各選項詞語表述應清楚,避免模糊。
  8. 除了radio button和checkbox的選取框能點擊選取外,連選項文字部分,也應該要可以點選。
  9. 頻繁會被選取的項目,應提供鍵盤快捷,按快捷鍵即可選取。
  10. 使用checkbox或radio button的時候,應視為正在設定,需要按確認才會套用,不會點擊後直接動作。(編註:過去的確是如此沒錯,有些軟體漸漸走向點擊後直接套用,再給予一個Reset鍵恢復原始設定。其實這次兩種不同思考模式,前者為預防性,後者為補救性,根據這個動作是否會造成使用者嚴重傷害或是操作流暢度,而會採取不同策略。當然有時候是因為技術關係,讓使用者選完再一次套用,避免系統一直運算而遲緩故障)

情境一:項目多

設定多的時候,1)元件怕雜亂,其實美感也可以算成usability的一環,2)再加上這些設定,並不是使用者都必須去調整或常調整的,在相較之下,並非很嚴重,3)或是空間略微有限,想在畫面中直接秀完選項,不用去scroll。所以基於以上理由,設計實務上會因狀況彈性調整,並不會死守規範。

性別僅有三個選項:男、女、其他,卻選擇使用下拉選單(圖為Create your Google Account)

情境二:功能啟用

經過上面的說明,你會選擇下面哪一個呢?

Wireframe of 4 types of controls(筆者繪)

答案:如果今天項目只有兩個,最後一個的下拉選單馬上可以刪除。Radio Button又沒有Checkbox和Switch Button來得簡單乾脆。如果馬上就可以套用的話,就選擇Switch Button吧!如果需要按下儲存確認鍵才能啟用,就選擇Checkbox吧(但別忘記加上Enable字串)!

當然你也可以考慮一下,把重複的字變成標題:

(筆者繪)

結論

規範是死的,人是活的,設計時,應該要一直質疑並詢問自己為什麼要這樣設計,能帶來什麼好處或避免什麼問題,在各方面考量下,美感、使用性、使用者過去的習慣等,選出一個最佳的解法。