四個(gè)步驟實(shí)現(xiàn)層級(jí)清晰的導(dǎo)航欄

【編者按】本文作者為 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í):

  1. 最重要的:CTA按鈕

  2. 第二重要的:主導(dǎo)航欄選項(xiàng)

  3. 不太重要的:隱藏的或弱化的次級(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/

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市走敌,隨后出現(xiàn)的幾起案子碴倾,更是在濱河造成了極大的恐慌,老刑警劉巖掉丽,帶你破解...
    沈念sama閱讀 222,681評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件跌榔,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡捶障,警方通過(guò)查閱死者的電腦和手機(jī)僧须,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,205評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)项炼,“玉大人担平,你說(shuō)我怎么就攤上這事示绊。” “怎么了暂论?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,421評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵面褐,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我空另,道長(zhǎng)盆耽,這世上最難降的妖魔是什么蹋砚? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,114評(píng)論 1 300
  • 正文 為了忘掉前任扼菠,我火速辦了婚禮,結(jié)果婚禮上坝咐,老公的妹妹穿的比我還像新娘循榆。我一直安慰自己,他們只是感情好墨坚,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,116評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布秧饮。 她就那樣靜靜地躺著,像睡著了一般泽篮。 火紅的嫁衣襯著肌膚如雪盗尸。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,713評(píng)論 1 312
  • 那天帽撑,我揣著相機(jī)與錄音泼各,去河邊找鬼。 笑死亏拉,一個(gè)胖子當(dāng)著我的面吹牛扣蜻,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播及塘,決...
    沈念sama閱讀 41,170評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼莽使,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了笙僚?” 一聲冷哼從身側(cè)響起芳肌,我...
    開(kāi)封第一講書(shū)人閱讀 40,116評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎肋层,沒(méi)想到半個(gè)月后庇勃,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,651評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡槽驶,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,714評(píng)論 3 342
  • 正文 我和宋清朗相戀三年责嚷,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片掂铐。...
    茶點(diǎn)故事閱讀 40,865評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡罕拂,死狀恐怖揍异,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情爆班,我是刑警寧澤衷掷,帶...
    沈念sama閱讀 36,527評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站柿菩,受9級(jí)特大地震影響戚嗅,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜枢舶,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,211評(píng)論 3 336
  • 文/蒙蒙 一懦胞、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧凉泄,春花似錦躏尉、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,699評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至蒂誉,卻和暖如春教藻,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背右锨。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,814評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工括堤, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人陡蝇。 一個(gè)月前我還...
    沈念sama閱讀 49,299評(píng)論 3 379
  • 正文 我出身青樓痊臭,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親登夫。 傳聞我的和親對(duì)象是個(gè)殘疾皇子广匙,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,870評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容

  • 中國(guó)互聯(lián)網(wǎng)用戶群已經(jīng)成為世界最大的互聯(lián)網(wǎng)群體。與此同時(shí)恼策,中國(guó)互聯(lián)網(wǎng)網(wǎng)站的發(fā)展也歷經(jīng)了幾個(gè)階段鸦致,從單純的網(wǎng)絡(luò)媒體到現(xiàn)...
    零一間閱讀 4,271評(píng)論 1 41
  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 172,328評(píng)論 25 707
  • 頸椎不舒服,早早回來(lái)涣楷,一覺(jué)睡到現(xiàn)在分唾,天竟已黑了趴樱,大豬也不在家仁讨,沒(méi)有什么事情在計(jì)劃中必須干,索性就這么躺著歧沪,真是無(wú)...
    豆子之不愛(ài)那么多閱讀 419評(píng)論 1 2
  • 月光下的躑躅 踮起腳尖 心跳為奏 想成一位 粉紅的少女 沒(méi)有鮮花簇?fù)? 只作孤高的野草 走向陽(yáng)光 ...
    沉默功夫閱讀 222評(píng)論 0 1
  • 文 | 廈九九 01 越長(zhǎng)大越孤單碳褒,誰(shuí)長(zhǎng)大誰(shuí)知道折砸。很多事沒(méi)有來(lái)日方長(zhǎng)看疗,很多人只會(huì)乍然離場(chǎng)。 相遇怎樣都美好睦授,時(shí)光和...
    廈九九閱讀 4,271評(píng)論 7 16