按鈕都設(shè)計(jì)不好,你還指望用戶點(diǎn)擊?

0 評(píng)論 19158 瀏覽 9 收藏 10 分鐘

Call to action(行為召喚)按鈕以其易于識(shí)別和理解的特性,能對(duì)你客戶產(chǎn)品的用戶轉(zhuǎn)化率產(chǎn)生極大影響。當(dāng)你在設(shè)計(jì)這些按鈕時(shí),有必要考慮許多因素,包括顏色、對(duì)比度、按鈕文字,甚至包括是否在按鈕旁設(shè)置方向引導(dǎo)信號(hào)。

簡(jiǎn)言之,對(duì)于這種在你網(wǎng)頁中只占用極小面積的元素,你絕對(duì)是需要投入并不成正比的時(shí)間來思考將如何將其最好地呈現(xiàn)給你的用戶。沒錯(cuò),call to action按鈕就這么重要。拂去浮華,他們就是頁面之星,無論他們旨在引導(dǎo)網(wǎng)站訪客進(jìn)行購物、注冊(cè)還是僅僅只是點(diǎn)擊。

他們代表了你頁面的目的所在——每一個(gè)頁面都得有個(gè)目的。以登錄頁為例,它的目的就是引導(dǎo)用戶點(diǎn)擊至主產(chǎn)品或主服務(wù)頁面。一個(gè)設(shè)計(jì)過的明智的按鈕必定深度考慮過用戶需要如何購買或注冊(cè)某一產(chǎn)品,這也是每一個(gè)設(shè)計(jì)師極致追求的結(jié)果。

方向引導(dǎo)

作為人類,我們天生就對(duì)眼神方向產(chǎn)生心理反應(yīng)并以此作為有效的引導(dǎo)方式。試想一下:當(dāng)你看見一個(gè)人正在注視著某一你看不見的區(qū)域的時(shí)候,你會(huì)不自覺地感到好奇他正在看什么。這一“方向引導(dǎo)信號(hào)”的原理也同樣無縫適用于你為客戶打造的網(wǎng)站。

是的,方向引導(dǎo)信號(hào)可以是明顯得無與倫比的大箭頭,甚至是直接戳在你call to action按鈕上的幾根手指,只是為了你網(wǎng)站訪客的某種共鳴和獨(dú)特的體驗(yàn),你應(yīng)該換一張某人望向你call to action按鈕的照片試試,應(yīng)該不會(huì)有錯(cuò)。

為了更清晰地表述這一點(diǎn),讓我們打開Salesforce的首頁。Salesforce是一個(gè)來自美國舊金山的全球性的云計(jì)算公司。值得一提的是,你可以掃視一下他們首頁的這張頁頭大圖——看起來一位女性注視著她的智能手機(jī),正要進(jìn)行一項(xiàng)手機(jī)操作。

這肯定只是一種貌似真實(shí)的推測(cè),但這圖片還兼顧了另一職能:隱秘而偉大的“方向引導(dǎo)信號(hào)”。當(dāng)網(wǎng)站訪客看到圖中女性凝視她手中的智能手機(jī)時(shí),他們的眼睛也會(huì)自然而然地隨著她地目光望向頁面地右側(cè)。如此一來,他們地目光不可避免地落在了三個(gè)位于她臉與手一側(cè)的call to action按鈕之上。

拜賜于她目光的指向,用戶將更有可能注意到這些call to action按鈕。當(dāng)一天結(jié)束,這一設(shè)計(jì)為該網(wǎng)站帶來了更多的用戶轉(zhuǎn)化和更高額的銷售數(shù)字。

極簡(jiǎn)的按鈕設(shè)計(jì)

當(dāng)你將按鈕設(shè)計(jì)得盡量簡(jiǎn)潔的時(shí)候,你需要消除網(wǎng)站訪客、買者和讀者將會(huì)迷惑的可能性。如果他們感到迷惑,他們通常就不會(huì)再按照你所希望的那樣來點(diǎn)擊按鈕了。所以,保持用戶按鈕設(shè)計(jì)的極簡(jiǎn)化是所有網(wǎng)頁設(shè)計(jì)師的目標(biāo)。

讓我們看看Twining的網(wǎng)站是如何用品牌設(shè)計(jì)來做到這一點(diǎn)的。

1430269592202

在這一首頁上,我們可以看到一些用到了品牌顏色的簡(jiǎn)單按鈕,他們簡(jiǎn)單明了地傳達(dá)了用戶在點(diǎn)擊之后可以達(dá)成的目的。這些按鈕看起來也是個(gè)按鈕的樣子,這歸功于他們的圓角矩形設(shè)計(jì),并且金底黑字的明確對(duì)比讓他們達(dá)到了極簡(jiǎn)設(shè)計(jì)。

簡(jiǎn)言之,Twining網(wǎng)站的購物者會(huì)誤解這些call to action按鈕功能的可能性將是幾乎為0。

明確的提示短語

“提示短語”是call to action的明星,因?yàn)樗褂昧诵袨閷?dǎo)向動(dòng)詞來引導(dǎo)人們的行動(dòng)。網(wǎng)頁設(shè)計(jì)師為按鈕設(shè)置智能標(biāo)簽的真正價(jià)值是十分有限的,因此提示短語一定要簡(jiǎn)短且直指重點(diǎn)。提示短語的首要目的就是讓網(wǎng)站訪客清楚地明白他們將要點(diǎn)擊是什么,因?yàn)檫@才不會(huì)浪費(fèi)大家的時(shí)間。

有時(shí),提示短語會(huì)很不幸地被忽視掉。不管有多少關(guān)注度被集中在按鈕的設(shè)計(jì)、顏色和功能性上,提示短語也不該輕視。一個(gè)網(wǎng)站,提示短語有多糟,用戶轉(zhuǎn)化率就有多糟。

你知道當(dāng)你有彼此相鄰而目的不一的call to action按鈕時(shí),只有成功設(shè)計(jì)的提示短語能讓你的訪客能立刻說出這些按鈕的主旨分別是什么。

1430269600990

在 J. Crew的這頁銷售寬角領(lǐng)襯衫的產(chǎn)品頁中可以找到這一有力說明。這里有兩個(gè)按鈕同時(shí)吸引買者的注意力:“Add To Bag”和“Add To Wishlist”按鈕。

因?yàn)檫@兩者都被十分清晰的短語標(biāo)注了,因此買者才不會(huì)感到困惑并能明確無誤地達(dá)成他們的目的。明確的按鈕提示短語總能讓用戶的行為直達(dá)目標(biāo),毫無壓力,它們是這件事永遠(yuǎn)的贏家。

顏色對(duì)比

線上買家是一個(gè)不靠譜的群體,這也是為何需要為他們量身定制用戶體驗(yàn)設(shè)計(jì)。換言之,從你客戶的電子商務(wù)網(wǎng)站中買點(diǎn)啥應(yīng)該是地球上最簡(jiǎn)單最清晰的事情。一些類似于最基礎(chǔ)的顏色對(duì)比設(shè)計(jì)能極大地為網(wǎng)站訪客提高用戶體驗(yàn)。

顏色對(duì)比設(shè)計(jì)能吸引你線上買家的眼球到call to action按鈕上并讓它們從一片喧囂的頁面背景中脫穎而出。當(dāng)買家們能簡(jiǎn)單地分辨出在哪兒點(diǎn)擊下單時(shí),顯而易見,網(wǎng)站的轉(zhuǎn)化率將一路飆升。

1430269610148

在Target的Sony DVD播放器產(chǎn)品頁面中,call to action按鈕“add to cart”和“find in a store”就使用了顏色對(duì)比設(shè)計(jì),帶來了出色的效果。不光光是因?yàn)轭伾珜?duì)比更好分辨——分別有紅底白字、藍(lán)底白字,它的成功之處還在于將買家們的注意力拉到了按鈕之上。事實(shí)是,頁面背景中大量的留白讓這種對(duì)比色設(shè)計(jì)跳脫得更淋漓盡致。

根本問題

Call to action按鈕是你客戶的網(wǎng)站能賺多少錢的制勝法寶。所有的網(wǎng)頁設(shè)計(jì)師需要意識(shí)到自己的設(shè)計(jì)目標(biāo)是應(yīng)當(dāng)帶來更多轉(zhuǎn)化率。對(duì)于電子商務(wù)網(wǎng)站,轉(zhuǎn)化率可能來自“Sale”(特賣)活動(dòng);對(duì)于新聞網(wǎng)站,可能是某事件(如簡(jiǎn)訊)的簽到率,或是“l(fā)ike”(喜歡)按鈕。關(guān)鍵是,轉(zhuǎn)化率才是最關(guān)鍵的,所以call to action按鈕必須始終以此為重中之重。

這也是為何在call to action 按鈕的設(shè)計(jì)上需要投入大量的深度思考。盡管它們?cè)陧撁嬷姓娴闹徽加昧藰O小的空間,但其重要性卻是不可估量的。任何有關(guān)按鈕的細(xì)節(jié),從顏色、短語到其周遭的引導(dǎo)提示,都將帶來或破壞其有效性。

為了更好地為客戶著想,設(shè)計(jì)師有必要不光是專注在這些按鈕的外觀或版式設(shè)計(jì)上,而是需在事物實(shí)用性的一面看得更深一些:這些設(shè)計(jì)過的按鈕會(huì)增加游客點(diǎn)擊的可能性并轉(zhuǎn)化為實(shí)質(zhì)操作嗎?為客戶設(shè)身處地著想的設(shè)計(jì)師應(yīng)當(dāng)是被推崇備至的,而那些沒能考慮更深的設(shè)計(jì)師,則需要在每一設(shè)計(jì)項(xiàng)目中盡力滿足客戶需求的同時(shí),改善自己的優(yōu)先考慮順序。

 

作者 | Marc Schenker

翻譯 | 郭瑽

來源:特贊Tezign

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 目前還沒評(píng)論,等你發(fā)揮!