【編者按】本文作者為 Wes McDowell榆纽,主要介紹通過(guò)四個(gè)步驟實(shí)現(xiàn)層級(jí)清晰的導(dǎo)航欄仰猖,進(jìn)而提高網(wǎng)站的轉(zhuǎn)化率。文章系國(guó)內(nèi) ITOM 管理平臺(tái) OneAPM 編譯呈現(xiàn)奈籽。
精心規(guī)劃的導(dǎo)航策略可以成就一個(gè)網(wǎng)站饥侵,反之,則可能毀了一個(gè)衣屏。規(guī)劃得好躏升,網(wǎng)站訪客就會(huì)順著你安排的路徑走下去,要么購(gòu)買你的商品勾拉、成為你的潛在客戶煮甥,要么填完網(wǎng)站咨詢表單盗温。
規(guī)劃得不好藕赞,訪客們就會(huì)在網(wǎng)站上隨意游蕩。他們有可能達(dá)成你的目的卖局,也可能不會(huì)斧蜕。何必冒險(xiǎn)呢?
出色的用戶體驗(yàn)是不應(yīng)該如此隨意地對(duì)待客戶轉(zhuǎn)化問(wèn)題的——我們應(yīng)當(dāng)手把手地指導(dǎo)用戶砚偶,給出能吸引他們注意的批销、明確的提示洒闸。這樣,他們才能找到自己想找的東西均芽,同時(shí)你也能獲得自己想要的東西——客戶轉(zhuǎn)化丘逸。
在本文中,筆者將向你介紹一個(gè)簡(jiǎn)單的掀宋、提升轉(zhuǎn)化率的策略深纲,它適用于所有網(wǎng)站。
只要使用得當(dāng)劲妙,你交付的網(wǎng)站不僅美觀大方湃鹊,還能幫客戶實(shí)現(xiàn)他們的商業(yè)目標(biāo)。
也就是說(shuō)镣奋,你是他們的大英雄币呵。
第一步:著陸頁(yè)策略
我們知道對(duì)2016年的網(wǎng)絡(luò)營(yíng)銷來(lái)說(shuō),每個(gè)網(wǎng)站都應(yīng)當(dāng)配有著陸頁(yè)侨颈,這是轉(zhuǎn)化策略的一部分余赢。如果你打算重新設(shè)計(jì)你的網(wǎng)站,這一步并不要求你刪掉已有的頁(yè)面哈垢,而是增加一些內(nèi)容没佑。
你需要建立一個(gè)信息齊全的頁(yè)面,這個(gè)頁(yè)面應(yīng)當(dāng)囊括了刺激轉(zhuǎn)化所需的所有內(nèi)容温赔。著陸頁(yè)的數(shù)量不定蛤奢,取決于具體的業(yè)務(wù)和目標(biāo)。為了簡(jiǎn)便陶贼,我們用私人作品網(wǎng)站為例啤贩。
假設(shè)你提供網(wǎng)頁(yè)設(shè)計(jì)和商標(biāo)設(shè)計(jì)兩種服務(wù),那么在你的作品網(wǎng)站上拜秧,除了簡(jiǎn)單的作品集頁(yè)面痹屹,還應(yīng)當(dāng)建立兩個(gè)全新的著陸頁(yè)——每一個(gè)著陸頁(yè)對(duì)應(yīng)一種業(yè)務(wù)。在各個(gè)著陸頁(yè)上枉氮,你可以放上重點(diǎn)作品志衍、有說(shuō)服力的銷售文案、服務(wù)特點(diǎn)列表聊替、客戶推薦信楼肪、以及清晰的行為召喚(CTA)按鈕。
著陸頁(yè)存在的原因是:客戶無(wú)需在不同頁(yè)面之間來(lái)回切換惹悄,而可以在一個(gè)頁(yè)面上看到所有信息春叫。如此一來(lái),你的銷售漏斗將更加成功,同時(shí)暂殖,因?yàn)槭∪チ饲袚Q環(huán)節(jié)价匠,客戶也不會(huì)再半途放棄。
第二步:重點(diǎn)放在可以“生利”的頁(yè)面
除了著陸頁(yè)以外呛每,是否還需要一些別的頁(yè)面來(lái)刺激轉(zhuǎn)化踩窖?例如一個(gè)專門放客戶推薦信的頁(yè)面?或者是其他服務(wù)項(xiàng)目的介紹晨横?
如果你覺(jué)得需要的話毙石,那么你有以下幾種選擇:
相關(guān)鏈接
在著陸頁(yè)的正文中插入鏈接,可以有效地引導(dǎo)客戶走向預(yù)設(shè)的方向颓遏。假設(shè)你的著陸頁(yè)上有一些案例分析徐矩,那么可以在案例的下方加入相關(guān)鏈接,引導(dǎo)客戶前往查看更多案例叁幢。
精簡(jiǎn)的標(biāo)題導(dǎo)航欄
另一個(gè)方案是滤灯,做一個(gè)精簡(jiǎn)的標(biāo)題導(dǎo)航欄,指向兩三個(gè)最常用的頁(yè)面曼玩。還是以作品網(wǎng)站為例鳞骤,你可以把那兩個(gè)著陸頁(yè)都放到標(biāo)題導(dǎo)航欄里,這樣訪客就可以在不同服務(wù)之間來(lái)回切換黍判。
理想狀態(tài)下豫尽,標(biāo)題欄應(yīng)當(dāng)是“靜止的”,即使用戶滾動(dòng)頁(yè)面顷帖,標(biāo)題欄仍會(huì)保持原位美旧。
第三步:弱化其它內(nèi)容
你聽(tīng)說(shuō)過(guò)“選擇疲勞”嗎?它的意思是贬墩,當(dāng)人們面臨太多選擇時(shí)榴嗅,往往更不可能采取任何行動(dòng)。有個(gè)著名的果醬試驗(yàn)闡釋了這一概念陶舞。
研究人員在一家食品店的小貨架上放了五種果醬嗽测。路過(guò)的人們會(huì)停下來(lái)看一眼,其中大部分人會(huì)購(gòu)買一種果醬肿孵。之后唠粥,研究人員不斷增加果醬的品種,直至三十種之多停做。人們還是會(huì)停下看看晤愧,折服于如此之多的選擇,然后就走開(kāi)了雅宾。
我們不想這種情況出現(xiàn)在網(wǎng)站上养涮。如果導(dǎo)航欄有太多的選擇,訪客們就沒(méi)有一條清晰的路徑眉抬,于是干脆離開(kāi)贯吓。我們可以這樣解決這個(gè)問(wèn)題:
所有其它頁(yè)面的鏈接都不應(yīng)出現(xiàn)在主要選項(xiàng)中。 我們可以把它們放在次級(jí)導(dǎo)航中蜀变。
你可以隨意處理次級(jí)導(dǎo)航悄谐。既可以把它們放在不那么重要的位置,(例如頁(yè)腳上方库北,)或者把它們放在一個(gè)會(huì)自動(dòng)隱藏的側(cè)邊欄菜單中爬舰,訪客可以點(diǎn)擊菜單按鈕來(lái)訪問(wèn)。
是的寒瓦,我知道這個(gè)問(wèn)題是用戶體驗(yàn)專家們爭(zhēng)論的焦點(diǎn)情屹。有很多人非常討厭隱藏式導(dǎo)航,認(rèn)為它為用戶的使用創(chuàng)造了一個(gè)障礙杂腰。但是請(qǐng)記桌恪:你的著陸頁(yè)以及主要的導(dǎo)航項(xiàng),應(yīng)當(dāng)足以刺激轉(zhuǎn)化了喂很。次級(jí)頁(yè)面只是為那些想要尋找它們的訪客而準(zhǔn)備的惜颇。
消除了那些不重要的選項(xiàng),(或者至少弱化了它們)少辣,訪客們將會(huì)擁有一條更為清晰的路徑凌摄。從任何角度來(lái)說(shuō),這都是不錯(cuò)的用戶體驗(yàn)漓帅。
第四步:設(shè)置你的CTA(行為召喚)按鈕
清晰锨亏、明確的CTA代表著網(wǎng)站的所有目的。
還是以作品網(wǎng)站為例忙干,假設(shè)你的最終目標(biāo)是讓潛在客戶填寫(xiě)一份表格屯伞,定下一個(gè)咨詢時(shí)間。一旦想清楚了這一點(diǎn)豪直,你一定會(huì)想把這個(gè)鏈接放在最顯眼的地方劣摇。
除了放在著陸頁(yè)的正文位置,筆者建議還可以在標(biāo)題導(dǎo)航欄再放一個(gè)弓乙。
但是末融,為了使它有別于其他導(dǎo)航選項(xiàng),你可以把它做成一個(gè)按鈕暇韧。這樣更具視覺(jué)沖擊勾习。如果它的顏色是亮麗的流行色系,那突出效果將更佳懈玻。
整體效果
一旦完成了上述步驟巧婶,你就完成了層次清晰的導(dǎo)航設(shè)計(jì),你的導(dǎo)航就會(huì)變得非常有層級(jí):
最重要的:CTA按鈕
第二重要的:主導(dǎo)航欄選項(xiàng)
不太重要的:隱藏的或弱化的次級(jí)導(dǎo)航選項(xiàng)
一旦建立了這樣的層級(jí)關(guān)系,由于突出了CTA艺栈,并且輔以其他的主要導(dǎo)航選項(xiàng)英岭,網(wǎng)站的轉(zhuǎn)化率將會(huì)全面提升。
其他的那些對(duì)于轉(zhuǎn)化幫助不大的元素都可以隱藏起來(lái)湿右,以免訪客分心诅妹。
總結(jié)
作為一名網(wǎng)頁(yè)設(shè)計(jì)師,我們的首要任務(wù)就是幫助客戶最大化他們的營(yíng)銷工具——網(wǎng)站——可能帶來(lái)的優(yōu)勢(shì)毅人。當(dāng)我們的網(wǎng)站擁有一條明晰的路徑吭狡,直通更高的轉(zhuǎn)化率,就能夠促成客戶的成功丈莺。這種附加價(jià)值往往會(huì)讓我們從其他設(shè)計(jì)師中脫穎而出划煮,進(jìn)而找到更優(yōu)質(zhì)、愿意投入更多經(jīng)費(fèi)的客戶缔俄。
網(wǎng)站的美觀固然重要般此,但畢竟,能帶來(lái)更高的轉(zhuǎn)化率牵现,才是決勝的大必殺铐懊。
本文系 OneAPM 工程師編譯整理。OneAPM Browser Insight 是一個(gè)基于真實(shí)用戶的 Web 前端性能監(jiān)控平臺(tái)瞎疼,能幫助大家定位網(wǎng)站性能瓶頸科乎,實(shí)現(xiàn)網(wǎng)站加速效果可視化;支持瀏覽器贼急、微信茅茂、App 瀏覽 HTML 和 HTML5 頁(yè)面。想閱讀更多技術(shù)文章太抓,請(qǐng)?jiān)L問(wèn) OneAPM 官方技術(shù)博客空闲。
本文轉(zhuǎn)自 OneAPM 官方博客
原文地址:https://www.sitepoint.com/how-to-boost-conversions-with-prioritized-navigation/