設(shè)計理論:如何使登錄頁更完美與高效?
美觀的登錄頁面將帶來很好轉(zhuǎn)化率,那么如何是登錄也面更加美觀與高效呢?
對于設(shè)計師來說,工作中的挑戰(zhàn)之一就是創(chuàng)建一個看起來不錯,而且還能有很好轉(zhuǎn)換率的登錄頁面。您可以理解為什么這是案例設(shè)計的目標(biāo)和業(yè)務(wù)目標(biāo)常常是不一致的。
當(dāng)產(chǎn)品相關(guān)人員創(chuàng)建登陸頁時,他們更專注于布局,基本原則和信息層次。然而,設(shè)計師最關(guān)心的是用戶體驗,顏色,排版和風(fēng)格元素,有助于建立強(qiáng)大而有效化的準(zhǔn)則。
轉(zhuǎn)化最優(yōu)設(shè)計本質(zhì)上希望使這兩個思想學(xué)派相一致。因此,不僅要專注于UX,還要強(qiáng)調(diào)勸導(dǎo)和轉(zhuǎn)化,同時將它與將導(dǎo)致更好的網(wǎng)站的美學(xué)選擇合并。
1.選擇正確的布局
產(chǎn)品經(jīng)理非常了解,頁面上不同元素的布局會影響轉(zhuǎn)化率。這就是為什么他們要求設(shè)計師將最重要的信息放在首要位置,并從檢出頁面中刪除導(dǎo)航菜單,即使這個操作違反了UX設(shè)計的原則。
但是,您可以采用一些理論原則來創(chuàng)建轉(zhuǎn)化優(yōu)化的著陸頁,而不會影響用戶體驗:
A.按照三分法規(guī)定設(shè)計
如果你曾經(jīng)拍過攝影課,你可能聽說過三分之一的規(guī)則。這個規(guī)則越少越好,這個規(guī)則說,任何形象在分為9個相等的部分時,會有更多的緊張和精力。
來自維基百科的這個GIF說明它完美:
三分之一的規(guī)則是攝影師并不總是把他們的主題放在框架中的原因。世界上最著名的一些照片遵循這一規(guī)則。
這里有一個例子:
人物在九分之一的右上角
三分法則不僅適用于照片 – 它也適用于登錄頁??纯碬ebDAM的這個登陸頁面:
或者來自Inbound Emotion的一個:
Inbound Emotion
根據(jù)設(shè)計理論和眼睛定視來看,3×3網(wǎng)格線的交點在任何頁面上都得到最多的關(guān)注。因此,放置在這些網(wǎng)格線上的元素也會更受關(guān)注。
“使用三分法規(guī)則來設(shè)計的布局視覺看上去會更舒適?!?/a>
2.按照菲茨法則的重要內(nèi)容
訓(xùn)練人眼遵循層次結(jié)構(gòu)。我們的眼睛自然地從大到大的元素發(fā)展。尼爾森進(jìn)行的眼睛跟蹤研究也顯示:
在這里,用戶比標(biāo)題更多地集中在人物圖像上,并且他們的眼睛比較小的段落文字更長的字體。
與此相似的另一個原理是菲茨定律。最初由心理學(xué)家保羅·菲茨(Paul Fitts)在1954年制定的描述人機(jī)交互的方法,該法規(guī)定用戶移動到屏幕上對象的速度是對象的接近度(與用戶)的比例及其大小的函數(shù)。
在數(shù)學(xué)上,這表示如下:
結(jié)論:目標(biāo)越大,完成點擊越快,時間越短。同樣地,目標(biāo)越近,指向越快,完成點擊時間越短。也就是說,定位點擊一個目標(biāo)的時間,取決于目標(biāo)與當(dāng)前位置的距離,以及目標(biāo)的大小。
在桌面應(yīng)用中,這意味著保持最重要的按鈕靠近角落,占據(jù)主要像素空間(也稱為“素數(shù)像素”)。
例如,Word中的素數(shù)像素角落都重要的按鈕:
因為網(wǎng)頁是可滾動的,所以網(wǎng)站缺少素數(shù)。在這種情況下,將屏幕的中心作為主像素區(qū)域是明智之舉。網(wǎng)頁設(shè)計師必須“選擇一個更緊湊,居中的布局”,光標(biāo)位于屏幕中心或附近。按照菲茨定律,任何靠近該區(qū)域的大按鈕將產(chǎn)生更高的點擊次數(shù)。
因此,您會看到這樣的著陸頁,CTA和主要文字占據(jù)屏幕上的主要區(qū)域。
請記住,F(xiàn)itts定律是一個二進(jìn)制對數(shù),因此按鈕的可點擊性不會線性增加(即300%的按鈕不會超過300%的點擊量)。相反,較小的更改導(dǎo)致更高的可點擊回報。
因此,通過將CTA放置在屏幕中心附近,使其稍微大于周圍元素,就是個很好的做法。
來自Litmus的這個頁面也是一個很好的例子:
CTA占據(jù)屏幕的中心,并且在頁面的前半部分容易看到。
這是MarketStrong的另一個例子:
在這里,CTA在折疊上方容易看到,而標(biāo)題文字占據(jù)主屏幕的不動產(chǎn),缺少導(dǎo)航欄和小標(biāo)志。
這是您可以立即在自己的設(shè)計中使用的東西 – 最小化屏幕上非必需品,并將最重要的元素更接近屏幕中心,并將其放置在折疊上方。
3.選擇正確的字體
你可能已經(jīng)知道排版的基礎(chǔ)知識了。您也可能會知道,這兩個基本類別,襯線和無襯線,可以進(jìn)一步分為不同的字體,如人文主義,幾何,現(xiàn)代,板條等。
轉(zhuǎn)化率優(yōu)化專家同時只考慮一件事:這種字體會導(dǎo)致更好的轉(zhuǎn)換效果嗎?
轉(zhuǎn)換優(yōu)化設(shè)計基本上融合了這兩個問題。因此,您可以單獨選擇基于審美或可用性考慮的字體,而不是選擇以下字體:
A.提高品牌知名度,從而被動地轉(zhuǎn)換轉(zhuǎn)換目標(biāo)。
B.提高人們閱讀頁面的速度和便利性,同時也強(qiáng)調(diào)轉(zhuǎn)換為主題的類型元素,如標(biāo)題。
我們來看看這些更詳細(xì)。
排版和品牌知覺
看看紐約時報的這個頁面:
現(xiàn)在來看看這個頁面從Buzzfeed:
這兩個品牌都使用非常不同的字體。NYT使用襯線字體(NYT-Cheltenham和Georgia),而Buzzfeed使用2個無襯線字體(Helvetica Neue Light和Proxima Nova)。
這與他們的品牌形象相一致:“紐約時報”被認(rèn)為是嚴(yán)肅的新聞學(xué)家,而Buzzfeed仍被視為充滿“有趣”貓GIF的網(wǎng)站。
設(shè)計師們已經(jīng)知道這一點:排版和品牌標(biāo)識是相關(guān)的。
例如,有一項研究認(rèn)為排版是品牌是否被視為“真誠”,“激動人心”或“復(fù)雜”的核心要素。
讀者對紐約時報的另一個測試,測試結(jié)果表明,讀者信賴最多以Baskerville字體編寫的研究。另一方面,漫畫漫畫中寫的研究被認(rèn)為是“最不信任的”。
對于轉(zhuǎn)換優(yōu)化設(shè)計,請嘗試使用與你希望讀者感受的情緒相呼應(yīng)的字體來進(jìn)行設(shè)計
也就是說,使用像Georgia這樣的真誠的字體在可靠性至關(guān)重要的銷售頁面上,并且在非轉(zhuǎn)換導(dǎo)向的博客頭條上可以使用更“有趣”的字體,如Playfair。
一般來說,您可以劃分一些流行的字體如下:
- 真誠:Georgia, Baskerville
- 復(fù)雜:Garamond Pro, Playfair Display
- 大膽:Impact, Oswald, Gotham Condensed Bold
- 現(xiàn)代:Helvetica, Avenir, Roboto, Futura
- 樂趣:Lobster, Barrio
排版和可讀性
您所做的字體選擇不僅會影響您的讀者感受,還會影響讀者的閱讀速度。
更重要的是,你的類型選擇直接決定了用戶關(guān)注的頁面元素。
例如,考慮一下大膽的裝飾太平洋字體來作為標(biāo)題:
這當(dāng)然會引起你的注意,但是當(dāng)段落使用相同的字體時,這是最終結(jié)果:
這不是很容易閱讀。它也不讓任何特定的頁面元素脫穎而出,這對于轉(zhuǎn)換是不利的。
除了在標(biāo)題和正文中使用不同的字體外,還有其他一些方法來解決這個問題。
可讀性,行高和段長度
這是CROs和UX設(shè)計人員同時得出的結(jié)論:更長的行高等于更好的可讀性。
例如,下面的第一段更容易閱讀,因為行高很大。
雖然線高度對于更好的可讀性很重要,但更重要的因素是段落長度,即每段的行數(shù)/字?jǐn)?shù)。
例如,大多數(shù)老派銷售頁面幾乎總是限于一句或兩句話:
結(jié)合豐富的線條高度,這些簡短的段落將使閱讀您的登錄頁更容易一些。
可讀性和字體大小
根據(jù)一項研究表明,較大的字體對讀者影響更大,這也增強(qiáng)了閱讀能力。
你可以在這個例子中看到這一點:
現(xiàn)在在段落文本中使用大于16px的字體是標(biāo)準(zhǔn)的。一些流行的網(wǎng)站,如中等使用的字體大到21px。
這不僅對CRO有好處,而且還有一個很好的UX操作,因為較大的字體更有可能使您的內(nèi)容更容易訪問。
選擇正確的顏色
大多數(shù)成熟品牌都有一套“品牌顏色”,用于所有營銷材料,包括登陸頁。
例如,這是Twitter的品牌顏色設(shè)置:
這是可樂零的:
如果你的目標(biāo)是提高轉(zhuǎn)化次數(shù),則可能必須偏離目標(biāo)網(wǎng)頁中的品牌顏色,特別是當(dāng)你的品牌顏色不利于轉(zhuǎn)化。
對于轉(zhuǎn)化優(yōu)化設(shè)計,請在選擇登陸頁顏色時按照以下提示進(jìn)行操作:
1.選擇引起您的登陸頁情感的顏色
你可能知道不同的顏色與不同的情感和場合有關(guān)。你走進(jìn)綠色和感受的藍(lán)色,當(dāng)你失意。
同樣,你把綠色與自然聯(lián)系起來;白色與雪和純潔,紅色與饑餓,權(quán)力和侵略;黃色與陽光的溫暖都聯(lián)系起來。
這就是為什么許多食品公司在他們的標(biāo)志中使用紅色的原因:
為什么綠色是太陽能城等環(huán)保公司最喜歡的顏色:
當(dāng)您選擇登陸頁的顏色時,請選擇與你的產(chǎn)品或登陸頁有相同的情緒。
也就是說,如果您希望客戶將您視為未來品牌,可以使用黑白色和灰色/銀色的主題,如特斯拉:
同樣,如果您希望您的品牌被視為值得信賴的商業(yè)品牌,可以使用藍(lán)色和白色的“企業(yè)”顏色。
看看這個Salesforce著陸頁:
請記住,顏色是有文化影響的。紅色在西方可能被視為侵略的象征,但在中國,它被認(rèn)為是運氣和財富的象征。
2.使用互補色對比
組合時互補的顏色相互抵消。然而,當(dāng)它們彼此相鄰時,它們產(chǎn)生最高的對比度(白黑組合之外)。這就是為什么你看到這么多登陸頁在設(shè)計中使用補色。
例如,此登陸頁使用橙色作為其按鈕,藍(lán)色用于周邊地區(qū) – 2種互補色。
這個網(wǎng)頁可能會獲得穩(wěn)固的轉(zhuǎn)換。
類似地,Groupon的這個頁面使用綠色的背景和紅色的按鈕:
注意圖像中的模型如何面對形式,引起您的注意。
互補色彩是所有登陸頁的基礎(chǔ)。
3.選擇與您的目標(biāo)人口統(tǒng)計信息相匹配的顏色
研究表明,顏色在我們決定購買的地方起著重要的作用。消費者傾向于特別強(qiáng)烈地對已經(jīng)與其年齡或性別進(jìn)行文化關(guān)聯(lián)的顏色。
一項研究發(fā)現(xiàn),男性往往傾向于藍(lán)色,而女性往往喜歡柔和的粉色色調(diào)。
從Birchbox查看此著陸頁:
現(xiàn)在看看這個頁面從Thrillist:
Birchbox是美容產(chǎn)品的訂閱服務(wù)。他們的顧客幾乎都是女人。另一方面,Thrillist的目標(biāo)觀眾主要是男性。
這反映在他們的顏色選擇上:樺木盒使用更輕,色彩豐富的色調(diào),而Thrillist堅持大膽,深色。
廣義而言,您可以進(jìn)行以下人口統(tǒng)計:
- 男人喜歡大膽,強(qiáng)烈的顏色
- 女人喜歡柔軟的色調(diào)
- 年輕消費者喜歡明亮,俏皮的顏色
- 較老的消費者喜歡“值得信賴”的溫暖和企業(yè)色彩
您可以看到這反映在您最喜歡的一些品牌的顏色選擇中。例如,以紐約為中心的女性時尚標(biāo)簽凱特·斯潘德(Kate Spade)在主頁上使用明亮的色彩和柔和的色調(diào):
凱特·斯帕德(Kate Spade)的姐妹公司Jack Spade為男性銷售服裝,使用了一個非常不同的顏色方案,側(cè)重于橄欖,灰色和黑色:
這是品牌通過仔細(xì)選擇其配色方案來定位不同人口統(tǒng)計學(xué)的一個很好的例子。
專注于選擇正確的顏色,字體和布局。選擇符合目標(biāo)市場要求的字體,并選擇補充品牌的顏色。對于布局,設(shè)計具有強(qiáng)視覺層次結(jié)構(gòu)并符合菲茨定律的頁面,將大大有助于提高轉(zhuǎn)化率和品牌營銷的存在。
譯者:L_Lainey
原文鏈接:https://www.invisionapp.com/blog/high-converting-landing-pages/
本文由 @L_Lainey 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可,禁止轉(zhuǎn)載。
題圖來自PEXELS,基于CC0協(xié)議
- 目前還沒評論,等你發(fā)揮!