小紐扣

前言:由于人們的注意力有限,如果你的交互路徑銜接的不夠順暢或缺乏足夠的線索引導,也許你精心設計的交互反饋并沒有進入用戶的視線。

 

在做可用性測試的時候,我們經常會發現,用戶總會忽視一些在設計者眼中很明顯且很容易被發現的變化。作為體驗設計師,你當然知道每一步應該去哪里、什么時候去做什么操作,以及這些操作意味著什么。所以,當你回顧自己的設計時,自然不會錯過什么重要環節。但用戶卻總是在不停地“錯過”,為什么?就因為這個已有百萬年歷史,且短時間內不太會被進化掉的,人類身上固有的感知現象 →【變化盲視】(change blindness)。

 

那么什么是變化盲視?在Alfred Hitchcock的著名電影Psycho中,當Arbogast偵探看向Norman Bates的房子時,黑暗的夜空是無云的。但當鏡頭轉向偵探的臉,隨著他開始走向房子,雖然場景還是黑夜,但天空中卻突然烏云密布。

 

無論天空的變化是導演巧心安排還是拍攝承接上的失誤,重要的是其實大部分觀影者并不會發現。在電影的拍攝中時常會出現這種前后不一致的小漏洞,如背景的變化,演員的著裝、妝容或者站位,但這些變化在剪輯后通常會被忽視掉。

 

這個現象就叫做變化盲視,它反映了人們是如何感知眼前的畫面或場景;變化盲視不止出現在電影中,也體現在日常生活中。變化盲視常難以避免:某種場景里一旦真的出現了變化,即使人們已被提前告知、他們也可能毫無察覺。

 

定義:變化盲視是指人們會忽略那些遠離視覺焦點區域發生的變化

Definition:?Change blindness?refers to people’s tendency to ignore changes in a scene when they occur in a region that is far away from their focus of attention.)

 

在心理學界,90年代中期的一些實驗結果可能是變化盲視最好的印證。在那些實驗中,被實驗者需要觀察一張只出現半秒鐘的圖片,圖片消失之后停頓幾秒鐘,再次出現;但是在第二次出現時,會有些細節上的改變,例如:物體的大小、顏色變化,或者有些元素的添加或刪除。當時人們以為這些被實驗者會發現這兩張圖片的區別。在某些重復的實驗中,被實驗者會在兩張圖片中不斷循環觀看,直到他們發現了變化之處。這其中大多數人都要經過20到40個輪回才能找到變化。

 

屏幕的切換(一個畫面之后有短暫的空白,接著再次顯示看起來一致的畫面)是造成視覺盲視可能的原因。在影片中,畫面的切換也同理;并且,在與電腦交互時,當用戶點擊按鈕后,由于頁面加載才會導致閃屏。不過也有可能是用戶眨眼或轉移視線的時候錯過了變化。

 

魔術師很會利用我們的變化盲視:他們通常會拿道具去吸引我們的注意力并控制我們的焦點集中在一點,同時在不被留意的地方進行暗中操作來完成他的騙局。

 

為什么我們身上會出現變化盲視?

變化盲視的根本原因其實就是我們的注意力有限。每一個復雜的畫面其實都包含了巨大的信息量,人們很難高效地注意到每一處細節。

 

然而“變化”其實對我們來說很重要 — 它傳遞著環境中的關鍵信息。多數自然界中的變化都伴隨著“移動”(除了變色龍這個特例,在沒有任何“移動”的情況下,物體不會產生即刻的變化),而且“移動”很容易被我們的余光所捕獲。每當我們的余光發現了任何“移動”,我們的中央視覺就會迅速介入去捕獲更“清晰”的信息。這種行為是從遠古時代人類還在野外生存時遺傳下來的,因為那時任何一處動靜都可能是來自于視我們為獵物的捕食者。

 

當變化是動態的,而這個動作又非常細微的時候,變化盲視就產生了。在兩個屏幕切換的時候,變化被切斷了,所以人們只看到兩張靜態圖片。找到到底什么變了的唯一方法是兩張圖前后對比著“大家來找茬”。這是一件很心累的事,不僅因為要一處一處地摳細節,而且我們的記憶可能也沒那么好。所以,大部分情況下,我們不會注意到屏幕上那么多的信息。

 

但是呢,變化盲視還會發生在視覺移動的時候。換句話說,如果(通常指有位移的變化)同時發生兩個動作,就像剛才提到的魔術,其中一個會強烈的吸引人們的視覺關注,但就是這主觀的視覺移動導致人們沒有發現另一個動作。在界面設計中,這種現象很需要我們留意。

 

界面設計中的視覺盲視

通常,在UI界面交互中,當用戶的操作使得一個新的元素(比如說輪播的圖片或下拉菜單)出現的同時屏幕中其它區域也發生了變化,這時變化盲視就會出現。原因一般會是,用戶操作后的視覺反饋會使用戶的視覺聚焦在操作附近,然而變化卻出現在屏幕中的其它角落。

 

例如,當用戶點了這個安卓應用Aldiko(見圖1)的漢堡包按鈕(左上角),他們會預期屏幕中的變化內容會跟這個操作有關,或者內容變化會在目錄出現的區域。所以他們的目光會鎖定在目錄展開的區域,而不會發現右上角突然冒出來的搜索按鈕(還替代了之前的“更多操作”按鈕)。

 

圖1.ALDIKO ANDRIOD APP: 當目錄展開,右上角原本的操作按鈕被搜索ICON替換了。但是這個搜索按鈕可能不會被發現,因為:1.用戶只會關注到跟他操作的直接結果也就是展開的目錄;2.他們會習慣于這個頁面的其它元素不會發生變化

 

在另外一篇文章中,我們討論過為什么PC界面中的搜索框不應該被一個簡單的搜索icon代替;然而在手機屏幕中,圖標的做法是合理的,因為我們調研過這個放大鏡的圖形很容易被人們識別到即使沒有輸入框。但是,如果輸入框本不是默認可見,當用戶點擊搜索圖標時,輸入區域應該就在圖標周圍(而不是在遠離圖標的別處),以確保用戶不會找不到(請看圖2圖3)。

圖2.TEXAS A & M UNIVERSITY的網站不僅把搜索框換成了搜索ICON,還把點擊搜索ICON后出現的搜索框放置在遠離ICON的地方;且首頁的動畫還很容易轉移用戶的注意力

 

圖3.JOHN HOPKINS UNIVERSITY同樣用了動畫背景,還把搜索做成按鈕;但還好點擊后的搜索框出現在ICON附近,且背景是被罩層暗化了,以避免打擾用戶當前的注意力

 

不固定的導航或懸浮按鈕也很容易被忽視,因為“整個頁面的滾動”會掩蓋掉它們的存在。比如,不固定的導航欄只有在用戶回滾頁面的時候才出現在頁面頂部;我們以為用戶會注意到并及時點擊了他們想要的操作而避免滾回頁面頂部才能操作。不幸的是,這種時有時無的欄位是很容易淹沒在整個屏幕的滾動中的,尤其那些突然出現的欄位顏色還跟頁面背景相近,就像下方的New York Times的例子(見圖4)。

 

圖4.NYTIMES IOS APP:當人們向上回滾頁面時,懸浮在頁面頂部的導航欄很容易被忽視,因為用戶的注意力不在那個位置;況且這個導航欄的視覺效果也并不突出

 

圖5.CHICAGO TRIBUNE的MOBILE WEB也用了同樣的回滾懸浮導航,但是她們對導航欄的視覺處理就顯眼多了

 

(我們的余光除了負責發現“移動”情況還會捕捉“陰影”。當一個頁面出現部分明暗區域的變化時,例如一塊與頁面對比強烈的色塊出現在屏幕角落時,比起那些無聲無息混在頁面中的,我們其實很容易發現)

 

還有很多其它會被變化盲視影響的設計,如報錯提示亦或其它類型的通知,或是出現且消失迅速的結果通知(原文link:?https://www.nngroup.com/articles/too-fast-ux/),不停變化的導航欄都可能會造成這一現象。我的同事在他的文章中有更多討論 (原文link:?https://www.nngroup.com/articles/change-blindness/)。

 

如何在界面設計時避免變化盲視

避免變化盲視發生,請謹慎安排同一時間出現在界面中互相干擾的變化,這里給出一些排查的方法:

一次只做一個“動作”:在上文Aldiko的例子中,搜索按鈕可以默認放置于導航欄,而不是藏在某個操作下面。

將變化的元素集中:確保所有變化的點出現在頁面同一區域。例如針對Aldiko的優化方案還可以是將搜索功能放置在展開的目錄區域(同時注意搜索功能的隱藏與否影響很大,可能只有偏瀏覽型或搜索場景小的網站適合)。

利用動效引導:但是也要適當,不要再因為動效而分散了用戶的注意

將沒有變化的區域變暗(譯者注:比如增加蒙層),讓用戶集中注意力于變化區域

如果要使用頁面滾動才出現的浮動元素:盡量將它們至于用戶的視覺焦點附近(例如,將“返回頂部”按鈕放在頁面底部)并使用與頁面對比較強的顏色

本文為原創譯文,轉載/引用皆請標明譯者和出處,本譯文版權歸點融設計中心DDC所有。

 

原文地址:Nielsen?Norman?Group

譯文地址:點融設計中心DDC

原文作者:RALUCA BUDIU

譯文作者:李茜

 

轉載請注明:學UI網 » 聊一聊交互中的“大家來找茬”

登錄收藏
 
你可能喜歡的:
免費圖標有很多,就是為了不用畫嗎?瞎扯!免費圖標有很多,就是為了不用畫嗎?瞎扯!
微信授權登錄中的驚艷設計微信授權登錄中的驚艷設計
移動端篩選常見交互形式及運用移動端篩選常見交互形式及運用
你真的會設計小標簽嗎?你真的會設計小標簽嗎?
用戶訪談——哪些原則簡單卻有效用戶訪談——哪些原則簡單卻有效
按鈕規范系列 - 「取消按鈕」的設計詳解 | 細節分析按鈕規范系列 – 「取消按鈕」的設計詳解 | 細節分析
產品圖標 - 谷歌 Material 規范產品圖標 – 谷歌 Material 規范
設計語言 - 選擇器設計語言 – 選擇器
如何讓按鈕設計的更迷人如何讓按鈕設計的更迷人
iOS平臺設計規范-精簡總結篇iOS平臺設計規范-精簡總結篇
?
江苏11选五今天开结果查询