[譯文]單選按鈕最佳實踐

單選按鈕是表單中的必備元素。當一個列表里包含兩個以上互斥元素而用戶必須從中擇一時,會使用單選按鈕。簡言之,點擊未選中的按鈕,就會讓之前選中的按鈕變為未選中狀態。

常見的單選按鈕

善用單選按鈕能幫助減少用戶錯誤輸入,因為單選按鈕只展示有效選項,并且能夠用鍵盤輔助填寫,還能跨平臺渲染。本文中,我們將討論通過可用性測試的單選按鈕的使用方法。


只有一個按鈕可以被按下

單選按鈕是如何得名的?

單選按鈕因老式汽車上的收音機物理按鈕而得名的。當其中一個按鈕被按下,另外的按鈕就會彈起,只有被按下的按鈕處于『按下』狀態。軟件的單選按鈕仿照這種物理按鈕產生的。

單選按鈕最佳實踐——僅在設置時使用

使用單選按鈕來改變設置,而不要使用它來傳達命令。同樣的,被改變的設置不應在用戶點擊確定或者執行命令之前的生效。如果用戶點擊了返回或者取消按鈕,單選按鈕中做出的更改應該被放棄而回到原始狀態。
如果單選按鈕是用來觸發命令的,那么最好將要改變的元素放在單選按鈕中。這樣做可以方便用戶一步交互操作就執行正確的命令。

用戶只需一步就能完成操作

選項按照邏輯順序排列

你應該將所有選項按照一定邏輯排列,比如最容易被選擇的到最不容易被選擇的,最簡單的選項到最復雜的選項,或者最小風險到最大風險。不推薦按照字母表順序因為這種順序和語言本身相關因而各地難以統一。

選項應該易于閱讀并且能被清晰分辨

單選按鈕最大的可用性問題在于描述選項的標簽文案是模糊的,或者讓大部分人難以理解。雖然聯系上下文可以稍稍緩解后一個問題,但是最好還是請用戶來測試交互控件。

總是提供一個默認選項

十大UI啟發式設計方法之一就是允許用戶撤消操作。就是說允許用戶將UI控件設置為其原始狀態。對于單選按鈕來說,就意味著它始終需要有一個默認選項被選中。應該默認選擇最安全(防止數據或系統權限丟失)、最保險和最私密的選項。如果安全和隱私不是要考慮的因素,就默認選中最可能被用戶選擇的那一項。

在用戶不必非要決策的情況下,你應該提供一個標簽為”None”的選項。提供給用戶一個明確的、中立的選項比強迫用戶做出一個不準確的決定要好得多。


需要默認選項

你的選項縱向排版

橫向排版的單選表單難以瀏覽。橫向排版還會讓按鈕和標簽的關聯性產生問題——按鈕是和它之前的標簽關聯還是和它之后的標簽關聯?縱向排版的選項列表比較安全。

讓單選按鈕的標簽部分也變得可點擊

單選按鈕很小,因此根據費茨定律,它們很難點擊。為了增大點擊區域,應該讓用戶不僅僅點擊或者輕觸按鈕有效,點擊其標簽也應該有效。讓用戶點擊按鈕或者關聯標簽都能觸發控件。

左:只有按鈕部分可點;右:更大的點擊區域

一款名為Danlingo的應用的橫向單選按鈕設計得不錯:它采用了橫向排列的單選按鈕,但是將點擊態明顯區分出來,并且點擊熱區足夠大滿足觸屏設備的點擊需求。

好的案例:橫排版的單選按鈕

盡可能使用單選按鈕而非下拉菜單

如果可能,使用單選按鈕而非下拉菜單。單選按鈕有更低的認知負載因為它讓所有可能的選項變得可見,讓用戶更方便對比每個選項。
如果你的選項不多于7項,可以考慮采用單選按鈕。用戶能迅速掃視到底有多少個選項,每個選項是什么,而不需要點擊才能查看詳細信息。

避免嵌套

避免單選和其他單選按鈕或者多選按鈕嵌套。應該讓各個選項在同一層級來避免混淆。

嵌套增加額外復雜度

使用動畫或者視覺反饋

設計良好的動畫給人一種精巧的體驗。像單選按鈕這種界面元素應該看起來可觸碰,即便單選按鈕被放在一層玻璃后。視覺動效引導讓人感知其是可輸入的,并且在輸入后呈現清晰的視覺反饋。


單選按鈕動效
單選按鈕動效

復選框會是更好的選擇嗎?

如果只有一個選項,你可能會選擇復選框。但是復選框僅僅是用來開啟或者關閉某個單一選項,而單選按鈕可以在不同的選項之間切換。

你應該記住單選按鈕的使用情況:
可選。如果復選框無法完全表意時,采用單選按鈕。如下面的例子,選項是互斥的,因此選用單選按鈕比較好。

選擇橫屏還是豎屏

安裝向導。在安裝向導上使用單選按鈕讓互斥的選擇變得清晰。單選按鈕的默認狀態對用戶來說是一個重要建議。默認選項可以幫助用戶做出最適合的決定,還可能幫助他們更有信心地使用。

默認選項代表著重要建議,可以進一步在其后加上『推薦』

簡單的對或錯。如果用戶對或錯來回答這個問題,那么可以采用復選框。

簡單的對錯問題可以采用復選框控件

結論

當設計單選按鈕時,最終要的是要遵循設計標準,保證用戶能預期這個控件的作用以及如何使用它。相反得,違背標準讓用戶界面脆弱,好像任何無預期的改變都會在界面上發生。
細致地設計。單選按鈕可以用紙上原型法來測試,因此你不用為了測驗單選控件的可用性進行任何開發實現。

原文鏈接

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 1、窗體 1、常用屬性 (1)Name屬性:用來獲取或設置窗體的名稱,在應用程序中可通過Name屬性來引用窗體。 ...
    Moment__格調閱讀 4,593評論 0 11
  • HTML標簽解釋大全 一、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,320評論 1 41
  • 單選按鈕作為表單系統的一個基本元素,它們被使用在當存在互斥的兩個或多個選項而用戶必須選擇其中之一的時候。換句話說,...
    三達不留點gpj閱讀 2,647評論 5 7
  • 用戶利用選擇框,可以進行“選擇/不選擇”這兩種意義截然相反的操作。復選框的標簽為選中狀態下的意義,未選中狀態下的意...
    烈焰蝦米閱讀 1,584評論 0 3
  • 秋天敲打著玻璃 斑駁模糊 坐上一片黃色的枯萎 悠然地飄落 路過的詩人撿起 夾進棕色的懷舊 赤腳印在泥濘的小路 指頭...
    康本叢Ben閱讀 242評論 0 0