5個(gè)實(shí)用技巧,提高按鈕轉(zhuǎn)化率

3 評(píng)論 6827 瀏覽 57 收藏 10 分鐘

文章介紹一些幫助用戶更好的操作的設(shè)計(jì)技巧,來(lái)通過簡(jiǎn)單的調(diào)整使得按鈕變得更加直觀有效。

“是能點(diǎn)還是不能點(diǎn)呢?”這是當(dāng)用戶在面對(duì)一些操作按鈕時(shí),大腦中所遲疑的問題。

按鈕越多,做決定的時(shí)間就越長(zhǎng)。用戶必須仔細(xì)看每個(gè)按鈕,才能確定哪個(gè)是他們需要的。對(duì)于按鈕的任何不確定性,都可能會(huì)導(dǎo)致他們不敢操作或誤操作。

設(shè)計(jì)師可以把按鈕的優(yōu)先級(jí)設(shè)計(jì)的更加直觀以減少這樣的情況發(fā)生。當(dāng)用戶注意到哪個(gè)按鈕與他們的任務(wù)目標(biāo)更契合時(shí),就能幫助他們快速做出決定。這篇文章就是介紹一些這樣的設(shè)計(jì)技巧,通過簡(jiǎn)單的調(diào)整使得按鈕變得更加直觀有效。

1. 根據(jù)閱讀習(xí)慣設(shè)計(jì)按鈕

在App中,一個(gè)常見錯(cuò)誤就是按鈕的排列順序偏離了用戶的閱讀習(xí)慣。他們將優(yōu)先級(jí)最高的按鈕放在最前面,期望用戶能首先注意到它。但其實(shí)只要按鈕足夠突出,視覺分量夠重,用戶就會(huì)注意到它,而無(wú)視它的排列順序。

按鈕順序不是為了提供可視性,而是為了要提高效率。在最前面放高優(yōu)先級(jí)的按鈕會(huì)導(dǎo)致用戶自上而下的閱讀習(xí)慣被打斷,看到按鈕后還會(huì)繼續(xù)閱讀下面的文字,然后再回過頭來(lái)找前面的按鈕進(jìn)行操作。

5個(gè)實(shí)用技巧,提高按鈕轉(zhuǎn)化率

不要讓用戶返回再次檢查按鈕,而是讓他們以自然的閱讀習(xí)慣看完所有的內(nèi)容后,按視覺比重快速進(jìn)行選擇。

通過將優(yōu)先級(jí)高的按鈕放在底部,讓它處于視覺阻力最小的路徑上,這使得這個(gè)按鈕可以更有效率的被點(diǎn)擊。此外,底部位置是手指最容易達(dá)到的區(qū)域,這進(jìn)一步提高了效率。

2. 區(qū)分帶形狀按鈕和純文字按鈕

App上的另一個(gè)錯(cuò)誤是只使用文字來(lái)表示按鈕。設(shè)計(jì)師使用文字按鈕來(lái)表示優(yōu)先級(jí)較低的操作,但是對(duì)于用戶來(lái)說(shuō),這是一個(gè)糟糕的選擇,因?yàn)榧兾谋緵]有一個(gè)按鈕的外觀,這可能導(dǎo)致用戶會(huì)忽略了這些操作。

5個(gè)實(shí)用技巧,提高按鈕轉(zhuǎn)化率

純文本按鈕會(huì)讓用戶遲疑到底是按鈕還是內(nèi)容,從而造成混淆,這種不確定性可能會(huì)導(dǎo)致他們直接跳過這些按鈕。

純文本按鈕不僅讓人感到疑惑,在操作上也不容易點(diǎn)擊。將文本內(nèi)容放在按鈕框中,可以使得按鈕更容易被點(diǎn)擊和注意到。

與純文本相比,描邊形式的按鈕是降低優(yōu)先級(jí)的更好方法。它們使每個(gè)選項(xiàng)都易于識(shí)別,以便用戶能選擇他們所期望的目標(biāo)。

3. 為主要按鈕加上顏色

高優(yōu)先級(jí)的按鈕應(yīng)該是最容易被識(shí)別到的,它是直接指向用戶最需要的目標(biāo)操作。如果不確定優(yōu)先級(jí),請(qǐng)考慮哪些操作會(huì)使得用戶朝著目標(biāo)前進(jìn),哪些操作會(huì)使得用戶回退。

5個(gè)實(shí)用技巧,提高按鈕轉(zhuǎn)化率

在這個(gè)例子中,“付款”具有更高的優(yōu)先級(jí),因?yàn)樗槕?yīng)著用戶的目標(biāo)流程。但不大清楚“查看購(gòu)物車”還是“繼續(xù)購(gòu)買”的優(yōu)先級(jí)是如何。

“查看購(gòu)物車”操作讓用戶查看已經(jīng)在購(gòu)物車的商品,然后繼續(xù)結(jié)賬?!袄^續(xù)購(gòu)物”操作將用戶帶回到遠(yuǎn)離結(jié)賬的產(chǎn)品頁(yè)面。

通過思考這些操作,可以清楚的看到“查看購(gòu)物車”具有中等優(yōu)先級(jí),而“繼續(xù)購(gòu)物”具有較低的優(yōu)先級(jí)。判斷的理由是哪些操作使用戶朝著他們的目標(biāo)前進(jìn),哪些操作使他們遠(yuǎn)離目標(biāo)。

前進(jìn)的操作總是會(huì)比回退的操作優(yōu)先級(jí)更高,因此,它們應(yīng)該被設(shè)計(jì)地有更強(qiáng)的視覺重量和更高的顏色對(duì)比度。

5個(gè)實(shí)用技巧,提高按鈕轉(zhuǎn)化率

顏色是一種增加按鈕權(quán)重的有效方法,因?yàn)樗鼜奈谋绢伾忻摲f而出,吸引了用戶的注意力。當(dāng)按鈕的顏色與文本的顏色相同時(shí),提示性就沒有那么強(qiáng)了。為優(yōu)先級(jí)更高的按鈕使用不同的顏色來(lái)輔助用戶進(jìn)行快速?zèng)Q策。

5個(gè)實(shí)用技巧,提高按鈕轉(zhuǎn)化率

如果對(duì)每個(gè)不同優(yōu)先級(jí)按鈕使用相同的顏色,用戶將不知道哪個(gè)優(yōu)先級(jí)更高。而使用不同的顏色只會(huì)讓用戶更加困惑,不知道這些顏色到底意味著什么。不僅如此,每個(gè)按鈕使用不同顏色,還會(huì)讓視覺權(quán)重重新變得一樣。

秘訣就在于使用相同的色相顏色,但改變飽和度和亮度就能改變這個(gè)按鈕的優(yōu)先級(jí)了,使得它比高優(yōu)先級(jí)的按鈕更輕?,F(xiàn)在按鈕的視覺比重有了區(qū)分,一下子就變得清晰了很多。

為了增加對(duì)比度,可以使用反色。在主按鈕的深色背景上使用淺色文本,而在中等優(yōu)先級(jí)按鈕上使用淺色文本。這樣就使得高優(yōu)先級(jí)的按鈕具有最亮的文本和最強(qiáng)的對(duì)比度。

4. 改變文本的粗細(xì)

用之前說(shuō)的幾個(gè)方法,已經(jīng)足以區(qū)分優(yōu)先級(jí),但還可以做的更好。每個(gè)按鈕設(shè)計(jì)的越直觀,讓用戶的思考就越少。

5個(gè)實(shí)用技巧,提高按鈕轉(zhuǎn)化率

在每個(gè)按鈕文本上使用相同的粗細(xì)以表示相同的重量,最好根據(jù)優(yōu)先級(jí)不同去強(qiáng)調(diào)不同的文本。嘗試改變文本的粗細(xì),優(yōu)先級(jí)越高的按鈕使用最粗體,而優(yōu)先級(jí)最低的文本則不加粗,這樣,按鈕文本也有了不同的優(yōu)先級(jí),用戶在閱讀這些文字內(nèi)容的時(shí)候就能感知到。

在這個(gè)例子中,我把“付款”這個(gè)按鈕文字使用了粗體,使它變得更加醒目和明亮?!安榭促?gòu)物車”使用了半粗體,“繼續(xù)購(gòu)物”使用了中等。所以,按鈕文本此時(shí)也有了一定的視覺權(quán)重?!安榭促?gòu)物車”中的“3項(xiàng)”沒有加粗,因?yàn)樗茄a(bǔ)充信息,不代表具體的操作。

5. 給高優(yōu)先級(jí)的按鈕增加圖標(biāo)

最后一個(gè)技巧是一種更加全面的思考,它將使按鈕可供盲人使用。色盲的人是無(wú)法通過顏色來(lái)區(qū)分按鈕的視覺重量的,他們還需要清晰的視覺符號(hào)。

5個(gè)實(shí)用技巧,提高按鈕轉(zhuǎn)化率

給高優(yōu)先級(jí)的按鈕加上一個(gè)圖標(biāo)能夠起到強(qiáng)調(diào)作用而與其他按鈕區(qū)分開。當(dāng)用戶瀏覽時(shí),他們往往更關(guān)注視覺元素而不是文本。使用圖標(biāo)按鈕的方式能夠確保引起用戶足夠的注意力,而快速選擇到高優(yōu)先級(jí)的按鈕。

如果刪除了顏色和外框,用戶仍然能夠識(shí)別付款按鈕,圖標(biāo)與文本一樣,也能夠起到說(shuō)明的作用。

你的按鈕設(shè)計(jì)的直觀嗎?

如果用戶要花很長(zhǎng)時(shí)間在操作按鈕上,或者按鈕的點(diǎn)擊率很低,那就可能是按鈕設(shè)計(jì)的不夠直觀。如果遇到了這樣的情況,請(qǐng)嘗試使用文中所說(shuō)的這些技巧來(lái)優(yōu)化操作按鈕,或許你將會(huì)在前后版本中看到非常大的差異。

5個(gè)實(shí)用技巧,提高按鈕轉(zhuǎn)化率

 

原文:https://medium.com/@uxmovement/5-techniques-to-make-mobile-call-to-action-buttons-intuitive-a4d0bb49b212

作者:UX Movement

譯者:彩云Sky,公眾號(hào):彩云譯設(shè)計(jì)

本文由 @彩云Sky 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載

題圖來(lái)自Unsplash,基于CC0協(xié)議

更多精彩內(nèi)容,請(qǐng)關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號(hào)或下載App
評(píng)論
評(píng)論請(qǐng)登錄
  1. 畫圖很形象的說(shuō)明

    來(lái)自廣東 回復(fù)
  2. 不錯(cuò)

    來(lái)自北京 回復(fù)
  3. 總結(jié)的挺好的

    來(lái)自廣東 回復(fù)