您當前位置:圖趣網(Tuquu) >> 網頁設計教程 >> 設計理論 >> 瀏覽設計教程

超周全!聊聊交互設計背后的生理學原理

金蝶云之家用戶研究員-鄭少娜:交互設計準則的背后每每隱含著一些設計的生理學原理,文章整頓了一些認知生理學中對交互設計有所啟發的知識點,一路來學習下。

某次放工偶遇一開發,他問:“你們尋常做的交互設計,有什么準則嗎?”我列舉了尼爾森十原則之類,卻遭到對方的進一步嫌疑,好像認為這不過是一些約定俗成的規矩,細究下來背后卻沒有什么站得住腳的道理。

當然不是如許。這些交互設計準則背后,都有其依循的生理學原理,其中認貼心理學應當占有了很大一部分。

所以借此機會,也整頓了一下認貼心理學中對交互設計有所啟發的一些知識點(參考《認知與設計——理解UI設計準則》)包括:

  • 中間凹與邊界視野——如何呈現信息以獲取細致力
  • 格式塔原理——如何處理不同界面元素的關系
  • 時間感知——如何讓應用具有高相應度
  • 意識與偶然識——別讓用戶思考
  • 記憶的局限——如何降低工作記憶負擔

一. 中間凹與邊界視野——如何呈現信息以獲取細致力

原理

人眼重要通過視網膜成像。視網膜中的視錐細胞大約占有視網膜面積的1%,重要集中在中間凹中,在中間凹之外(稱為邊界視野)視錐細胞分布的密度很低。邊界視野重要分布的是視桿細胞,大約占有視網膜面積的99%。中間凹處的成像最清晰、分辨率很高;而邊界視野分辨率極低,人眼在邊界視野基本處于“失明”狀況,所見的東西差不多跟通過覆滿水霧的浴室門看東西的結果一樣。

這是由于在中間凹處每個視錐細胞都與一個神經節細胞相連,神經節細胞是視覺信息處理和傳導的起點;而在邊界視野中,一個神經節細胞會與多個視錐細胞和視桿細胞相連。雖然中間凹僅占視網膜面積的1%,但是大腦皮層中負責處理視覺信息的部分中有50%是用來接收來自中間凹的視覺輸入。

中間凹并不大,當用戶與電腦屏幕距離正常時,它在屏幕上只有1-2厘米的大小。中間凹成像的區域就是我們的眼睛的諦視點,因此我們每個瞬間看到的景象都只有諦視點是清晰的,其他區域特別很是模糊。但既然邊界視野的分辨率這么低,為什么我們會覺得本身所見的景象其實全都很清晰呢?

這是由于我們的眼睛諦視點會以每秒三次的速度快速跳動,有選擇性地對四周環境進行諦視,大腦再根據這些視覺輸入和我們已有的經驗去添補視野的其他部分,讓我們能夠對四周環境形成一個充足清晰的感知。

除此之外,在視網膜中還有一個叫做「盲點」的存在。盲點是眼球中視覺神經和血管的出口,在這個地方沒有視錐細胞和視桿細胞,無法感知任何光源。也就是說當我們諦視著一個地方時,四周環境中會存在一個點使我們無法「看到」的,我們之所以無法感知是由于雙眼球的存在以及大腦的主動「腦補」。

邊界視野看東西很模糊,但是也有其不可替換的作用。它能夠發現四周環境中的關鍵信息,一旦發現這種關鍵信息,它就會指導中間凹去細心查看這個信息。邊界視野對運動的物體特別很是敏感,這是由于在進化過程中我們必要很快發現四周運動的物體,它可能是可以吃的小動物,或者企圖吃掉我們的猛獸。

所以我們常常會對邊界視野中的運動物體比較敏感,一旦發現我們幾乎會不由自立地看向它。邊界視野還有一個特別能力就是能夠在陰郁環境下很好地工作,視錐細胞風俗高亮度,而視桿細胞更適應陰郁環境。所以在陰郁環境下不直接諦視物體反而更能夠看清楚。

啟示

操作反饋和錯誤信息:

  • 反饋信息盡量落在中間凹中。假如要對用戶當前的操作進行反饋,反饋信息與用戶當前的諦視點不要超過1-2厘米,否則這些信息就會處于邊界視野,用戶很可能察覺不到。
  • 邊界視野上的反饋信息必須充足清晰,比如使用大字體、獨特的顏色,或者使用動效。想象一下把邊界視野都打上馬賽克的樣子,假如這時候提醒信息仍然能夠吸引細致,我們才有理由認為用戶能夠看到。
  • 邊界視野上的反饋信息要有同一且易識別的特點,比如使用用戶風俗的警示符號,或者標準的紅色字體透露表現錯誤。這些易于識別的特點讓用戶能夠輕易分辨出這是什么類型的信息。
  • 需要時使用對話框。對話框中斷了用戶當前的操作、要求用戶細致特定信息并作出相應。對話框要鄭重使用,由于會對用戶造成打攪,尤其是模態對話框。使用對話框還有另一個弊端就是用戶會有風俗化(habituation),即重復暴露在刺激環境中會導致對該刺激反應傾向降低——對話框的泛濫讓用戶對對話框特別很是不敏感,每每不看內容就會直接關閉。

讓用戶更快找到信息:

  • 網頁上的重點信息,可以通過顏色、字體、外形等要素與其他信息做出差異化的表現。用戶通過邊界視野的指導和諦視點的跳動來在界面上探求信息。假如要讓用戶更快找到所需的信息,就要讓這些信息在邊界視野上也充足顯明。
  • 假如信息許多并且無法展望用戶的目標(比如菜單欄、應用中間),就盡量通過圖標差異化地表現每個選項。要讓每個圖標都容易辨認有點困難,比較好的方法是賦予每個圖標獨特的顏色和輪廓,不要太華麗也不要有過多的細節。

二. 格式塔原理——如何處理不同界面元素的關系

我們獲得的視覺輸入是自力的點、線和區域,而我們會在神經體系層面上將這些信息知覺為團體的外形和物體。

接近性原理:在位置上相互靠近的物體傾向于被感知為一組。

如iOS體系的設置,通過位置親疏關系來表現分組。

相似性原理:看起來相似的物體傾向于被感知為一組。

如付出寶首頁的元素雖然許多,但是根據相似性可以清晰地分為幾組。

延續性原理:我們傾向于將線條和外形感知為延續的團體。

典型的例子是IBM的logo設計,我們并不把這些元素感知為自力的橫線,而是感知為團體的字母。

交互上典型的例子是滑動條,如iOS的亮度調節,我們不會把左右兩邊視為自力的橫線,而是會在心中把它們連接起來,視為一個團體。

封閉性原理:與延續性原理相干,我們傾向于將分散的元素感知為封閉的物體。

下圖是印象筆記PC與Mac端多選筆記的表現結果,我們會將后面的線條視為一個封閉卡片(代表著一個筆記)的一部分,而不是視為自力的非封閉圖形。

主體/背景原理:我們傾向于將元素區分為主體和背景,其中主體占有了我們重要的細致力。

iOS體系的選項菜單、toast、對話框等都行使了這個原理,將用戶本來操作的界面作為背景,而將當前必要用戶去關注的信息作為前景。

共同命運原理:一路運動的物體傾向于被感知為一組或者彼此相干。

這比較多用于動效設計,通過不同元素的共同運動表現其親緣關系。

幾種格式塔原理之間并不是相互自力的,在設計中每每必要綜合運用。

三. 時間感知——如何讓應用具有高相應度

一個交互體系的相應度,即能否及時告知用戶當前的狀況而不必要他們無故等待,是影響用戶寫意度的最緊張因素。

下面列出的是與人機交互有關的一些時間間隔,以及與之對應的認知原理:

除了讓體系反饋保持在要求的時延之內,還有一些進步相應度的tips:

  • 進度條必要讓用戶感到體系正在運作,并且清楚進度和必要等待的時間,不要一向停在99%,也不要只表現已完成而忽略未完成。
  • 盡量不要在單位子義務內發生耽誤。上文提到用戶會將義務拆解為子義務,完成每個子義務期間用戶都是處于高度專注的狀況,此時發生耽誤影響較大。
  • 假如加載必要長時間,先渲染出緊張信息讓用戶看到。
  • 行使余暇時間先做些事情,不要等待用戶發出指令后才開始慢吞吞地舉措。

四. 意識與偶然識——別讓用戶思考

人腦可以認為是由三個部分組成:舊腦、中腦和新腦。舊腦重要由腦干組成,掌管著人的本能反應和身體的主動調節功能。中腦位于舊腦之上新腦之下,控制著情緒反應。新腦重要由大腦皮層組成,掌管著只有高級哺乳動物才具備的意識活動。

我們的思維可以分為兩種:

  • 由舊腦和中腦產生的偶然識的、主動化的、情緒化的思維,稱為體系一。
  • 由新腦產生的故意識的、理性的思維,稱為體系二。

體系一只會根據本身已知的東西做判斷,不在乎邏輯性和正確性,并且反應更加快速,它在大部分情況下都運作優秀,因此也不必要體系二出馬。

體系二掌管的是更加高級的認知能力,它每每在體系一無法做出合理反應,或者我們對反應效果的要求比較高的時候,才會親自出馬。體系二運作的成本較高,必要進行故意識的監控并消費有限的細致力資源,并且只能按照順序一件一件完成。相比之下體系一的運作就輕松得多,也許可「多線程」操作。

舉個例子:當你早期刷牙時,打字時,開車時,都幾乎不必要辛苦去想如何完成這些事情。由于這些是你已經習得的舉動,只必要使用體系一就能夠完成,你甚至可以一邊唱著一首認識的歌曲,一邊給本身做早餐。但是,要用到體系二時,比如算一道數學題、背出你部門里30小我的名字、決定今天午時吃什么,我們就會開始覺得這些事情“有難度”,它必要消費我們的認知資源。

這些知識給交互設計的啟發是,盡量讓用戶使用體系一就能夠完成操作,盡可能少消費用戶的認知資源,如許用戶會覺得體系很「易用」。

用戶已經學會的操作可以用體系一輕松完成。因此在設計時盡量保持用戶已有的操作風俗,讓用戶使用以往的經驗、而不必要重新學習,就能完成義務。

用戶對軟件體系存在許多圖式(即schema,是認知的基本單元,用于詮釋感知、調節舉動和存儲知識),所以他們每每根據對特定界面或控件的特定期望進行反應,而不細心去看現實表現在界面上的內容。

假如某個元素的設計吻合用戶對按鈕的圖式,用戶就會認為它可以點擊;假如用戶的圖式中對話框的確定操作在右邊而取消操作在左邊,他可能在意識到你調換了操作位置之前就已經完成了點擊。我們要削減消費用戶的認知資源,就必要去了解、遵循用戶已有的圖式,以及在應用中建立穩固的圖式,這也是為什么我們必要在設計中遵循同等性原則。

不要讓用戶去思考:A跟B的概念有什么區別?為什么沒有反應、我到底操作成功了嗎?找不到刪除訂單的操作,它應該在哪里?這個東西選中后會有什么結果?用戶對這些事情想的越多,就說明體系越難用。用戶的細致力是有限的,應該盡量削減用戶對工具的細致,如許他才能全神貫注去完成他的目標義務。

五. 記憶的局限——如何降低工作記憶負擔

人的記憶分為短期記憶和長期記憶。短期記憶也稱工作記憶,是為了完成義務而一時儲存的信息,一樣平常保留幾分之一秒到幾秒。長期記憶是我們“記住”的東西,長期記憶包括但不等于“永世記憶”,保留時間也可能只有幾分鐘、幾天、幾年。

長期記憶對應著神經體系的某個活動模式,參與該模式的神經元通過突觸建立聯系,神經元上的這種轉變可能是長期的甚至是永世的。神經活動模式可以被再次激活,這就是我們回憶的過程。神經活動模式假如經常被激活,其連結也會變得越來越穩定,這就是為什么經常復習有助于鞏固知識。

工作記憶是感覺、細致和長期記憶留存征象的組合。來自人體各個感覺器官的信息,會被短暫地存儲下來,其中一部分可以被細致到,進入到工作記憶中。長期記憶中的內容也是工作記憶的候選來源。而細致機制負責對感覺和激活的長期記憶進行篩選,因此進入工作記憶中的信息都是我們「細致」到的部分,是屬于上一部分所述的體系二的工作。

我們一次只能細致一件事,假如你覺得你能同時細致兩件,那是由于你在兩件事之間快速地切換你的細致力。

工作記憶的容量有限,大約是4±1,即我們能夠同時記住的互不相干的東西的數量在3~5之間。此外,工作記憶還特別很是不穩固,假如我們將細致轉移到新事物上,之前工作記憶中的內容就可能遺失。

Tips:

  • 避免使用模式,即避免同個操作在不同模式下有不同的結果。用戶常常會忘掉當前處在哪個模式下,因此很容易犯錯。除非在使用模式時特別很是清晰地將模式標示出來。
  • 讓用戶知道他使用的搜索詞是什么。“用戶居然會笨到忘掉本身搜的是什么嗎?”了解了工作記憶的特點之后,大概我們會更能理解這種題目。
  • 每個網頁應該只有一個舉措召喚按鈕(Call To Action),避免干擾用戶細致。
  • 提供操作提醒和幫助時,不要一次呈現太多信息,用戶記不住。
  • 層級低的導航更好用,由于用戶會忘掉本身所處的位置。

迎接關注微信公眾號:「UXD-Cloudhub」


[教程作者:互聯網]
免責聲明:本站文章系圖趣網整理發布,如需轉載,請注明出處,素材資料僅供個人學習與參考,請勿用于商業用途!
本文地址:http://www.77356051.com/Tutorial/di3944.html
大產品小細節!5分鐘帶你了解經典的費茨定律
這5種字體設計策略,幫你創造精彩出挑的頁面視覺體驗
圖趣網微信
建議反饋
内蒙古时时彩走势图