三個小技巧,輕松提高設(shè)計轉(zhuǎn)化率

6 評論 10264 瀏覽 43 收藏 12 分鐘

編輯導(dǎo)語:頁面轉(zhuǎn)化率低?用戶留存少?如何快速傳達(dá),通過塑造視覺焦點、前置思考、米勒定律三個小技巧,教你輕松提高設(shè)計轉(zhuǎn)化率,對用戶體驗設(shè)計感興趣的看過來,看完你就明白為什么了。

影響APP轉(zhuǎn)化率的因素有很多,設(shè)計也是其中重要組成部分,那設(shè)計師需要如何應(yīng)對,才能助力用戶轉(zhuǎn)化呢?從用戶角度來看,助力轉(zhuǎn)化就是掃清理解障礙,提升瀏覽意愿與順暢度。

想要以設(shè)計語言達(dá)成以上目的,快速傳達(dá)有效信息是十分重要的一環(huán),接下來,我們結(jié)合案例,聊聊快速傳達(dá)重要信息是如何通過節(jié)省用戶時間來助力轉(zhuǎn)化的。

一、為什么要快速傳達(dá)

研究表明,人類在面對非自身興趣的事物時,注意力只能高度集中 10 分鐘左右,短暫休息后再次集中注意力的時間則為7-10 分鐘[1]。

三個小技巧,輕松提高設(shè)計轉(zhuǎn)化率

當(dāng)用戶使用服務(wù)類APP的時間超過這個閾值后,就會因為遲遲沒有達(dá)到目的而產(chǎn)生焦躁情緒,隨之而來的負(fù)面影響要么是跳出到其他APP,亦或者對軟件產(chǎn)生厭煩感,而無論哪一種都不是我們想要看到的結(jié)果。這也就意味著,我們每次只有20分鐘的時間讓用戶完成從篩選到下單的時間。

因此,在用戶有限的時間與精力中,迅速的傳達(dá)有效信息,不僅可以縮短用戶從挑選到下單的流程,站在用戶角度來說,因為可以快速的找到自己想要的信息,也可以讓用戶切實的感覺到這是“好用”的軟件。

因此我們需要快速傳達(dá)的理論依據(jù)就此成立:

三個小技巧,輕松提高設(shè)計轉(zhuǎn)化率

?二、如何快速傳達(dá)

那么如何快速傳達(dá)有效信息呢?方法有很多,今天我們重點闡述以下三個技巧:

三個小技巧,輕松提高設(shè)計轉(zhuǎn)化率

接下來我們結(jié)合實際案例看看如何運(yùn)用以上手段以達(dá)到快速傳達(dá)的目的。

1.? 塑造視覺焦點

什么是視覺焦點呢?就是畫面中讓我們能多停留幾秒的視覺元素,可以是一個點,一條線,一個面,通俗來講,就是頁面中最引人注意的地方,視線上交匯集中的地方,這個位置就叫做視覺焦點,而焦點可以通過構(gòu)圖,色彩運(yùn)用,比例等手段進(jìn)行塑造。

三個小技巧,輕松提高設(shè)計轉(zhuǎn)化率

接下來我們結(jié)合十一活動的實際案例說說如何進(jìn)行焦點塑造,我們需要先構(gòu)建合理的視覺層次結(jié)構(gòu),好的層級能使觀者快速瀏覽信息,位于層級頂層的信息也可以在最短的時間內(nèi)讓人注意到。

三個小技巧,輕松提高設(shè)計轉(zhuǎn)化率

根據(jù)人眼對畫面的閱讀習(xí)慣,位于頂部和正中這兩個位置的信息會最先被注意到,我們應(yīng)優(yōu)先將重要信息放在此處,符合了閱讀習(xí)慣之后,通過運(yùn)用色彩對比,字號大小等差異化手段,可以將信息的層級提高。

三個小技巧,輕松提高設(shè)計轉(zhuǎn)化率

三個小技巧,輕松提高設(shè)計轉(zhuǎn)化率

大字號更容易讓人一眼看到信息,因此就算是同處高層級的信息,通過內(nèi)部字號大小的對比,可以進(jìn)一步細(xì)分層級,讓視覺焦點更加具體。

三個小技巧,輕松提高設(shè)計轉(zhuǎn)化率

飽和度與對比色的運(yùn)用同樣重要,我們將彩色的圖片去掉顏色之后可以發(fā)現(xiàn),色彩關(guān)系對畫面層次的影響,通過對灰度,明暗和色相的使用,可以使焦點位信息產(chǎn)生視覺前推感。

視覺焦點在具體案例中的應(yīng)用展示:

三個小技巧,輕松提高設(shè)計轉(zhuǎn)化率

58到家活動

小結(jié):通過構(gòu)建畫面層級之后,運(yùn)用字號大小和顏色對比等手段做出差異化設(shè)計,可以快速將用戶注意力吸引至焦點區(qū)域,并被引導(dǎo)著跳過次要區(qū)域,視線按從上到下,從左到右的順序,在各個焦點位中跳躍,從而達(dá)成我們優(yōu)先傳遞重要信息的目的。

2. 前置思考過程

我們平時在想要達(dá)成某種目的時,需要先獲取大量信息,在腦內(nèi)羅列整理,然后歸納出有用信息后,再進(jìn)行處理。

三個小技巧,輕松提高設(shè)計轉(zhuǎn)化率

用戶在使用APP時也是這樣,比如想點餐時,要挑餐廳,挑口味,挑菜品,而這一系列的信息整理過程是十分繁瑣又消耗耐性的,正因此,我們才經(jīng)常面臨:不知道吃啥啊 這樣的難題。

而這個思考過程是可以通過設(shè)計語言來簡化,甚至提前完成的。通過將頁面中的信息分類后,將同類信息放置在不同組塊中的相同位置,使用相同的顏色和格式,會幫助用戶形成閱讀慣性。

三個小技巧,輕松提高設(shè)計轉(zhuǎn)化率

結(jié)合十一活動案例來看,每個組件中都會包含有幾類基本信息:產(chǎn)品名,利益點,和下單跳轉(zhuǎn)按鈕,每個組件中的信息都在固定的區(qū)域展示。

三個小技巧,輕松提高設(shè)計轉(zhuǎn)化率

同時用高飽和度的紅色來強(qiáng)調(diào),在這樣的固定排列中,用戶想要取得什么樣的信息時,可以第一時間去固定的位置尋找,大大提高了信息獲取的效率。

前置思考在具體案例中的應(yīng)用展示:

三個小技巧,輕松提高設(shè)計轉(zhuǎn)化率

小結(jié):通過將畫面中的信息整理并歸類,我們可以縮短用戶的信息獲取與腦內(nèi)整理歸納的時間,讓用戶將有限的時間更多的放在優(yōu)惠對比與決策中去,這不但有助于提高下單率,易讀的版式也更容易讓用戶產(chǎn)生“好用”的感覺。

3. 米勒定律[2]

我們先來看以下兩段數(shù)字

三個小技巧,輕松提高設(shè)計轉(zhuǎn)化率

是不是后一段更容易記憶,這涉及到一個叫“組塊”的概念,人腦記憶一組信息的時候,這組信息內(nèi)的元素數(shù)量小于7±2時最容易記憶,具體數(shù)量因人而異,老年人的記憶數(shù)量會顯著降低。

因此一長串?dāng)?shù)字看起來毫無規(guī)律難以記憶,而3個數(shù)字一組分成多個組塊后,則容易記憶很多,同一組塊內(nèi)的信息越少,越容易讓用戶記憶深刻。

這個定律對設(shè)計畫面同樣有著重要的影響,一個板塊中如果包含了過多的組塊,不僅會讓用戶對這個板塊的內(nèi)容難以記憶,也會因為信息過多且沒有主次而大大增加篩選成本,用戶將時間過多的花費(fèi)在篩選上會延長下單之前的流程,也會提高下單之前的跳出率。

三個小技巧,輕松提高設(shè)計轉(zhuǎn)化率

結(jié)合我們的頁面設(shè)計來看,每一區(qū)域內(nèi)的組塊分布都不超過5個,同時組塊內(nèi)的信息類別也只有圖片、產(chǎn)品名、簡要介紹與下游鏈接4部分組成,通過做減法,讓重要信息可以迅速被提取,更容易被記憶。無論對于新老用戶來說,都可以有效的降低篩選成本,新用戶能更容易理解板塊功能,老用戶則更容易記住自己想找的功能在什么區(qū)域。

米勒定律在具體案例中的應(yīng)用展示:

三個小技巧,輕松提高設(shè)計轉(zhuǎn)化率

三個小技巧,輕松提高設(shè)計轉(zhuǎn)化率

58到家電商首頁展示

小結(jié):通過簡化板塊中的信息類別,能有效縮短新老用戶尋找服務(wù)的時間,同時老用戶也更容易記住想要的板塊在什么位置,下次再使用的時候,迅速觸達(dá)。

三、寫在最后

作為設(shè)計師,兼顧商業(yè)化與用戶體驗是我們的必修課,好的設(shè)計不僅僅是要“好看”,更需要兼?zhèn)溆脩襞c產(chǎn)品兩方面的功能性,將視覺語言與心理學(xué)、行為學(xué)的結(jié)合運(yùn)用,既可以有效的提升用戶體驗,提高粘性,又能縮短下單前的必要流程,提高轉(zhuǎn)化率。

注釋:

[1]出自《教書育人》2016年1期38頁,【運(yùn)用心理學(xué)規(guī)律提高課堂學(xué)習(xí)效率】章節(jié)

[2]米勒(Miller,1956)的分析,人腦處理信息有一個魔法數(shù)字7(正負(fù)2)的限制,也就是說,人的大腦最多同時處理5到9個信息(chunks)。原因是短期記憶儲存空間的限制,超過9個信息團(tuán),將會使得大腦出現(xiàn)錯誤的概率大大提高。

 

作者:環(huán)鐵藝術(shù)家;微信公眾號:58UXD

本文來源于人人都是產(chǎn)品經(jīng)理合作媒體@58用戶體驗設(shè)計中心

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

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 這個也太贊了吧

    來自上海 回復(fù)
  2. 很贊,泡泡也說很贊

    來自廣東 回復(fù)
    1. 泡泡是誰

      來自上海 回復(fù)
  3. 設(shè)計好看是視覺上的享受,視覺上的享受也是用戶體驗之一,但也只是之一,其他的功能性也不能忽視。

    來自廣東 回復(fù)
  4. 這也太棒了吧,3個小技巧幫助我立理解了設(shè)計轉(zhuǎn)化率,真的是全全的干貨,相信一定會對我有用的。

    來自河南 回復(fù)
  5. 每次回看經(jīng)典的知識,總是會有一部分收獲

    來自上海 回復(fù)