SPARKFUL

Blog

Insights from the SPARKFUL teams

幫使用者安排好下一步

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
Entrepreneur in entertainment and play for wellness / Author of Playable Design / Active indie game developer 🎉
divider
Related Posts
name

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

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

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

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

The Visual Perception Principles of Gestalt Psychology

Special tendency occurs when our eyes and brain observe objects and perceive visual stimuli. The tendency usually helps us to identify objects faster, but sometimes it also causes the “illusion”. The main concept of Gestalt Psychology is “the whole is other than the sum of the parts”. For ex...Read more