SPARKFUL
真抱歉,这个页面尚未被翻译成你的语言,但是我们正在努力中了!

Blog

SPARKFUL 团队心得与生活点滴

幫使用者安排好下一步

Wei-Fan Chenuser-interface-design
name

設計使用者介面時常常會碰到需要讓使用者來決定下一步的時候,在電腦系統中最常見的就是「確認」以及「取消」按鈕;像是在作業系統中要刪除檔案時,系統會跳出以下的詢問視窗,並且已經預設將選項標記在主要的選項上:

當版面上有複數按鈕時,我們通常將其區分為「主要選項」及「次要選項」等,主要選項按鈕代表你希望使用者使用的功能、進行的步驟等。

以雙按鈕的設計為例,我們簡單舉例幾種不同設計方式的情況:

我們注意到當兩個按鈕的設計相同時,使用者必須花費時間確實地閱讀按鈕上的文字並判斷其功能,然後才能做出「要按下哪一個按鈕」的決定,如下圖:

但是當我們依據主要選項以及次要選項的規則,將次要選項的按鈕改變顏色、造型後,我們發現效率提高了,由於預先幫使用者做了選擇,並且使用不同色彩來區別特性,所以閱讀性以及使用性上都得到了提高:

因為在沒有選擇的情況下,使用者容易更快速地做出決定 或者不應該說是決定,因為本來就不需要讓使用者做判斷。沒有多餘的按鈕吸引注意力、也沒有多餘的按鈕可以點,使用者不假思索地就完成了操作;例如「下一步」按鈕獨自出現的狀況,使用者往往點得很愉悅:

以下我們整理幾種比較好的設計方式:

1. 只給使用者一個按鈕:

下圖為 Google 新使用者註冊的表單,把使用者註冊分開成幾個步驟來達成,讓使用者只要依詢步驟就可以完成註冊的動作。

以下是 Google 以及 Hotmail 的帳號登入頁面,為了提高介面的使用效率,兩者不約而同的在介面上都精簡到只留下了一個「登入」按鈕,而其他選項則以文字式的超連結顯示:

2. 將重要的、預設的功能以特殊色顯示

在 Wordpress 發布文章的控制面板中,使用者可以選擇儲存草稿、預覽、發佈以及刪除的功能,而在面板中將「發佈」的按鈕以顯眼的色彩顯示,暗示使用者這是預設動作。對於熟悉介面後的使用者,也可以因此快速找到需要的功能、減少花費在閱讀按鈕資訊的時間。

3. 調整按鈕的大小尺寸、以及位置

瀏覽器中預設使用者最常用的按鈕功能為「上一頁」,因此將「上一頁」的按鈕做得比較大:

而使用者瀏覽網頁的視線習慣是由左至右瀏覽,在輸入文字時也是,因此將主要選項擺放在左邊,最容易讓使用者先注意到該選項的存在。

在 Blogger 控制面板中,除了將「發佈」功能以特殊色顯示外,按鈕擺放的位置也經過細心的安排:

綜合以上結論,當我們在安排介面時:

  1. 最好只給使用者一個按鈕,額外功能以不同樣式顯示。
  2. 當必須使用複數按鈕時,則最好預先幫使用者做好選擇。
  3. 將利用擺放位置以及色彩、樣式等來幫助使用者更快地做出判斷。

資料來源:

  1. Primary & Secondary Actions in Web Forms
  2. Don't make me think
  3. 圖片來源:Kennymatic, CC Licensed
Wei-Fan Chen
Wei-Fan Chen
CEO / SPARKFUL and Fourdesire
喜歡開發與創作各種有意義且有目的的遊戲以改變社會。 《玩心設計》作者、偶爾寫部落客與擔任講師。樂於參與大學和行業活動,興趣涵蓋遊戲設計、遊戲理論、行為設計、人機介面和交互設計。熱衷於雲端運算,同時也是一個活躍的獨立遊戲開發者 🎉
divider
相关文章
name

電影色彩學:這些經典電影如何運用「色彩」引導觀眾情緒

電影裡的弦外之音無論是電影、圖畫或任何形式的創作中,「色彩」都是非常基本且重要的元素。好的色彩運用可以讓人一眼看出創作者想表達的情緒。因此,如何恰當的運用色彩是一項相當重要的課題。平常在看電影的時候,除了關心劇情,也可以...阅读更多
name

藏於字句間的創作:產品中的在地化翻譯

產品辛苦開發了,但要吸引其他語言使用者的使用,並不是那麼簡單的一件事。即使產品已經在某個國家(例如台灣)有了足夠的使用者數量,也不是翻譯成日文,就會憑空冒出許多日本的使用者。網路是連結的,但社群不是許多人...阅读更多
name

完形心理學的視覺法則

我們的眼睛和大腦在觀察事物、接收影像刺激的時候,會有一些特別的傾向。這些傾向常常可以幫助我們快速的辨別事物,有時候也會產生所謂的「錯覺」。完形心理學重要的概念便是「整體不等於個體的總合」,舉例來說:當我們在觀察另一個人...阅读更多