淺談?wù)J知心理學(xué)與產(chǎn)品設(shè)計(jì)的結(jié)合-電商營(yíng)銷引流電商干貨
2023-02-01| 13:37|發(fā)布在分類/淘寶知識(shí)|閱讀:60
2023-02-01| 13:37|發(fā)布在分類/淘寶知識(shí)|閱讀:60
本文主題電商攝影設(shè)計(jì),電商用戶體驗(yàn),電商用戶心理學(xué),電商營(yíng)銷引流。
對(duì)許多產(chǎn)品經(jīng)理和設(shè)計(jì)師來(lái)說(shuō),設(shè)計(jì)評(píng)審PK仿佛夢(mèng)魘,設(shè)計(jì)師辛辛苦苦出的方案,可能遭受多方質(zhì)疑。也許方案本身是優(yōu)秀的,但卻無(wú)法用理論說(shuō)服對(duì)方,結(jié)果越改越丑。自1879年科學(xué)心理學(xué)誕生以來(lái),心理學(xué)家開(kāi)展了大量研究,對(duì)人類認(rèn)知、情感、記憶等各方面的規(guī)律進(jìn)行深入探討。許多結(jié)論都能對(duì)產(chǎn)品設(shè)計(jì)提供理論支持,再次略作總結(jié)分享簡(jiǎn),請(qǐng)各位看官不吝賜教。一款軟件產(chǎn)品最先呈現(xiàn)給用戶的是產(chǎn)品界面。良好的界面元素容易識(shí)別、易于理解、能夠快速記憶,且較少出現(xiàn)誤操作。1.界面元素的編碼特征■可識(shí)別性以費(fèi)希納、韋伯等最早一批心理學(xué)先驅(qū)就是以研究感知覺(jué)閾限為起點(diǎn)的,他們的研究指出人的視覺(jué)、聽(tīng)覺(jué)等只能加工特定強(qiáng)度范圍的刺激。在界面設(shè)計(jì)過(guò)程中,應(yīng)當(dāng)注意元素的可識(shí)別性。例如文字的不能太小,顏色也不能太淺。某款手機(jī)瀏覽器打開(kāi)web頁(yè)面的效果■可辨別性知覺(jué)心理學(xué)研究表明,人的知覺(jué)能力存在差別閾限。兩種刺激必須大于差別閾限,才能被辯論出來(lái)。不同界面元素(特別是近似的、相鄰的)的視覺(jué)特征應(yīng)能明顯區(qū)分,防止用戶需要努力辨別,增加認(rèn)識(shí)資源。某款手機(jī)瀏覽器打開(kāi)web頁(yè)面的效果■意義性刺激必須是有意義的,能夠被人理解。因此,文字表達(dá)上、符號(hào)圖標(biāo)的設(shè)計(jì)上,都應(yīng)保證用戶能夠正確理解,不會(huì)出錯(cuò)。對(duì)圖標(biāo)意義性的可用性測(cè)試:先對(duì)用戶進(jìn)行測(cè)試,看正確識(shí)別的比率有多高;過(guò)一段時(shí)間后,對(duì)相同用戶進(jìn)行再測(cè),看正確率的維持情況。O表示original,R表示Retest。■標(biāo)準(zhǔn)化在不同條件下,刺激的意義需統(tǒng)一。例如,每個(gè)地方紅燈都表示停止,綠燈是表示通行。對(duì)于同系列軟件來(lái)說(shuō),不同平臺(tái)的圖標(biāo)和控件樣式,也應(yīng)避免意義沖突。Android平臺(tái)對(duì)話框樣式的統(tǒng)一性問(wèn)題2.界面元素的兼容性刺激兼容性是指在不同場(chǎng)景、不同情境下的通用性。刺激的兼容性越好,學(xué)會(huì)的速度就越快、反應(yīng)時(shí)間越少、錯(cuò)誤越少、心理負(fù)荷越小?!龈拍罴嫒菪岳?,SOS、110、119這些縮寫(xiě),概念兼容性都是極好的。再比如,紅色表示停止、綠色表示通行和安全;選中使用“勾選”等等。■動(dòng)作兼容性順時(shí)值旋轉(zhuǎn)與數(shù)值增加有關(guān),如調(diào)節(jié)音量的旋鈕;指針往上調(diào)節(jié),表示數(shù)值增加,如溫度計(jì)刻度。在某款手機(jī)播放器中,調(diào)節(jié)音量采用上下鍵,本身符合動(dòng)作兼容性,但音量指示為左右方向,二者的心智模型發(fā)生沖突?!龇绞郊嫒菪訵ickens,Sandry,Vidulich(1983)的研究證實(shí),在言語(yǔ)任務(wù)中,刺激以聽(tīng)覺(jué)形式呈現(xiàn),以語(yǔ)言形式反應(yīng),反應(yīng)時(shí)間最快;在空間任務(wù)中,刺激以圖形呈現(xiàn),以動(dòng)作形式反應(yīng)時(shí),反應(yīng)時(shí)間最快。3.顏色的認(rèn)知加工■顏色與對(duì)比度人眼對(duì)顏色對(duì)比度的知覺(jué)受空間布局的影響。如下圖,兩幅圖的黑白顏色一樣,但前者色塊越大,對(duì)比度顯得也更大?!鲱伾c注意資源同一屏幕內(nèi),如果使用過(guò)多的色彩,會(huì)分散注意,使用戶無(wú)法快速找到目標(biāo)。■顏色性別差異Newcastle大學(xué)的神經(jīng)科學(xué)專家AnyaHurlbert的研究(2007)發(fā)現(xiàn),盡管被調(diào)查者都更喜歡藍(lán)色,但女性的選擇更靠近藍(lán)色譜系中偏粉紅色的一端。多項(xiàng)研究也得出了類似的結(jié)論(Silver,1988;Ellis&Ficek,2000)2003年,Hallock,Joe開(kāi)展了一項(xiàng)針對(duì)顏色偏好的專項(xiàng)調(diào)查(樣本量230),結(jié)果如下?!鲱伾哪挲g差異Adams,Russell研究發(fā)現(xiàn)兒童更喜歡波長(zhǎng)長(zhǎng)的顏色,例如紅色、黃色。年齡較大的女性比男性更喜歡黑色和紫色(Silver&Ferrante,1995)。Hemphill&Michael(1996)的研究也支持了這點(diǎn)。我國(guó)關(guān)于色彩偏好的研究也有此發(fā)現(xiàn)(陳立,1965)。Hallock,Joe的研究發(fā)現(xiàn),隨著年齡的增長(zhǎng),對(duì)藍(lán)色的喜好非常穩(wěn)定,越來(lái)越多的人不太喜歡橙色。■顏色與情緒色彩和情緒之間的關(guān)系與色彩偏好緊密相關(guān),而色彩偏好和某種色彩是否會(huì)引出積極或消極的情緒有關(guān)(Naz,K.,Helln,H.,2004)。Boyatzis和Varghese在1994年研究?jī)和纳是榫w聯(lián)系時(shí)發(fā)現(xiàn),兒童趨向把積極情緒(例如高興,強(qiáng)大)與亮顏色聯(lián)系(例如藍(lán)色、綠色),把消極情緒(例如悲傷、憤怒)與暗顏色聯(lián)系(例如黑色與灰色)。在一個(gè)對(duì)澳大利亞大學(xué)生的顏色情緒聯(lián)系的研究中,Hemphill(1996)也發(fā)現(xiàn)亮顏色主要引出積極的情緒聯(lián)想,而暗顏色主要引出的是消極的情緒聯(lián)想。Camgoz,N.,Yener,C.(2002)的研究發(fā)現(xiàn)顏色的色調(diào)、飽和度和明度三個(gè)屬性對(duì)色彩偏好有非常重要的影響。被試最偏愛(ài)的是飽和度和明度最大的組合,隨著明度和飽和度的增加,被試對(duì)顏色的喜好程度也隨之增加?!鲱伾奈幕町惒煌娜后w,顏色的文化內(nèi)含也有差異。如下圖,不同國(guó)家滅火器使用了不同的顏色,反映出顏色的文化差異。許多研究者和設(shè)計(jì)師都曾分析總結(jié)過(guò)不同國(guó)家的顏色內(nèi)涵。這些文化差異是我們?cè)O(shè)計(jì)過(guò)程中需要注意的,尤其是對(duì)于產(chǎn)品的國(guó)際版本。整理自《TheZenofCSSDesign:VisualEnlightenmentfortheWeb》■顏色錯(cuò)覺(jué)有關(guān)顏色的錯(cuò)覺(jué)有很多種,有的錯(cuò)覺(jué)現(xiàn)象是設(shè)計(jì)過(guò)程中需要避免的,而有的則可加以利用。這里僅作初步分析,舉例如下:避免紅藍(lán)重疊和紅綠重疊,因?yàn)檫@樣會(huì)引起視覺(jué)深度的錯(cuò)覺(jué)。如下圖,藍(lán)色色塊像是顯示在紅色的上方。背景顏色對(duì)目標(biāo)顏色的知覺(jué)會(huì)有影響。如下圖,左右相同顏色的X,但由于背景不同,知覺(jué)的色彩出現(xiàn)明顯差異。■色盲人群中色盲的發(fā)生率還是挺高的,男性為8%,女性為0.5%。在色盲人群眼中的世界,遠(yuǎn)沒(méi)有正常人看到的精彩。紅綠色盲的人可能會(huì)分不清交通紅綠燈的差異(如下圖)。我們?cè)诋a(chǎn)品設(shè)計(jì)過(guò)程中,也需要注意這一點(diǎn),盡量避免由于色盲原因而無(wú)法感知重要的變化信息。4.字體的視覺(jué)加工■字體粗細(xì)有研究者推薦,理想閱讀效果的字體粗細(xì)可設(shè)為:白底黑字1:6-1:8;黑底白字1:8-1:10。(注:1:6的意思是,筆劃粗細(xì)為1,文字高度為6)隨著亮度的下降,粗體字更容易被識(shí)別。如下圖所示,左側(cè)的文字較容易識(shí)別。在較低亮度或較低對(duì)比度的條件下,可使用粗一點(diǎn)的字體,如1:5;字體顏色很亮?xí)r,粗細(xì)可至1:12-1:20?!鑫淖趾偷咨诘装鬃郑淖值念伾珪?huì)向黑色背景散射,這稱為散射現(xiàn)象。如下圖,同樣粗細(xì)的字體,白顏色的字顯得比黑顏色的字更粗一些。由于紅色與藍(lán)色對(duì)比影響知覺(jué)的原因,應(yīng)避免紅字藍(lán)底或藍(lán)字紅底的情況出現(xiàn)(如下圖)。有設(shè)計(jì)師曾總結(jié)出符合良好知覺(jué)效果的文字底色對(duì)比方案,具體如下:■字母大小寫(xiě)研究表明,小寫(xiě)字母更容易辯認(rèn),因?yàn)樗奶卣鞲菀妆粎^(qū)別?!鑫淖中畔⒌恼J(rèn)知加工一段文字怎樣呈現(xiàn),才最容易閱讀?這不僅涉及到呈現(xiàn)的視覺(jué)效果,還跟行文風(fēng)格、句子結(jié)構(gòu)和內(nèi)容有關(guān)。研究表明,句子類型和文字順序都會(huì)影響文字加工的速度。句子類型:主動(dòng)句、肯定句,比否定句、被動(dòng)句更容易被理解文字順序:應(yīng)與動(dòng)作順序匹配,例如“先選1,后選2”的誤操作比“選2之前先選1”更小5.界面布局與認(rèn)知加工■信息密度對(duì)于相同信息容量的內(nèi)容,呈現(xiàn)的刺激密度越大,搜索時(shí)間越長(zhǎng),錯(cuò)誤率越高。如下圖,A的信息密度比B更大,信息搜索的難度也就更大。■信息組合如上圖,A只有一個(gè)組合,B有多個(gè)組合。有研究表明,當(dāng)一個(gè)組合的視角小于5度時(shí)(40CM視距,12-14個(gè)字,6-7行的高度),在組中搜索信息的時(shí)間較為固定,當(dāng)視角超過(guò)5度時(shí),搜索時(shí)間就顯著增加。因此,理想的頁(yè)面布局是,將信息設(shè)置為小于5度視角的多個(gè)組合,將最有利于用戶快速搜索信息?!鰪?fù)雜度有研究發(fā)現(xiàn),將文字按組塊豎排,復(fù)雜度比橫排更小,更易于搜索信息。如下圖:(當(dāng)然,圖B的局部密度也較小,組塊的視角也在5度左右)6.圖表與認(rèn)知加工一幅好的圖表比得上1000字的文字說(shuō)明。但需要注意所使用的圖表類型,避免引起誤解。舉例如下:看圖1,給人感覺(jué)隨著時(shí)間推進(jìn),A和B的差距越來(lái)越大,但圖2告訴我們并非如此;看圖3,給人感覺(jué)B約為A的3倍,C約為A的4倍,而圖4告訴我們并非如此。7.符號(hào)(圖標(biāo))一般來(lái)說(shuō),符號(hào)的表現(xiàn)力會(huì)比文字更好,因?yàn)樗恍枰?jīng)過(guò)語(yǔ)義加工,直接是視覺(jué)加工?!鲞x擇符號(hào)的標(biāo)準(zhǔn)1.可識(shí)別性:具體做法可以是,將符號(hào)呈現(xiàn)給用戶,請(qǐng)他說(shuō)出是什么;2.匹配:給定系列符號(hào)和解釋,要求將它們對(duì)應(yīng)起來(lái),記錄并分析所用的時(shí)間及錯(cuò)誤;3.偏好:詢問(wèn)用戶喜好程度和意見(jiàn)■如何檢驗(yàn)符號(hào)的好壞?方法1:再測(cè)法,即先對(duì)用戶進(jìn)行測(cè)試,看正確識(shí)別的比率有多高;過(guò)一段時(shí)間后,對(duì)相同用戶進(jìn)行再測(cè),看正確率的維持情況。如下圖,O表示original,R表示Retest,可以看出,第1個(gè)圖標(biāo)的再測(cè)正確率編低。方法2:反應(yīng)時(shí)法,即同時(shí)給用戶呈現(xiàn)(呈現(xiàn)時(shí)間很短)多個(gè)符號(hào)圖標(biāo),要求用戶以最快的速度判斷它的意義。反應(yīng)時(shí)最短、錯(cuò)誤率最低的圖標(biāo),為最理解的方案?!龇?hào)標(biāo)準(zhǔn)化如果需要在不同場(chǎng)景中使用同樣符號(hào),要保證符號(hào)的標(biāo)準(zhǔn)化,在各場(chǎng)景中的意義相同。轉(zhuǎn):TencentWSDBlog
幕思城為您更新最近最有用的電商資訊、電商規(guī)則電商攝影設(shè)計(jì),電商用戶體驗(yàn),電商用戶心理學(xué)電商營(yíng)銷引流。了解更多電商資訊、行業(yè)動(dòng)向,記得關(guān)注幕思城!
這個(gè)問(wèn)題還有疑問(wèn)的話,可以加幕.思.城火星老師免費(fèi)咨詢,微.信號(hào)是為: msc496。