網(wǎng)頁細(xì)節(jié)優(yōu)化實戰(zhàn):如何使用熱點圖做優(yōu)化?

如果內(nèi)容為王的話,那么設(shè)計就是城堡。對于企業(yè)而言,好的網(wǎng)頁設(shè)計不僅包含了能夠引起訪客興趣的內(nèi)容,吸引目標(biāo)用戶,而且包含有直觀而漂亮的UI設(shè)計,促進(jìn)銷售。許多設(shè)計師喜歡將自己認(rèn)為創(chuàng)意爆棚的UI設(shè)計直接應(yīng)用到客戶的網(wǎng)站上,但并沒有考慮過這種設(shè)計是否符合網(wǎng)站的產(chǎn)品,是否符合目標(biāo)用戶群所需要的體驗與需求,從這個角度上來說,這樣的設(shè)計真的合適么?
所以,當(dāng)你在設(shè)計企業(yè)和商務(wù)類網(wǎng)站的時候,你需要自省。多問問自己,這樣的設(shè)計是否合理,站在需求方和用戶的角度上仔細(xì)考量一下,你的創(chuàng)意和設(shè)計是否真的靠譜。在接下來的案例中,我們使用Ptengine這款軟件生成用戶點擊的熱點圖,來幫設(shè)計師了解用戶是如何訪問網(wǎng)站的,分析設(shè)計的利弊。
1、對于產(chǎn)品銷售而言一個巨大的Banner真的有效么?
許多網(wǎng)站都喜歡在網(wǎng)站的導(dǎo)航欄下頂部的位置放上巨大的Banner,宣傳主打產(chǎn)品或者主要的服務(wù)。一旦使用了這樣的設(shè)計就意味著網(wǎng)站頂部大部分都會被一張圖所填充,用戶的注意力會被它所吸引,然后才是讓用戶注意到下方的其他產(chǎn)品。下面的這張熱點圖是最大的體育品牌Vendor的鞋類產(chǎn)品頁面,我們發(fā)現(xiàn)他們頂部的Banner的點擊率并不高,仔細(xì)分析數(shù)據(jù)之后發(fā)現(xiàn)大概占據(jù)了頁面總點擊量的10%,很明顯多數(shù)用戶看了這個圖之后并未被其吸引而是選擇向下瀏覽他們自己真正喜歡的鞋。
2、你應(yīng)該在最突出的地方放置什么內(nèi)容?
設(shè)計師們常常會探討在網(wǎng)站什么地方放置什么內(nèi)容,但是這些內(nèi)容是否適合產(chǎn)品以及用戶的需求則很少真正涉及。接下來,我用兩個活生生的案例來展示一下,什么是好內(nèi)容被放置到錯誤的地方。
有幾個很有吸引力的甜點食譜被放置于主頁最下方,僅有37%的用戶會將網(wǎng)頁拖到這個位置看到它們。但是幾乎所有看到這個食譜的用戶都點擊了它們,但是絕大多數(shù)的用戶根本沒幾乎瀏覽到這里!設(shè)計師應(yīng)該讓這樣的殺手級的內(nèi)容置于最好的位置,不是嗎?
幾乎相同的情況也發(fā)生在運動品牌Vendor的網(wǎng)頁上。許多不同類型的鞋被放置在整個長頁面上,設(shè)計師真的應(yīng)該梳理一下那些鞋比較吸引人。只有20%的用戶會瀏覽到頁面底部,但是幾乎所有瀏覽到這里的用戶都會點擊那雙鞋,這足以證明它非常吸引人,那么為何不將它挪到用戶更容易發(fā)現(xiàn)的地方呢?
3、是否始終要為圖片附加鏈接?
在網(wǎng)站上,一圖抵千言,這是很正常的事情。但是你設(shè)計的頁面中,圖片是否傳達(dá)出正確的含義了?如果圖片加了超鏈接但是用戶沒有明白你的目的,這是一種設(shè)計失敗;如果你放置的圖片吸引了用戶去點擊,但圖片沒有附上鏈接,用戶的點擊徒勞無功了,這也是一個失敗的設(shè)計。
第一個案例是一個著陸頁。看看熱點圖,你會發(fā)現(xiàn)許多用戶點擊了圖片。用戶這個時候應(yīng)該是想點擊圖片深入了解一下網(wǎng)站可以為他們提供什么內(nèi)容,用戶希望這個圖片有超鏈接,能引導(dǎo)他們?nèi)ツ硞€詳情頁。但是沒有。
第二個案例是某款手機的幫助頁面。你會注意到,這個地方的客服電話用了鮮明的紅色,看起來好象能點擊的樣子,但是它實際只是純文本。用戶希望能通過點擊直接撥打電話,但是看來是不可能了。如果想直接同用戶保持聯(lián)系,那么這個地方必須修改。
4、我所設(shè)計的按鈕是否容易被點擊?
看看下面的例子吧。APP頁面中,設(shè)計師使用了HOT等關(guān)鍵詞來吸引潛在的用戶的注意力,但是即便使用了粉紅色來填充按鈕,它的效果看起來也非常不明顯。而男裝部分,干脆使用了淺藍(lán)色,這個地方的點擊量就更少了。我們可以理解設(shè)計師的苦心,但是對于用戶,它一點也沒有吸引力。
在打造一個優(yōu)秀的網(wǎng)頁之時,好的設(shè)計師不僅會賦予它良好的體驗和優(yōu)秀的創(chuàng)意,還會根據(jù)用戶的習(xí)慣與訴求調(diào)整設(shè)計和創(chuàng)意,讓設(shè)計能夠落地,使得用戶與網(wǎng)站實現(xiàn)良好的互動。Ptengine是一個幫設(shè)計師探索用戶使用習(xí)慣的好工具,它所搜集的數(shù)據(jù)能清晰的反映網(wǎng)頁設(shè)計的實際效果,為迭代和優(yōu)化提供了有力的數(shù)據(jù)支撐。如果你想作出更優(yōu)秀的設(shè)計,試試Ptengine這樣的優(yōu)秀工具吧。
相關(guān)文章
移動版Wap網(wǎng)頁針對百度進(jìn)行SEO優(yōu)化的一些要點總結(jié)
這篇文章主要介紹了移動版Wap網(wǎng)站針對百度進(jìn)行SEO優(yōu)化的一些要點總結(jié),包括內(nèi)鏈和URL網(wǎng)址的設(shè)置等關(guān)鍵點的講解,需要的朋友可以參考下2016-03-01移動網(wǎng)站該如何優(yōu)化? 移動網(wǎng)頁搜索引擎優(yōu)化的十個細(xì)節(jié)
移動搜索引擎優(yōu)化不僅僅只是給移動站排名,更重要的是還與PC網(wǎng)站排名有很密切的關(guān)系,那么移動網(wǎng)站該怎么優(yōu)化呢?移動網(wǎng)站在優(yōu)化過程中需要注意什么呢?本文將提供移動網(wǎng)頁2016-01-27網(wǎng)頁改版實戰(zhàn)!日本設(shè)計師如何徹底優(yōu)化招聘網(wǎng)站?
昨天推薦了一款熱點圖神器,今天繼續(xù)拿一個日本招聘網(wǎng)站開刀,從實戰(zhàn)角度給同學(xué)們演示如何全方位優(yōu)化整個網(wǎng)站,改善思路同樣非常值得借鑒,滿滿當(dāng)當(dāng)?shù)母韶涄s緊來收!2015-01-15網(wǎng)頁改版實戰(zhàn):日本設(shè)計師如何徹底優(yōu)化旅游網(wǎng)站?
今天我們將對一個旅游網(wǎng)站進(jìn)行徹底大變身,驚喜的是,借助神器的力量,改造思路非常清晰,改造效果非同一般地好。沒有改版經(jīng)驗的設(shè)計師,看完你會回來轉(zhuǎn)發(fā)的2015-01-13如何用攝影三分法來優(yōu)化網(wǎng)頁設(shè)計?
對于攝影師而言,取景布局三分法是非常熟悉的概念。盡管它是非常引人入勝的概念,但是在進(jìn)行網(wǎng)頁設(shè)計的時候,幾乎沒有人會拿三分法來說事兒。2014-12-31網(wǎng)頁加載太慢?使用百度云加速優(yōu)化網(wǎng)站的方法
有的網(wǎng)站打開網(wǎng)頁需要等好長時間,沒耐心的人直接就關(guān)上了,現(xiàn)在同類型的網(wǎng)站這么多,看誰的不是看啊,有多少網(wǎng)友愿意去等你的網(wǎng)頁加載好了再看,這個問題可以直接減少好多2014-11-09網(wǎng)站優(yōu)化必看 蜘蛛陷阱 不利于蜘蛛爬取的網(wǎng)頁
網(wǎng)站有哪些地方是不利于蜘蛛爬取的呢?下面腳本之家分享了一些蜘蛛爬取陷阱,讓蜘蛛爬去不到頁面的一些因素,需要的朋友可以參考下2014-10-13怎么針對關(guān)鍵詞進(jìn)行網(wǎng)頁優(yōu)化
優(yōu)化關(guān)鍵詞在網(wǎng)頁制作和設(shè)置方面該怎么做?看看下文你就知道了2014-08-29網(wǎng)頁設(shè)計與構(gòu)架中的幾個SEO優(yōu)化原則
網(wǎng)站的流量從客觀上反映了一個網(wǎng)站的受歡迎程度,流量越大,網(wǎng)站的排名越靠前,社會影響力也越大,特別是對網(wǎng)絡(luò)媒體而言,權(quán)威性、公信力也越強。2014-08-20站長該怎么設(shè)計出符合網(wǎng)站優(yōu)化要求的網(wǎng)頁
站長該怎么設(shè)計出符合網(wǎng)站優(yōu)化要求的網(wǎng)頁?詳情請看下文介紹2014-07-26