歡迎來到上海仝薪網絡科技有限公司官網,上海網站建設公司上海網站制作公司微信網站上海競價托管公司
咨詢,就免費贈送域名與服務器,咨詢熱線:13761675098當前位置: 競價外包 > 建站知識 > 網站建設知識 >
聯系我們
電話咨詢:13761675098
E-mail:[email protected]
地址: 上海市金園一路1118弄

在按鈕置灰時,該如何提供給用戶反饋?

作者/整理:admin 來源:互聯網 2018-01-25

給予用戶即時反饋是交互設計中十分重要的一個原則。它是關于系統如何即時有效地應對用戶進行的操作的設計。當用戶進行操作時,給予即時、恰當的反饋非常重要。

一個簡單的例子就可以說明這一點:當你的電腦死機的時候,不論你點什么,電腦都不會有任何反應。系統沒有了反饋,用戶的內心就會很崩潰。今天我們要討論的,是反饋中很特殊的一種:在按鈕置灰的時候,應該如何提供給用戶反饋?

先來看一個案例。這是一個投票的浮層,每個選手的下方有個投票按鈕,每個用戶每天只能投給一個選手一票。

乍看這個方案沒什么問題。但如果加上投票之后的頁面,問題就暴露了出來:

圖 2 為了表達出“不能再投票了”,將所有按鈕置灰,于是我們得到了一屏幕置灰的按鈕。雖然按鈕是灰色的,但按鈕卻依然長得是按鈕的形狀,還是有忍不住想點一下的欲望。

那么問題來了,此時點擊這個灰色的按鈕,應該彈出toast提示:“每天只能投一票哦~~~”嗎?帶著這個疑問,我們來研究一下置灰按鈕。

置灰按鈕

置灰按鈕在登錄注冊中被廣泛應用,比如微信:

左圖是默認的登錄頁面,登錄按鈕置灰;當用戶輸入了密碼(即時只有一位),則登錄按鈕亮起。

乍看之下只輸入了一位密碼就亮起,有些不合理,畢竟用戶的密碼位數幾乎不可能是一位數,此時亮起用戶也不太可能登錄,反而有干擾之嫌。

但如果再細想一下,假設用戶的密碼是 6 位,而微信正好在 6 位的時候亮起了按鈕,那么其實也是變相透露了用戶密碼的位數。如果設定一個最小的按鈕亮起的位數呢?比如從用戶輸入了 6 位后開始亮起,這樣也不失為一個選擇,只不過比現在的方案要略復雜,沒有現在這個更簡單直接。

下面這個例子,應該是登錄注冊中,置灰按鈕應用的頂配了:

在這個例子中,只有當用戶輸入了 11 位數字(手機號碼都是 11 位)后,“獲取驗證碼”的按鈕才會亮起。這個方案就是無可挑剔,沒毛病。

在登錄中將按鈕置灰,主要是提示用戶現在按鈕還不可以點擊,要輸入密碼/手機號等信息后,才可以點擊。這在一定程度上,預防了用戶在沒有輸入的時候就點擊而導致的操作失敗。由于將按鈕置灰,本身就是將按鈕置為不可用的狀態,因此置灰的按鈕點擊之后是不應該給出反饋信息的。

這里我們可以看到一個權衡:雖然“即時反饋”這條原則很重要,但可供性(affordance),也就是指示一個物體如何被操作,也不能違反。具體來說,一個置灰的按鈕,它已經被設置為置灰的狀態,就清晰地指示出按鈕不能被點擊;此時如果點擊按鈕后彈出toast,則與此時按鈕的可供性不符合,因此是不可取的做法。

投票案例

分析到這里,文章開始的那個例子就明晰了:點擊第 2 張圖的投票按鈕,不應該彈出toast。但頁面中還是有很多被置灰的按鈕,這個頁面看起來不是很友好,筆者表示對這個頁面不太滿意。

順便分享一個經驗:對頁面的不滿意,很多時候是我做出好方案的法寶。因為不滿意,所以會一直想辦法優化。保持對自己不滿意的頁面的不妥協態度,這非常重要。

分析一下這個投票頁面,在投完票之后,用戶已經選擇了一位選手,此時最關心的是“我是否已經投上票”了。如果對這個活動比較感興趣,用戶還可能會想要了解一下投票的排名,已經瀏覽一下都有哪些選手參與了投票。因此,這個頁面可以改成如下這樣:

更改后的方案,在用戶點擊投票之后,首先指明了用戶投的是誰、現在多少票、排名是多少;后續的頁面展示了票數的排名,從而避免了滿屏都是置灰按鈕的情況。

重庆时时彩官方网站app