你有沒有過這樣的經(jīng)歷:瀏覽網(wǎng)站時,甚至沒有完全集中注意力,突然之間,大腦還沒來得及反應(yīng),你就點擊了某個內(nèi)容?這并非巧合。這是設(shè)計心理學(xué)在引導(dǎo)你點擊。
可點擊的UI不僅僅是讓按鈕看起來像按鈕。它關(guān)乎理解你的大腦如何響應(yīng)視覺提示、層次結(jié)構(gòu)和交互模式。如果你曾經(jīng)好奇為什么有些UI讓人上癮,而有些卻像個殘酷的玩笑,那么這篇文章正適合你。
讓我們深入研究可點擊界面背后的心理學(xué),了解設(shè)計師每天在不知不覺中打破或掌握的實際規(guī)律和原則。
在設(shè)計語言中,“可供性”指的是物體的外觀如何暗示如何使用它。旋鈕看起來可以旋轉(zhuǎn)。按鈕看起來可以按下。漢堡菜單看起來……就像隱藏了真正的內(nèi)容。
重要性:用戶不應(yīng)該猜測什么是可交互的。它越像可以觸摸、拖動或點擊的東西,你的大腦就越會說:“沒錯,這就是一個東西。”
設(shè)計師是如何搞砸的:扁平化設(shè)計太過了。按鈕開始看起來像普通的文字,突然之間沒人知道該點擊什么了。如果它看起來像個標(biāo)簽,但實際上是一個行動號召,那么你就陷入了可用性的“犯罪現(xiàn)場”。
改進(jìn):使用視覺提示;陰影、對比度、懸停狀態(tài),使其清晰易懂。出于對 UI 的熱愛,除非你是為間諜設(shè)計,否則不要將鏈接隱藏在模糊的圖標(biāo)中。
希克定律說,你給某人的選擇越多,他們做決定的時間就越長,甚至可能放棄整個選擇。
重要性:想讓用戶點擊那個實用的 CTA 按鈕嗎?別把它埋沒在由 17 個同樣醒目的按鈕組成的菜單中。簡化。引導(dǎo)。精簡。
設(shè)計師是如何搞砸這一點的: “讓我們給用戶自由。”翻譯過來就是:“讓我們讓他們恐慌。”
改進(jìn):提供清晰的選擇。優(yōu)先考慮重要事項。采用漸進(jìn)式披露;現(xiàn)在顯示較少,以后顯示更多。
菲茨定律的基本意思是,點擊目標(biāo)的時間取決于目標(biāo)的大小和距離。簡而言之:大按鈕更容易點擊,而且不需要人們橫跨整個歐洲才能找到它們。
重要性:在巨型頁面的右上角放置微小鏈接?恭喜,你成功創(chuàng)建了一款令人困惑的游戲的用戶體驗版本。
設(shè)計師們是如何搞砸這一點的:把“下一步”按鈕放在離“后退”按鈕12英里遠(yuǎn)的地方。或者把主要的行動號召 (CTA) 藏在頁腳的某個地方,靠近版權(quán)符號。
改進(jìn):按鈕要足夠大,方便點擊,尤其是在移動設(shè)備上。將相關(guān)操作分組。確保重要信息觸手可及。
雅各布·尼爾森定律提醒我們,用戶期望你的網(wǎng)站能夠像他們之前使用過的其他網(wǎng)站一樣。熟悉并非偷懶的設(shè)計,而是良好的用戶體驗。
重要性:如果您的“添加到購物車”按鈕形狀像駱駝,人們就會跳轉(zhuǎn)。
設(shè)計師是如何搞砸的:試圖重新發(fā)明輪子。沒錯,你的團(tuán)隊想要與眾不同,但用戶不想每次訪問網(wǎng)站都要學(xué)習(xí)一門新的 UI 語言。
改進(jìn):使用常見模式。只有當(dāng)回報值得時才打破預(yù)期。你不是在設(shè)計藝術(shù),而是在設(shè)計功能。
人們對未完成的任務(wù)記憶比已完成的任務(wù)更深刻。這就是為什么如果你把衣服疊成一半,你會覺得很奇怪。
為什么重要:顯示進(jìn)度條、步驟或清單的用戶界面可以幫助用戶繼續(xù)前進(jìn)。“您已完成 80%”就像是激勵用戶投入的誘餌。
設(shè)計師是如何搞砸的:隱藏進(jìn)度。不顯示反饋。讓用戶猜測還剩多少。
使其變得更好:使用步驟、加載器、進(jìn)度環(huán)以及任何可以告訴用戶“嘿,你已經(jīng)接近成功”的東西。
人們會記住那些看起來與眾不同的東西。清單上那個奇怪的項目?它就是那個能留下深刻印象的。
重要性:想讓用戶點擊你的主要操作嗎?讓它在視覺上引人注目。顏色、大小、間距,都應(yīng)該傳達(dá)出“這就是重點”的信息。
設(shè)計師是如何搞砸的:把所有東西都做得大膽、明亮、龐大。如果所有東西都太吵鬧,就什么也聽不到了。
改進(jìn):選擇一件事情來突出。利用顏色對比來突出重點。但要有所選擇,只有重要的事情才能得到關(guān)注。
并非所有細(xì)節(jié)都會被記住。人們大多會回憶起體驗的高潮以及它是如何結(jié)束的。
重要性:順暢的結(jié)賬流程很棒,但如果最終確認(rèn)頁面看起來像 2004 年的錯誤消息,那么用戶就會記住它。
設(shè)計師是如何搞砸這一點的:雖然流程很順暢,但最后卻功虧一簣。或者在用戶即將完成操作時引入了阻力。
讓體驗更佳:結(jié)尾要有力度。讓最終的互動令人愉悅。一點動畫、一條貼心的提示,甚至一個微妙的聲音,都能留下美好的回憶。
如果你的用戶界面感覺像數(shù)學(xué)考試,用戶就會消失。保持簡潔,消除不必要的摩擦,不要讓短期記憶超負(fù)荷。
僅僅因為您可以在選項卡內(nèi)的模式中添加下拉菜單并不意味著您應(yīng)該這樣做。
UI 中的心理學(xué)并非空談。你可以將其融入到你的工作流程中。一個好的工具會很有幫助,尤其是如果你每天都在 Figma 上工作的話。
我一直在使用MadeinFigma,它是預(yù)先構(gòu)建的組件和流程的集合,已經(jīng)考慮了希克定律、馮·雷斯托夫定律,甚至是傳統(tǒng)的邏輯。
這就像在設(shè)計時肩上扛著一位小心理學(xué)家,但沒那么恐怖。
蘭亭妙微(www.devb.cn )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計、B端界面設(shè)計、桌面端界面設(shè)計、APP界面設(shè)計、圖標(biāo)定制、用戶體驗設(shè)計、交互設(shè)計、UI咨詢、高端網(wǎng)站設(shè)計、平面設(shè)計,以及相關(guān)的軟件開發(fā)服務(wù),咨詢電話:01063334945。我們建立了一個微信群,每天分享國內(nèi)外優(yōu)秀的設(shè)計,有興趣請加入一起學(xué)習(xí)成長,咨詢及進(jìn)群請加藍(lán)小助微信ben_lanlan。
藍(lán)藍(lán)設(shè)計的小編 http://www.devb.cn