(圖片來源: Google)

《TO 導讀》:本文作者Teo Yu Siang為新加坡圖像設計師,在文內他分享自己使用 Google 使用者介面語言 Material Design 的經驗。這個介面語言主要是希望增進使用者跨平台、跨裝置的使用體驗,但因為一個螢幕上「礙眼」的熱鍵按鈕,就讓使用者體驗徹底崩壞。本來為了方便常用功能開啟的熱鍵,反而成為敗筆,這種基本的使用者體驗設計,就連 Google 大神也會犯錯。

Material Design,是去年 Google 推出的使用者介面設計語言,Google 期望透過這款設計語言來創造跨平台、跨裝置,統一的優質使用者經驗。它大膽的用色、極高的設計自由度,遵循一定準則的使用者介面分層,以及流暢的動畫,都在 Android 平台 (以及少數在 iOS 平台上的 Google apps) 帶給人們美好的應用程式使用體驗。

但關於 Material Design,有一件事一直困擾我很久,那就是它的動作按鈕。這個圓形的按鈕會浮在 app 的介面右下角,功能相當於一個「熱鍵」,你按它,它就會幫你自動完成它認為使用者最常進行的動作。同時他的顏色實在滿搶眼的,讓我們很難去忽略這個圓形按鈕。

所以問題就來了。

(圖片來源: Google)

  • 它讓人們不再能沉浸於使用者經驗之中

動作按鈕非常的顯眼,它真的就蓋在使用者介面上,所以令人很難沉浸於使用者經驗之中,尤其是對於一些企圖讓人沉浸於其中的 App,這個按鈕更是不可取。

Google 新推出的照片 app 就是一個很好的例子。

這款 App 把你的照片們良好地排列、展示,讓你能好好地欣賞這些照片,同時還附贈一個搜尋按鈕,讓你可以快速地「進行一個搜尋的動作」。但問題是,我打開這個 App……就只是想要看照片。

那個搜尋按鈕根本就只會轉移我的注意力,讓我無法沉浸在漂亮的照片們當中,完全破壞了這個 App 的主要功能。

確實,智慧搜尋是 Google 的照片 App 一個獨特的功能,但這就表示一定要在介面上放個搜尋按鈕,讓大家能更快速使用它嗎?

諷刺的是,Google 自己也承認並不是每個介面都需要這個按鈕,它說道:「大家在這個 App 上最常做的動作就是去按螢幕上的照片,所以並不需要一個動作按鈕。」真是糗大了。

  • 它太顯眼,而且還擋住你的視線

這個動作按鈕佔據了介面空間,所以它成功地擋住你的視線

但你可能會想:「小小的圓圈,是能擋住多少東西?」如果你看看剛剛那個照片 App 的介面截圖,你就懂了。它大到足以擋住照片縮圖中的一到兩張臉。所以每次你想看最下面那排的第四張照片的時候,你都還要多滑一下螢幕。

一位網友「dumazy」 PO 了一篇文章描述他所遇到關於這個按鈕的問題。他說這個按鈕徹底擋住了一款 App 介面上的「加到我的最愛」星星按鈕以及時間標示。這同時道出了許多以清單形式呈現內容的 App 會有的問題。

如果多滑一下就可以看到被擋住的東西,那也就算了,最慘的是當有東西被擋住,但你已經滑到最底,無法再往下滑的時候。

但若要改善這個問題,就意味 App 開發人員需要犧牲這個按鈕所佔據的空間,在那裡不能放任何的東西。所以你現在還要小看這個小圓圈所能造成的負面影響嗎。

(圖說: 按鈕擋住了” 我的最愛星星”)

 

  • 這個熱鍵所連結的功能 也並不總是那麼常用

當你在做使用者經驗設計的時候,你必須記得 80/20 法則:人們會花 80% 的時間在用 20% 的功能。換句話說,設計人員必須把大部分的力氣花在人們最常使用的那些功能上。

動作按鈕,理論上,就是要做到這件事。但如果它所連結的功能,其實也不是那麼常用呢?

以 Google 的 Gmail app 為例,它的按鈕功能是「編輯信件」。但是以我們的經驗而言,也許因為手機打字還是不太迅速方便,大部分的手機使用者在 Gmail app 上面最常做的事情,並不是寫信,而是讀信。

也許有些人會用手機回覆 Email,但他們也會先打開郵件之後,才開始回信。所以令人不禁想問,在收件匣放個「編輯信件按鈕」到底要做什麼呢?

也許在少數情況可以讓剛好要在手機上寫信的朋友覺得開心,但在其他時間,這個按鈕只會佔據螢幕空間、擋住星星按鈕和時間標記,而且還用醒目的紅色來轉移你的注意力。

  • 我們真的需要或想要動作按鈕嗎?

當然,並不是每款 App 的按鈕都是敗筆,成功提升使用者經驗的例子也是有的。

Google Map 是一個按鈕相當成功的例子。Google Map 上面的按鈕所啟動的功能是「定位」與「導航」,而這兩個功能確實就是大家看地圖最需要做的動作,所以它們符合使用者的需求。

但 Google Map 是一個很特殊的案例,因為在這個 App 上,使用者的注意力幾乎都集中在畫面中央 (也就是你所在的位置),所以動作按鈕不會擋住你想要看到的內容。但在大多數的 App,不論內容是以清單還是窗格呈現,使用者時常會需要看到整個畫面的內容,包括被按鈕擋住的部分。

還有一個問題,是從上面這些 App 螢幕截圖看不出來的,那就是通常當使用者滑動螢幕時,這些按鈕不會隨著螢幕滑動、消失,它們會永遠留在原地。

就像 Google 自己在 Material Design 一直強調的,動態設計跟靜態的使用者介面設計一樣重要。這個被釘在螢幕右下角不動的圓圈已經影響到使用者對螢幕內容的閱讀了。

動作按鈕成功的案例少之又少,這讓我們思考:「我們真的需要它嗎?」

上面這些問題,其實可以被濃縮成一件事:使用者在 App 並不只會進行「動作」,他們也需要讀取介面上的內容。

動作按鈕這個設計,背後的假設是使用者會花大部分的時間在 App 上進行某種動作,所以開發人員賦予「執行動作」相當高的地位,創造了這個蓋在所有東西上面的按鈕。然而,在很多 App 上,我們會花相同甚至更多時間在閱讀內容。在照片 App,我們只想看照片;在 Gmail,我們只想讀信;在 Facebook,我們只想看動態。

開發人員為了讓某些功能能更快速被使用,在使用者的內容閱讀經驗方面做出折衷,但這是人們想要的嗎? 我們已經知道,這個按鈕讓使用者經驗打折扣;我們也知道,我們很難去決定在一款 App 當中什麼動作是最常被執行的。既然如此,我想答案已經很明顯。

Google 的 Material Design 真的是一款很了不起的設計語言,但至於這個按鈕,似乎就……還好了。

 

(文章來源:Tech in Asia;圖片來源:Teo Yu Siang)