用設計抓住受眾的心:10 個影響體驗的認知心理學法則(上)
文章推薦指數: 80 %
本文會分成上下兩篇,介紹10 種認知心理學法則,除了設計以外,還可以試著從這些現象中好好思考,我們的日常生活 ... 舉個例子,記得電視的遙控器嗎?
UpgradeOpeninappHomeNotificationsListsStoriesWritePublishedin20世紀少年用設計抓住受眾的心:10個影響體驗的認知心理學法則(上)設計是一種「解決事情的方法」,當我們談論設計時,除了設計師本人,一定會有個「對象」,它可以是受眾、觀眾、顧客或甚至是老闆,任何透過設計品與你連結的人,都會是你的對象。
因此設計絕對不是自己做開心的產物,它必須能有效解決使用者的問題,才是一個好的設計。
通常人們會覺得一項產品很棒,是因為它的體驗或設計影響了內心的知覺,從而延伸出各種不同的感受與行為,這在心理學中有一個專門的分支稱作「認知心理學」,認知心理學與使用者體驗其實有很大的關聯,我們可以藉由一些方式來預測、引導使用者的行為,藉此優化服務的流程與設計,讓使用者更喜歡我們所設計的產品。
什麼才是你心目中的好設計呢?在開始認識UI/X後,一直都會從Medium或各個網站獲取新知,正好最近看到了有關心理學與使用者體驗的資訊,想好好整理這些常見的認知原則,以及它們和設計之間的關聯,於是就嘩啦啦的出現這篇文章了。
本文會分成上下兩篇,介紹10種認知心理學法則,除了設計以外,可以試著從這些現象中好好思考,我們的日常生活是不是也受到心理學的影響了呢?那麼,開始吧👇。
1.Fitt’sLaw當我們要抵達的目標距離越遠、形體越小,我們所花費的時間就越長。
Fitts’sLaw由心理學家PaulFitts提出,他發現人們要移動到特定目標的時間,取決於目標的距離以及大小,當我們移動速度越快,或者是目標對象越小時,我們完成動作的錯誤率以及時間就會越長。
這個法則原先是人體活動科學的模型,後來卻廣泛運用在使用者介面上。
像我們在設計APP時,都必須考量到按鈕的大小與擺放的位置,我們想要使用者完成的動作為何?要完成這個動作是否會因為按鈕的大小與距離花費掉很多時間?UI中各個元件的距離安排這個時候就變得重要了起來。
因為Fitts’sLaw,人們通常會傾向選擇離自己比較近,且圖形較大的物件(在判斷上不需要花太多時間),就像是瀏覽器的關閉通常會放在離中心點最遠的地方,且按鈕不大,因為瀏覽器最不想要使用者做的事情就是「離開」。
因此設計師應該注意的是:行為相同的按鈕元件大小要相同,且彼此距離不能太遠,以方便快速動作跟選擇。
如果是使用者常會用到的按鈕(或者我們想要他執行的動作),可以接近他能觸及的範圍,或將按鈕做大一點引導他們。
2.Hick’sLaw我們做出決定的時間長短,取決於選擇的數量以及複雜程度。
Hick’sLaw的重點在於,使用者做決定的時間,會因為選項多寡和複雜程度而變化。
當選項越多越複雜(可以是圖形和文字敘述,或者是決定的形式),人們做出反應的時間就越久,因此在設計時應該考量這個設計是否方便使用者完成動作。
然而,將決定的選項精簡並不是解決之道,因為少不代表好用,而是設計師應該定義清楚,該如何讓使用者花最少的時間,做出最正確的決定,專注在該頁面或產品要達成的目的就好。
舉個例子,記得電視的遙控器嗎?它提供了所有能在遙控器完成的功能,但這並不代表我們會全部用到,而且可能還會反過頭來影響使用遙控器的效率。
給予合適的選擇比列出所有選項來的更恰當一些我們可以透過設計減少使用者做出決策的時間,同時提高該行為的準確,藉此達成良好的體驗,因為每個人的時間都是寶貴的,一但選擇變得複雜,使用者可能就離開你的服務,從此不再使用,千萬不要用糟糕的設計浪費大家的時間(無論是使用者或設計師本人皆然)。
3.Jakob’sLaw使用者大部分的時間都花在別人的網站上,代表他們會較習慣和其他設計相似的互動方式。
Jakob’sLaw是由JakobNielsen提出,他與DonaldA.Norman創立了NielsenNorman集團,Jakob發明了“discountusabilityengineering”,以快速且花費較少的方式進行使用者介面設計評估與修正。
這個法則建立在行為造成的普遍認知上,設計師在進行產品設計時,可以好好思考:我們有沒有必要作出和大部分習慣相反的設計與互動?就像人們應該很難看到點擊後會提供往上凸起反饋的按鈕,或者用紅色代表「通過、准許」的指引。
Jakob’sLaw的用意並非叫我們去抄襲,或是拒絕創新,而是設計師要考慮採用與大部分使用者習慣認知相同的互動方式進行設計,最好的方法之一,就是按照各個系統提供的guildline來設計,因為使用者不會花一整天的時間跟你的產品相處,除非我們的產品好到驚人,不然按照準則有助於減少使用者建立認知所花費的時間和成本。
4.LawofPrägnanz人們會將複雜的圖像用最簡單的方式解讀。
LawofPrägnanz是完形心理學的其中一部分,這個學派的主要論點是:「一個物體並不是它所有元件的總和」,比如我們對於牛肉麵的認知,並非只是牛肉、麵條和湯頭(或蔥花跟榨菜)的組合,它同時包含前面所述的感受,以及我們對於過往的經驗與認知,結合起來才是我們腦海中出現的牛肉麵,也因此每個人對於牛肉麵都會有不一樣的想像。
完形心理學有很多原則,而Prägnanz指的就是其中的「簡單」原則,當人們接收到複雜的資訊時,會自動省去細節,將它簡化並從中找出秩序,以方便大腦理解並進行後續的動作。
將這個原則運用在設計中,有助於減少使用者需要思考的時間。
當我們安排完善的產品資訊架構,並提供適度的指引(Onboarding、標題或說明等),讓使用者第一眼就能快速理解如何操作,同時得到想要的資訊。
當我們看到Spotify桌面版的介面,視覺就會快速區分每一個區塊的功能,並前往我們想要執行的按鈕:如果可以簡單,誰想要複雜?良好的畫面安排可以幫助使用者更快進入狀況,以手機APP為例,我們可以想想,究竟單一頁面是否需要塞這麼多個功能選擇在裡面,在設計時評估頁面的目的與架構,或許可以有效減低學習成本,讓使用者更願意留存使用。
5.LawofProximity互相接近的元素往往被視為一個群組。
LawofProximity中文叫做接近律,同樣是從完形心理學發展出來的理論,這個心理原則認為,人類的大腦有自動歸類的功能,會將彼此距離相近的物體視為一個群組,就像上圖所描繪的圓形,第一眼看到會覺得它們被區分成三個群組,即使圓形的大小都一樣,我們還是會將它們看成不同的群體。
要區分「群體」的方法有很多,最直覺的方式就是運用空間來分隔元素(如上圖),而在設計中常見的做法,就是用字體、顏色、大小來安排資訊層級,一但次序出現,我們就可以更快速地找出想要的資訊。
所以接近律帶給設計師什麼啟示呢?當我們在設計產品時,必須有意識地注意到每個元件的設計,因為彼此相臨的按鈕,通常會被使用者預期有同樣的回饋。
如何打造良好的體驗,是優秀產品成功的關鍵,但體驗設計並沒有絕對的好與壞,只有適不適合產品的客群而已,不過我們在回顧這些認知原則的過程中,還是可以窺見避開那些「所謂的壞設計」的道路,並慢慢摸索出設計良好體驗的方法。
下一篇會繼續與大家分享另外五個常見的認知心理學現象,包含使用者的記憶力、怎麼適度的安排「工作」等等,以及我們應該如何運用在設計中。
小小題外話,其實這兩篇系列文上週就開始動筆了,只是沒想到拖到現在才完成,覺得自己一月的生產力有點低落,希望過年前還可以有更多產出,如果喜歡這篇文章,歡迎一起交流或拍拍手👏。
Morefrom20世紀少年不小心從中文系轉職成介面設計師,喜歡聽音樂、吃好吃的東西跟看電影,但更多的時候是在學著怎麼成為一個更好的人。
Readmorefrom20世紀少年Getstarted周偉仁Zaou1.3KFollowers大學主修中文,研究所不小心跨科到數位內容,在不斷變動中努力思索自己的定位,想做的事情很多,但最希望的是不要變成無趣的人,目前正擔任25sprout的介面設計師。
FollowRelatedRecreatingaPainting&MakingitInteractiveusingp5.jsHowtoHelpNewParticipantsBecomeComfortablewithMuralArtistInterviewwithMargauxCarpentierMargauxisanillustratorandprintmakerbasedinStokeNewington.ShestudiedinbothParisandSurreyandspentherearlytwenties…OnnaAugust2021arrivedwithaseven-weekchallengetotheADA.Ittooksevenweeksforustodothewholeprocessofthinkingaboutatheme…HelpStatusWritersBlogCareersPrivacyTermsAboutKnowable
延伸文章資訊
- 1認知 - 超普通心理學
這表示牠看過一次就記得所有水果藏匿的位置,由此可知黑猩猩也會發展出令人驚豔的認知地圖! (四)日常生活例子. 計程車司機對於城市中各條道路的位置瞭若指掌,這是因為 ...
- 2認知心理學感想- 教學篇 - smalltalk
最近一直在讀認知心理學的書,深入一些大腦如何進行輸入輸出的基本研究。我這一輩子都沒想過,我竟然可以讀幾百 ... 這個例子解釋了思考的幾個特性。
- 3認知心理學 - MBA智库百科
認知心理學(Cognitive psychology)認知心理學是一門研究認知及行為背後之心智處理(包括思維、 決定、推理和一些動機和情感的程度)的心理科學。
- 4認知學派在教學方法上的應用(上) - 隨意窩
認知心理學可說是崛起於一九五○年代,奠基於六○年代,發揚於七○年代,並在八○年代 ... 下面這一則短文是基模理論所用的有名例子 ( Bransford & Johnson, 1972):.
- 5認知心理學(Cognitive Psychology) Archives
認知失調(cognitive dissonance)︰我們的腦海總是出現矛盾的想法. 認知失調的意思就是當你的兩種認知產生互相矛盾的情況,例如上述的例子。大腦喜歡一致性,矛盾 ...