成功網(wǎng)頁設(shè)計背后的心理
作為設(shè)計師,我們首先是用戶的擁護者。
在用戶遇到我們的設(shè)計之前,我們需要了解他們想要什么和需要什么。一旦他們遇到它,他們必須首先感到安全和舒適。這有時與我們對創(chuàng)新的渴望形成反差——這就是為什么我們必須將這種渴望與用戶目標結(jié)合起來。
要做到這一點,我們需要了解用戶的大腦是如何工作的——他們創(chuàng)建的幫助他們?yōu)g覽網(wǎng)絡(luò)的心智模型。這種理解為我們提供了一個平臺來進行創(chuàng)作,這個過程被稱為神經(jīng)設(shè)計(neurodesign, 2012年推出)。
通過仔細的研究和可用性測試,我們可以更好地了解當用戶或客戶面對一個好的(或壞的)體驗時,他們的大腦是如何運作的。我們可以利用這些知識來創(chuàng)造更好的體驗。
在這篇文章中,我將解釋如何利用模式進行更好的Web設(shè)計,以及何時打破這些模式才能給用戶留下持久的印象。
模式識別是一個認知過程,在這個過程中,我們看到一個刺激物,并試圖將它與我們已知的相匹配。
這是我們用來解決問題的一種啟發(fā)式或捷徑。啟發(fā)法構(gòu)成了Gerd Gigerenzer最初所說的“適應性工具箱”——在時間、資源或信息有限的情況下,我們用來做出決策的一組規(guī)則。
圖片來源:Vinoth Chandar。知識共享。
如果一種情況對我們來說是新的,我們會打開adaptive toolbox看看我們以前是否遇到過類似的情況。
作為用戶和設(shè)計師,我們通過與網(wǎng)絡(luò)的交互學習各種模式。因此,當我們與網(wǎng)絡(luò)互動時,我們試圖將我們所看到的與我們已知的相匹配——例如,如果我們在一家商店中尋找特定的商品,之前的經(jīng)驗告訴我們,我們可以(也應該)能夠以一種非常特定的方式搜索它。
這種認知和學習使我們能夠使用啟發(fā)式快速有效地瀏覽網(wǎng)絡(luò),而不是每次都從頭開始思考交互。我們尋找過去通過最小化時間和最大化回報而成功的互動模式。如果我們找不到這些模式,我們通常會尋找另一頁可以提供熟悉和方便的內(nèi)容。
這些捷徑有時確實會讓我們誤入歧途,但它們往往奏效。正如Web UI最佳實踐中所解釋的,如果您希望您的網(wǎng)站成功,您必須非常熟悉這些模式和期望。
設(shè)計模式是一種記錄設(shè)計問題的通用解決方案的方法。
這里有許多優(yōu)秀的模式庫——ui模式,Yahoo的模式庫,和PatternTap等等,但這里有一些常見的設(shè)計和用戶界面模式的例子,以及它們解決的問題:
漢堡菜單:這段時間備受爭議,人們開始質(zhì)疑這到底是一種設(shè)計模式,還是一種糟糕的設(shè)計。無論如何,它無處不在,允許移動設(shè)備上有更多的空間。
在Web UI模式中可以找到更多的UI模式示例,其中包括63種以問題/解決方案格式描述的有用模式。
這就是我們可以開始使用這些神經(jīng)科學基礎(chǔ)知識使我們的工作更容易(或更復雜,取決于你怎么看它)的地方。我們還必須記住,用戶對網(wǎng)絡(luò)的感知與創(chuàng)建網(wǎng)絡(luò)的人是不同的。
當我們?yōu)閃eb構(gòu)建時,我們會在發(fā)現(xiàn)各種設(shè)計問題的過程中使用設(shè)計模式。我們經(jīng)常從下到上進行這樣的旅行:我們從我們面前的問題和它的各種元素開始,然后嘗試創(chuàng)造一個有凝聚力的體驗。當我們將接口分解為原子組件時,我們將自己沉浸在子問題、目標、任務以及信息架構(gòu)和流中。
這就是為什么過了一段時間,我們就會對設(shè)計中的問題視而不見——我們不能把它看作一個整體。
但正如我在“使用模式設(shè)計更好的用戶體驗”一文中所描述的,用戶不會以這種方式與界面交互。他們是自上而下的。
用戶看到的不是部分,而是它們的總和,并使用對規(guī)則的先驗知識來指導他們的交互。他們在我們所建立的模式中尋找與過去類似產(chǎn)品或網(wǎng)站的經(jīng)驗相匹配的模式(稱為外部一致性),以幫助他們?yōu)g覽得更快。這種處理方法是快速的,但有時是錯誤的-特別是當接口在某種程度上偏離了現(xiàn)狀。
因此,我們應該確保網(wǎng)站的界面符合用戶的期望,也符合網(wǎng)站本身。例如,如果您選擇一個cards UI模式,由于該模式非常流行,大多數(shù)用戶知道如何導航內(nèi)容。為了防止混淆,您還必須在整個站點中一致地實現(xiàn)該模式。
我們的工作是引導用戶,使這個過程盡可能簡單和令人滿意,并確保他們在我們的界面中識別出足夠的模式,讓他們感到舒適。外部一致性(與競爭對手或其他網(wǎng)站相似)并不總是必要的,但是內(nèi)部一致性——產(chǎn)品內(nèi)部的一致性——是最重要的。
您將建立用戶的信心、信任和安全。
用戶對每次交互都有一個期望,不管交互是多么平常。
每一次眼睛對內(nèi)容的輕彈,每一次鼠標的點擊,每一次按鍵的按下——所有這些都是由以前的經(jīng)驗和交互指導的,用戶將期望從每一次操作中得到一定的結(jié)果。我們喜歡圖案——它們讓我們感到安全和快樂。
這種快樂發(fā)生在神經(jīng)化學水平上。每次我們成功地識別出一種模式,我們就會得到一股多巴胺——一種與快樂和獎勵有關(guān)的神經(jīng)化學物質(zhì)。然后,當相互作用成功時,我們又得到一次顛簸。
當某些東西是“直覺的”時,這本質(zhì)上意味著一個模式已經(jīng)被遵循,并且用戶的期望已經(jīng)被滿足——當他們看到一個模式時,他們會很高興,當模式按照預期運行時,他們也會很高興。然而,如果這種模式被打破,多巴胺就不會出現(xiàn),我們就會感到不滿足。當然,用戶會將這種不滿與站點或產(chǎn)品聯(lián)系起來。
除了模式,我們還需要了解與之相關(guān)的期望,以便最大化多巴胺和最小化不滿。我們想給人們他們想要和期待的東西。
但我們也想成為創(chuàng)新者和創(chuàng)造者——畢竟,很少有客戶來找我們要求一個“符合期望”的網(wǎng)站,或者看起來像他們的競爭對手。這是一個艱難的平衡,但我們并沒有失去一切——我們只是需要更深入地挖掘。
在我們對創(chuàng)新的渴望中,我們希望開發(fā)新的、新穎的做事方式。然而,我們的嘗試也會疏遠用戶。
例如,在我的博客中,我提到了Ello的設(shè)計,這是一個旨在最小化和創(chuàng)新的社交網(wǎng)絡(luò),但卻打破了太多的模式。
例如,一個按鈕應該看起來是可點擊的。如果他們沒有,最好有一個很好的理由(以及讓用戶學習的方法)。每次我們打破一種模式時,我們都想確保我們在問自己幾個困難的問題:
這些都不是容易回答的問題,所以在決定打破一種既定的模式之前要好好想想——這樣做值得嗎?
當然,我們不應該放棄所有的創(chuàng)新,只堅持我們所知道的——設(shè)計模式并不是一切。它們只是你自己創(chuàng)造力分層的基線。人們有能力學習和識別新的模式,特別是當這些模式帶來回報的時候。
例如,考慮一下我們剛剛討論的多巴胺獎勵系統(tǒng)。我們提到,如果用戶期望得到獎勵并得到了獎勵,這就滿足了期望。如果他們期望得到回報卻沒有得到,這就會滋生不滿。
圖片來源:交互設(shè)計最佳實踐
但是,如果他們不期待獎勵呢?更好的是,如果他們不期待獎勵,但我們給了他們獎勵呢?
是的,我們打破了一種模式,但我們可以在用戶不需要的地方這樣做,我們可以贏得他們。我們可以通過在用戶不期望的情況下給予獎勵來強化新的模式,從而強化新的互動方式。在我們看來,這快樂的一刻是創(chuàng)新的關(guān)鍵,是成功打破常規(guī)和現(xiàn)狀的關(guān)鍵。
圖片來源:MailChimp的
當然,在用戶沒有預料到的情況下,我們很難找到讓他們高興的機會——畢竟,如果用戶還沒有意識到,我們怎么能知道他們什么時候會特別高興呢?這就是測試的用武之地。
我們能找到何時打破哪種模式的唯一方法就是去嘗試,去實驗,看看結(jié)果。
這些實驗都是以經(jīng)過深思熟慮、構(gòu)思良好的用戶測試的形式進行的。我們需要意識到我們試圖打破的模式,以及用戶如何看待它,為什么我們試圖打破它,以及如何打破它。有了原型,我們可以嚴格地控制和測試模式本身,即使用戶沒有意識到這種控制。
圖片來源:快速原型通過UXPin
例如,在UXPin中,我們可以使用現(xiàn)有的UI庫創(chuàng)建一個快速原型。然后,我們可以通過啟動遠程可用性測試會話來驗證這些模式(以及總體設(shè)計功能)的有效性。寫下核心任務,邀請用戶,然后開始體驗真實時刻。
原型設(shè)計(和測試)之所以如此有用,是因為人們常常無法清楚地表達自己的需求。用戶測試允許他們向我們展示。用戶行為正常,而我們觀察和傾聽他們的反應。
下面是一個改進現(xiàn)有web模式的示例流程:
沒有必要太過努力——當用戶期望得到獎勵時,我們應該給他們一個獎勵(或者至少提供一個不這樣做的絕佳理由)。然而,我們當然可以探索打破模式的機會,創(chuàng)造新的令人愉快的互動方式。
當談到改進舊模式時;研究潛在的問題,問問為什么這種模式如此有用。正如世界著名設(shè)計師杰弗里·澤爾德曼曾經(jīng)說過的那樣,考慮打敗了模式。以前成功的設(shè)計模式,如果不加以考慮,只會損害你的網(wǎng)站。
亨利·福特曾說過一句可能被過度使用到陳詞濫調(diào)的名言:“如果我問我的客戶他們想要什么,他們會說是一匹更快的馬。”
說到網(wǎng)頁設(shè)計,我們可以也應該以一種經(jīng)過深思熟慮的方式遵循模式。因為各種各樣的理由,它非常好,而且經(jīng)常是人們的首選。畢竟,我們接受這種模式是有原因的。
但當我們不努力創(chuàng)新,只堅持模式時,我們只是在打造更快的馬。
免費的電子書Web UI設(shè)計最佳實踐包括更多關(guān)于模式和其他技術(shù)的建議。這本109頁的電子書包括了一些實踐技巧,這些技巧是基于對30多家公司案例的分析。
免責聲明:本文由用戶上傳,與本網(wǎng)站立場無關(guān)。財經(jīng)信息僅供讀者參考,并不構(gòu)成投資建議。投資者據(jù)此操作,風險自擔。 如有侵權(quán)請聯(lián)系刪除!
-
安徽淮南長安獵手K50作為一款備受關(guān)注的皮卡車型,其2025款在配置和性能上都有所升級。對于想要購買這款車的消...瀏覽全文>>
-
安徽阜陽的大眾高爾夫GTI作為一款備受年輕消費者喜愛的性能車型,其價格和配置一直是大家關(guān)注的重點。高爾夫GT...瀏覽全文>>
-
近年來,新能源汽車市場發(fā)展迅猛,大眾品牌憑借其深厚的技術(shù)積累和可靠的產(chǎn)品品質(zhì),在國內(nèi)市場上占據(jù)了重要地...瀏覽全文>>
-
QQ多米作為一款備受關(guān)注的小型車,憑借其時尚的外觀設(shè)計和實用的配置,吸引了眾多消費者的關(guān)注。為了幫助大家...瀏覽全文>>
-
隨著新能源汽車市場的持續(xù)升溫,上汽大眾ID 6 X憑借其寬敞的7座空間和出色的續(xù)航能力,成為不少家庭用戶的關(guān)...瀏覽全文>>
-
淮南途銳新能源2024款車型以其卓越的性能和環(huán)保特性吸引了眾多消費者的關(guān)注。作為一款高端插電式混合動力SUV,...瀏覽全文>>
-
近年來,隨著新能源汽車的普及和政策支持的不斷加大,越來越多消費者將目光投向了插電混動車型。作為一款備受...瀏覽全文>>
-
2025款生活家PHEV作為一款備受關(guān)注的新能源車型,憑借其出色的性能和環(huán)保特性,吸引了眾多消費者的目光。在購...瀏覽全文>>
-
長安汽車旗下高端新能源品牌——啟源,在2024款新車的推出中再次吸引了廣泛關(guān)注。作為該品牌的旗艦車型之一,...瀏覽全文>>
-
近年來,新能源汽車市場持續(xù)火熱,各大品牌紛紛推出新款車型以滿足消費者需求。在眾多選擇中,2025款安徽池州I...瀏覽全文>>
- iPhone用戶現(xiàn)在可以通過iOS18.1更新更改其Apple帳戶的主要電子郵件地址
- 當你看到T-Mobile用戶贏得手機手表和耳機時你會羨慕不已
- Ubuntu24.10OracularOriole推出最新內(nèi)核工具鏈GNOME47和增強的安全性
- 搭載M4的MacBookPro在Cinebench上擊敗了CoreUltra9288V和Ryzen9AI370HX
- EarFun推出功能強大的159美元UBoomX便攜式揚聲器
- iPhone16Pro iPhone16ProMax表現(xiàn)優(yōu)于基本機型扭轉(zhuǎn)了之前的趨勢
- Waze迎來魔獸世界改版
- SquareEnix將心愛的RPG移植到MetaQuest3
- 蘋果正在設(shè)計全新操作系統(tǒng)瞄準新類別的產(chǎn)品
- 小米RedmiA27U顯示器采用4K面板和90WUSBC端口
- QQ多米落地價,各配置車型售價一目了然
- 生活家PHEV多少錢?購車攻略在此
- 現(xiàn)代伊蘭特試駕,暢享豪華駕乘,體驗卓越性能
- 試駕領(lǐng)克03,從預約到試駕的完美旅程
- QQ多米最新價格2025款,各配置車型售價全揭曉,性價比之王
- 淮北途觀L多少錢 2025款落地價,價格再創(chuàng)新低,性價比爆棚
- 山東濟南帕薩特新能源新款價格2025款多少錢?最低售價17.715萬起,性價比大揭秘
- SWM斯威G01FF新款價格2024款多少錢?看完這篇購車攻略再做決定
- 淮南ID.4 X價格,最低售價13.9888萬起,價格再創(chuàng)新低
- 滁州途鎧多少錢 2023款落地價與配置的完美平衡
- 蘋果將為iPhone17系列采用新電池技術(shù)
- Adobe推出PhotoshopElements和PremiereElements2025取消Elements軟件的永久許可
- AppleiPhoneSE4將配備更新的OLED顯示屏
- InfinixZeroFlip首次亮相作為新款可折疊Android智能手機其價格低于摩托羅拉Razr2024
- OnePlus13型號 充電規(guī)格在最新泄漏中被登記
- Insta360AcePro2主要規(guī)格終于泄露GoPro和DJI運動相機競爭對手將配備50MP傳感器5nm和2倍數(shù)碼變焦
- XboxElite無線控制器系列2通過Xbox設(shè)計實驗室獲得透明面板
- 索尼INZONEM10S華碩ROGSwiftOLEDPG27AQDP新品上市但售價更高
- 谷歌終止PixelBuds的點擊通知功能
- 谷歌正在努力完善iOS中缺少的RCS支持重要功能
- 對AppleIntelligence功能的評價從一般到還可以
- GalaxyS25Plus看起來很時髦但三星是否選擇像iPhone一樣的通用設(shè)計
- 優(yōu)質(zhì)48英寸三星S90DOLED電視在亞馬遜上降至歷史最低價同時贈送100美元Xbox禮品卡和1年保護計劃
- AOC推出四款新型游戲顯示器具有快速刷新率和低價格
- Valve出售部分SteamDeck型號-GBLCD型號售價296.65美元512GBLCD型號售價336.75美元
- Beats在其產(chǎn)品線中增加了手機保護殼推出適用于iPhone16系列的MagSafe保護殼
- 三星在IFA2024上展示AI產(chǎn)品
- 新的AIPlaygroundDesign工具你可以簡單地與之交談就像ChatGPT一樣
- 極簡主義Linux發(fā)行版Peropesis2.7附帶存檔和ISO管理工具
- GAMEBABY控制器和外殼混合套裝現(xiàn)已接受預訂