原文：Change Blindness in UX: Definition
作者：Raluca Budiu (2018-09-13)
閱讀時(shí)間：9m42s

摘要：由于人類注意力的局限性，當(dāng)網(wǎng)頁缺乏強(qiáng)有力的線索時(shí)，網(wǎng)頁中的重大變化可能會(huì)被忽略。

變化盲視的定義

在可用性測(cè)試中，我們經(jīng)常觀察到，用戶忽略了屏幕上的一些變化，而設(shè)計(jì)師卻認(rèn)為這些變化是顯而易見、令人矚目的。在可用性方面，如果您從事的是設(shè)計(jì)工作，那么您就知道要尋找什么，在哪里尋找它，它何時(shí)出現(xiàn)以及它意味著什么。因此，這對(duì)您來說是顯而易見的，當(dāng)您查看您自己的設(shè)計(jì)時(shí)，您不會(huì)錯(cuò)過一個(gè)重要信息或數(shù)據(jù)對(duì)象的出現(xiàn)。但用戶經(jīng)常這樣。為什么？因?yàn)樽兓ひ暎@是人類（和史前人類）感知的一個(gè)有百萬年之久的事實(shí)，并且不太可能在短時(shí)間內(nèi)消失。

那么什么是變化盲視呢？在阿爾弗雷德 · 希區(qū)柯克（Alfred Hitchcock）的《驚魂記》（Psycho，有史以來最著名的電影）中，偵探 Arbogast 看著 Norman Bate 的房子投射在漆黑無云的天空里。鏡頭回到偵探的臉上，并跟著他朝屋子走去。場(chǎng)景仍是黑暗的，但天空卻突然布滿了云彩。

不論天空紋理的變化是有意為之（或許是希區(qū)柯克對(duì)即將發(fā)生的事的微妙警告）還是只是一個(gè)連續(xù)性的錯(cuò)誤，大多數(shù)觀眾都不會(huì)注意到它。在一個(gè)場(chǎng)景與下一個(gè)場(chǎng)景之間，動(dòng)態(tài)影像經(jīng)常會(huì)出現(xiàn)像這樣細(xì)微的不一致，比如背景的變化，演員的服裝、妝容或位置的變化，但這些在不同場(chǎng)景之間切換時(shí)發(fā)生的變化通常都會(huì)被忽略。

這種現(xiàn)象被稱為「變化盲視」，并且超出了電影的范疇。它適用于通常情況下人們對(duì)場(chǎng)景的感知，不管是在屏幕上還是在現(xiàn)實(shí)生活中。變化盲視的作用非常強(qiáng)大：即便人們已被警告可能發(fā)生變化，場(chǎng)景中的變化也可能不被察覺。

定義：變化盲視指的是，當(dāng)一個(gè)場(chǎng)景的變化發(fā)生在遠(yuǎn)離人們的關(guān)注焦點(diǎn)的區(qū)域時(shí)，人們傾向于忽略這些變化。

在心理學(xué)中，20 世紀(jì) 90 年代中期進(jìn)行的一系列實(shí)驗(yàn)可能是對(duì)變化盲視最好的說明了。在這些實(shí)驗(yàn)中，參與者被要求觀看一幅復(fù)雜場(chǎng)景的圖像，時(shí)間為半秒；然后顯示器空白了一小會(huì)兒，最后又出現(xiàn)相同的圖像。然而，第二次顯示畫面時(shí)，一些細(xì)節(jié)被修改了，比如，一個(gè)對(duì)象改變了尺寸、顏色或者添加或移除了一個(gè)元素。實(shí)驗(yàn)參與者被要求識(shí)別這兩幅圖像中的變化。在其中一些研究中，人們多次循環(huán)查看這兩個(gè)版本，直到他們察覺出這些變化。對(duì)許多人來說，要經(jīng)過 20 或 40 次交替才能找出它們。

顯示器的閃爍（一個(gè)場(chǎng)景，接著是空白屏幕，接著是看起來相同的場(chǎng)景）是變化盲視的一個(gè)重要組成部分。在電影中，場(chǎng)景的切換起到了閃爍的作用；另外，在與計(jì)算機(jī)交互時(shí)，閃爍則由用戶按下按鈕之后新頁面（或 UI 元素）的加載引起。但事實(shí)證明，閃爍并不是絕對(duì)必須的，當(dāng)用戶眨眼或正在掃視（當(dāng)她移動(dòng)視線至屏幕上另一個(gè)區(qū)域）時(shí)，此時(shí)發(fā)生的場(chǎng)景變化也很容易導(dǎo)致變化盲視。

魔術(shù)師利用人類在眼睛移動(dòng)時(shí)的變化盲視傾向：他們使用吸引注意力的裝置來使觀眾的眼睛移動(dòng)到那個(gè)位置，同時(shí)進(jìn)行對(duì)他們的戲法至關(guān)重要的未觀察到的動(dòng)作。

為什么會(huì)發(fā)生變化盲視？

變化盲視發(fā)生的最根本原因是我們注意力的局限性。任何復(fù)雜的場(chǎng)景都有著大量的細(xì)節(jié)，人們很難也無法高效地注意到所有這些細(xì)節(jié)。我們經(jīng)常采取的方式就是走捷徑。

變化對(duì)于人類來說一直都很重要，它可以傳達(dá)與我們的環(huán)境相關(guān)的重要信息。自然界中的大多數(shù)變化都是由運(yùn)動(dòng)來實(shí)現(xiàn)的（除極少數(shù)比如變色龍的特例之外，一個(gè)物理對(duì)象無法在不涉及運(yùn)動(dòng)的情況下立即發(fā)生改變），并且，人類的周邊視覺很容易察覺到運(yùn)動(dòng)。一旦人眼檢測(cè)到周圍的運(yùn)動(dòng)，他們就會(huì)尋找運(yùn)動(dòng)的來源，此時(shí)中心視覺開始起作用，并提供補(bǔ)充的、詳細(xì)的信息。這種行為是我們野外生活的遺留物，在野外，任何運(yùn)動(dòng)都可能是捕食者正準(zhǔn)備獵殺我們的信號(hào)。

當(dāng)運(yùn)動(dòng)作為變化的提示線索比較微弱或者完全不存在時(shí)，就會(huì)產(chǎn)生變化盲視。當(dāng)屏幕閃爍時(shí)，運(yùn)動(dòng)就被分解了，我們看到的是場(chǎng)景的兩個(gè)靜態(tài)版本。找出變化的唯一方法是，檢查前后版本中所有相應(yīng)的元素并進(jìn)行比較。這項(xiàng)任務(wù)是很困難的，不僅因?yàn)闄z查場(chǎng)景中無數(shù)小細(xì)節(jié)是乏味的，而且我們對(duì)于場(chǎng)景先前版本的記憶也可能很差。事實(shí)上，我們很可能根本就沒注意到那個(gè)場(chǎng)景中的大部分元素。

但變化盲視也可能發(fā)生在眼球運(yùn)動(dòng)過程中。換句話說，如果兩個(gè)（可能運(yùn)動(dòng)暗示的變化）相互競(jìng)爭(zhēng)──就像魔術(shù)表演中一樣，一個(gè)變化通常會(huì)獲勝并吸引眼球，但眼球運(yùn)動(dòng)阻止了對(duì)第二個(gè)變化的檢測(cè)。這一原因在界面設(shè)計(jì)中尤為重要。

界面設(shè)計(jì)中的變化盲視

在與用戶界面的正常交互中，當(dāng)一個(gè)新的元素（比如產(chǎn)品圖片輪播中的不同圖片或者下拉菜單中的內(nèi)容）作為用戶操作的結(jié)果出現(xiàn)在屏幕上，而屏幕上其它區(qū)域也同時(shí)發(fā)生變化時(shí)，常常產(chǎn)生變化盲視。用戶預(yù)料中的變化的位置在于直接響應(yīng)用戶操作的那個(gè)可見的設(shè)計(jì)元素，于是用戶朝那個(gè)方向移動(dòng)視線──但實(shí)際上，變化分散在屏幕上多個(gè)不同的區(qū)域。

Android 上的 Aldiko：打開菜單時(shí)，屏幕右上角的控件被一個(gè)放大鏡替代。搜索工具將一直不被注意到，因?yàn)椋?）人們會(huì)盯著展開的菜單，這是他們操作的直接結(jié)果；（2）他們期望屏幕上其它所有元素保持不變（就像他們與大多數(shù)用戶界面交互時(shí)一樣）。

Texas A&M 大學(xué)（https://www.tamu.edu/）不僅用搜索圖標(biāo)來代替搜索框，而且還在距離搜索圖標(biāo)很遠(yuǎn)的位置顯示搜索文本框。主頁橫幅的動(dòng)畫與搜索框的顯示是具有競(jìng)爭(zhēng)性的。

John Hopkins 大學(xué)（https://www.jhu.edu/）也使用了一個(gè)動(dòng)態(tài)的主圖，并將搜索隱藏在一個(gè)圖標(biāo)下。但至少，它在搜索圖標(biāo)附近顯示搜索框，并將動(dòng)態(tài)的背景調(diào)暗，以降低動(dòng)畫的競(jìng)爭(zhēng)性。

iPhone 上的 NYTimes：當(dāng)他們開始向上滾動(dòng)時(shí)，人們可能會(huì)忽略出現(xiàn)在屏幕頂部的半持久性導(dǎo)航欄，因?yàn)樗麄冋龑Ｗ⒂陧撁娴臐L動(dòng)。一個(gè)加劇這種現(xiàn)象的因素是視覺效果上，導(dǎo)航欄與頁面內(nèi)容的差異不夠明顯。

Chicago Tribune 的移動(dòng)網(wǎng)站也使用了一個(gè)半持久性導(dǎo)航欄，當(dāng)人們開始向上滾動(dòng)時(shí)，它就會(huì)出現(xiàn)在頁面頂部。但是，在這個(gè)例子中，導(dǎo)航欄的視覺設(shè)計(jì)效果使它更突出了。

（我們的周邊視覺負(fù)責(zé)識(shí)別運(yùn)動(dòng)和陰影。比起一個(gè)元素微妙地與頁面其余部分混合在一起，并且未顯著改變頁面的陰影輪廓，當(dāng)一個(gè)頁面的陰影輪廓發(fā)生變化時(shí)──比如因?yàn)橐粋€(gè)角落里出現(xiàn)了大塊對(duì)比色──我們更容易注意到它的出現(xiàn)。）

還有很多其他方面的設(shè)計(jì)可能受變化盲視所影響──錯(cuò)誤消息或其他通知、出現(xiàn)得太快的結(jié)果、或因此現(xiàn)象仍可能被忽略的變化的導(dǎo)航欄，正如我們?cè)?a target="_blank" rel="nofollow">同個(gè)話題的相關(guān)文章中所討論的那樣。

如何避免界面設(shè)計(jì)中的變化盲視

為了避免變化盲視，請(qǐng)對(duì)你的設(shè)計(jì)進(jìn)行分析，以確定那些可能同時(shí)發(fā)生并且會(huì)分散彼此注意力的競(jìng)爭(zhēng)性變化。以下是一些實(shí)踐的技巧：

• 一次只做一個(gè)變化。在上面 Aldiko 的例子中，可將搜索放置在右上角，并始終可見。
• 將所有同時(shí)發(fā)生變化的元素歸在一起，并放置在屏幕上同一個(gè)區(qū)域內(nèi)，以確保該運(yùn)動(dòng)可吸引對(duì)所有這些元素的注意力。例如，Aldiko 設(shè)計(jì)中另一個(gè)簡(jiǎn)單的解決方案是，將搜索移到菜單中。（但請(qǐng)注意，將搜索隱藏在菜單中會(huì)嚴(yán)重影響其可發(fā)現(xiàn)性，并且可能僅適用于以瀏覽為主的網(wǎng)站。）
• 使用動(dòng)畫來表示變化，但避免在屏幕上使用過多互相競(jìng)爭(zhēng)的動(dòng)畫，以免分散注意力。
• 將屏幕上未發(fā)生變化的區(qū)域調(diào)暗，以聚焦用戶對(duì)變化的注意力。
• 如果你打算在用戶滾動(dòng)頁面時(shí)向頁面中添加浮動(dòng)的元素，那么請(qǐng)將它們顯示在用戶的關(guān)注焦點(diǎn)附近（例如，在頁面底部放置「返回頂部」按鈕），并使用與頁面其余部分形成對(duì)比的顏色。

以上翻譯包含個(gè)人理解，僅作為個(gè)人學(xué)習(xí)筆記使用。如有錯(cuò)誤，求指正呀，非常感謝 ^^
感謝原文作者及所有分享想法與經(jīng)驗(yàn)的人 ^^