如果內(nèi)容為王的話,那么設(shè)計(jì)就是城堡。對(duì)于企業(yè)而言,好的網(wǎng)頁(yè)設(shè)計(jì)不僅包含了能夠引起訪客興趣的內(nèi)容,吸引目標(biāo)用戶,而且包含有直觀而漂亮的UI設(shè)計(jì),促進(jìn)銷售。許多設(shè)計(jì)師喜歡將自己認(rèn)為創(chuàng)意爆棚的UI設(shè)計(jì)直接應(yīng)用到客戶的網(wǎng)站上,但并沒(méi)有考慮過(guò)這種設(shè)計(jì)是否符合網(wǎng)站的產(chǎn)品,是否符合目標(biāo)用戶群所需要的體驗(yàn)與需求,從這個(gè)角度上來(lái)說(shuō),這樣的設(shè)計(jì)真的合適么?
所以,當(dāng)你在設(shè)計(jì)企業(yè)和商務(wù)類網(wǎng)站的時(shí)候,你需要自省。多問(wèn)吻凹岡己,這樣的設(shè)計(jì)是否合理,站在需求方和用戶的角度上仔細(xì)考量一下,你的創(chuàng)意和設(shè)計(jì)是否真的靠譜。在接下來(lái)的案例中,我們使用Ptengine這款軟件生成用戶點(diǎn)擊的熱點(diǎn)圖,來(lái)幫設(shè)計(jì)師了解用戶是如何訪問(wèn)網(wǎng)站的,分析設(shè)計(jì)的利弊。
1、對(duì)于產(chǎn)品銷售而言一個(gè)巨大的Banner真的有效么?
許多網(wǎng)站都喜歡在網(wǎng)站的導(dǎo)航欄下更部的位置放上巨大的Banner,宣傳主打產(chǎn)品或者主要的服務(wù)。一旦使用了這樣的設(shè)計(jì)就意味著網(wǎng)站更部大部分都會(huì)被一張圖所填充,用戶的注意力會(huì)被它所吸引,然后才是讓用戶注意到下方的其他產(chǎn)品。下面的這張熱點(diǎn)圖是更大的體育品牌Vendor的鞋類產(chǎn)品頁(yè)面,我們發(fā)現(xiàn)他們更部的Banner的點(diǎn)擊率并不高,仔細(xì)分析數(shù)據(jù)之后發(fā)現(xiàn)大概占據(jù)了頁(yè)面總點(diǎn)擊量的10%,很明顯多數(shù)用戶看了這個(gè)圖之后并未被其吸引而是選擇向下瀏覽他們自己真正喜歡的鞋。
2、你應(yīng)該在更突出的地方放置什么內(nèi)容?
設(shè)計(jì)師們常常會(huì)探討在網(wǎng)站什么地方放置什么內(nèi)容,但是這些內(nèi)容是否適合產(chǎn)品以及用戶的需求則很少真正涉及。接下來(lái),我用兩個(gè)活生生的案例來(lái)展示一下,什么是好內(nèi)容被放置到錯(cuò)誤的地方。
有幾個(gè)很有吸引力的甜點(diǎn)食譜被放置于主頁(yè)更下方,**37%的用戶會(huì)將網(wǎng)頁(yè)拖到這個(gè)位置看到它們。但是幾乎所有看到這個(gè)食譜的用戶都點(diǎn)擊了它們,但是更大多數(shù)的用戶根本沒(méi)幾乎瀏覽到這里!設(shè)計(jì)師應(yīng)該讓這樣的殺手級(jí)的內(nèi)容置于更好的位置,不是嗎?
幾乎相同的情況也發(fā)生在運(yùn)動(dòng)品牌Vendor的網(wǎng)頁(yè)上。許多不同類型的鞋被放置在整個(gè)長(zhǎng)頁(yè)面上,設(shè)計(jì)師真的應(yīng)該梳理一下那些鞋比較吸引人。只有20%的用戶會(huì)瀏覽到頁(yè)面底部,但是幾乎所有瀏覽到這里的用戶都會(huì)點(diǎn)擊那雙鞋,這足以證明它非常吸引人,那么為何不將它挪到用戶更容易發(fā)現(xiàn)的地方呢?
3、是否始終要為圖片附加鏈接?
在網(wǎng)站上,一圖抵千言,這是很正常的事情。但是你設(shè)計(jì)的頁(yè)面中,圖片是否傳達(dá)出正確的含義了?如果圖片加了超鏈接但是用戶沒(méi)有明白你的目的,這是一種設(shè)計(jì)失敗;如果你放置的圖片吸引了用戶去點(diǎn)擊,但圖片沒(méi)有附上鏈接,用戶的點(diǎn)擊徒勞無(wú)功了,這也是一個(gè)失敗的設(shè)計(jì)。
前幾個(gè)案例是一個(gè)著陸頁(yè)??纯礋狳c(diǎn)圖,你會(huì)發(fā)現(xiàn)許多用戶點(diǎn)擊了圖片。用戶這個(gè)時(shí)候應(yīng)該是想點(diǎn)擊圖片深入了解一下網(wǎng)站可以為他們提供什么內(nèi)容,用戶希望這個(gè)圖片有超鏈接,能引導(dǎo)他們?nèi)ツ硞€(gè)詳情頁(yè)。但是沒(méi)有。
**個(gè)案例是某款手機(jī)的幫助頁(yè)面。你會(huì)注意到,這個(gè)地方的客服電話用了鮮明的紅色,看起來(lái)好象能點(diǎn)擊的樣子,但是它實(shí)際只是純文本。用戶希望能通過(guò)點(diǎn)擊直接撥打電話,但是看來(lái)是不可能了。如果想直接同用戶保持聯(lián)系,那么這個(gè)地方必須修改。
4、我所設(shè)計(jì)的按鈕是否容易被點(diǎn)擊?
看看下面的例子吧。APP頁(yè)面中,設(shè)計(jì)師使用了HOT等關(guān)鍵詞來(lái)吸引潛在的用戶的注意力,但是即便使用了粉紅色來(lái)填充按鈕,它的效果看起來(lái)也非常不明顯。而男裝部分,干脆使用了淺藍(lán)色,這個(gè)地方的點(diǎn)擊量就更少了。我們可以理解設(shè)計(jì)師的苦心,但是對(duì)于用戶,它一點(diǎn)也沒(méi)有吸引力。
在打造一個(gè)**的網(wǎng)頁(yè)之時(shí),好的設(shè)計(jì)師不僅會(huì)賦予它良好的體驗(yàn)和**的創(chuàng)意,還會(huì)根據(jù)用戶的習(xí)慣與訴求調(diào)整設(shè)計(jì)和創(chuàng)意,讓設(shè)計(jì)能夠落地,使得用戶與網(wǎng)站實(shí)現(xiàn)良好的互動(dòng)。Ptengine是一個(gè)幫設(shè)計(jì)師探索用戶使用習(xí)慣的好工具,它所搜集的數(shù)據(jù)能清晰的反映網(wǎng)頁(yè)設(shè)計(jì)的實(shí)際效果,為迭代和優(yōu)化提供了有力的數(shù)據(jù)支撐。如果你想作出更**的設(shè)計(jì),試試Ptengine這樣的**工具吧。
原文地址:webdesignledger
優(yōu)設(shè)網(wǎng)譯者:@陳子木