UI介面設計:單選按鈕vs 複選框,傻傻分不清楚?

UI/UX設計師在表單中會提供Radio buttons 或 Checkbox 來解決單選/複選答案呈現方式,其目的是為了幫助用戶在有限的範圍內提交答案。

這兩種設計元件看似意義明確,很好區分,但實際操作上還是看過不少錯誤例子。

 

這篇文章將釐清…

.Radio button .Checkbox 兩者定義,差別在哪?

.帶入實作觀念,先想過問題,正確使用Radio button / Checkbox 元件

 

 

Checkboxes(複選框)

一系列答案選項中,可複選多個答案

舉例來說,有10個答案,你能勾選1個以上,2個、4個或10個答案,甚至可以不選。
意指選擇每一個答案不會互相影響。

checkbox-ui design

gif credit by:https://dribbble.com/shots/2194771-New-Checkbox-Interaction

 

 

 

Radio buttons (單選按鈕)

從一系列答案選項中,只能選擇1個答案

示範如下,有兩個答案勾選其中一個,就無法選擇另個答案

Radio buttons style

gif credit by:www.justinmind.com

多種設計方式呈現Radio button,像是添加ICON ,幫助用戶填寫資訊時提升辨識度。

Custom Radio Buttons With Icons

Custom Radio Buttons With Icons

 

什麼情況下使用Radio buttons 、Checkbox設計元件?

先來看下方錯誤的設計例子,才知道問題出在哪,提升設計的思考能力。

外送服務網站,用戶可以選擇送餐時段,為了讓用戶提供期望收到餐點的時間。
但是,上方設計使用了Checkbox複選元件,暗示用戶所有時段都能勾選。這已經違背當初目的性;希望用戶選擇一個時段,餐廳可以提早備餐,也讓外送員知道什麼時候要送餐。使用錯誤的設計方式不僅造成用戶困擾,甚至可能影響營運服務的流程。

 

答案數量不多,用Radio buttons(單選),盡量避免Dropdown

答案數量少,盡可能一次列出所有項目,幫助用戶進行比較,找到適合的選項。

答案數量不多,Radio buttons一目瞭然

 

 

 

 

 

 

 

 

 

但是遇到答案數量很多的情況下,不可能用Radio Buttons一次列舉出來,
這裡可以參考 UX Movement 的建議,當有5個以上選項時,應替換成下拉式選單。
舉例像「選擇居住地國家」,通常會列出全世界所有國家,這時候可以用Dropdowns方式來做。

 

Select-contry-dropdown

答案選項多,dropdown ( 下拉式選單)較佳

 

 

簡單的問答題,用Checkbox樣式做設計。

如果只有一個簡單的問題是/否,同意/拒絕,可以做成Checkbox樣式,提供用戶快速確認。

single-simple-question-answer-checkboxstyle

「是」勾選 、「否」不用勾選。

結論

本文僅講解兩者元件基本觀念,無論是網頁設計、APP設計,經常用到Radio button (單選按鈕) Checkbox(複選框),
,在實作方面,建議先思考問題本身,做UI/UX才能有規範地設計介面,
其目的是幫助用戶能預測元件執行的方式,減少用戶操作失誤帶來不好的體驗。