幾何

最近,美國Complete Nutrition公司的一款蛋白型咖啡的銷量非常差,希望我們能夠重設計其在線電商網站,以提升頁面轉化和銷量。所以,應其要求,我們也大致查看了對應的銷售頁面,發現確實存在很多影響用戶使用和購買的問題。下面我們就一起來看看具體存在哪些問題吧。

存在的問題

為弄清舊版網站轉化率低的真正原因,我們主要選用了兩種方式收集用戶反饋:

? 郵箱和Facebook群組用戶回訪。

? 彈窗式用戶調查問卷,實時收集網站和用戶相關數據,例如網站熱力圖(Heatmap)信息、用戶記錄以及個人信息等。

而以下是用戶反映的主要網站問題:

 

1.網頁加載響應太慢

用戶點擊CTA按鈕購買時,頁面加載響應時間太長(有時甚至長達5秒),且期間沒有任何加載狀態或反饋設計提示用戶。用戶體驗極差。

2.界面未提供任何樣品試用

3.產品價格昂貴

4.用戶對產品質量存有疑慮。畢竟原料成分太多, 無法一一溯源。

5.部分用戶認為頁面可讀性太差。

6.用戶找不到產品營養成分表。

7.用戶普遍不了解產品退貨政策。

8.用戶對公司的合法性和是否具有售賣資質存在疑慮。

 

當然,設計師并非神,解決不了所有問題。比如,以上反饋的8個問題,除卻前兩個與銷售和開發部門密切相關的問題,剩下的才是設計師能力范圍內能夠處理的問題。所以,下面的講解也將集中圍繞剩下的6個網站問題進行。

此外,在收集用戶反饋的同時,我們也針對各個小頁面設計進行了更加深入的分析,并得到以下結論:

1.排版混亂:頁面文字和圖片設計都太過突出吸睛,反倒讓用戶無法把握頁面重點。

2.用戶無從了解產品詳情。購買按鈕也設置在頁面頂部的右上角。用戶操作起來十分困難。

3.產品營養成分介紹存在重復且分布不均衡的問題。

 

總之,網站整體給人一種老舊過時的感覺。

知道了問題所在之后,那我們就一起來看看如何逐一解決這些問題吧。

首先,讓我們先學習一個非常實用的用戶心理學概念:

 

審美可用性效應

審美可用性效應是指用戶傾向于將更有吸引力的產品視為更有用。

換句話說,用戶傾向于相信:視覺上更好看的產品會更有用。盡管事實上,它們可能僅僅只是外觀漂亮而已。所以,針對這一用戶心理效應,要讓用戶充分信賴某一產品或服務,最有效的方法就是使其更具高級感。所以,要讓用戶信賴此款蛋白型咖啡,最有效的方法就是打造更具美感和高級感的在線網頁。

而為實現這一目標,我們主要從以下幾個方面進行了重設計:

 

著陸頁設計

如下圖,新舊版本的著陸頁主圖模塊設計明顯是不同的。

著陸頁主圖模塊舊版

著陸頁主圖模塊新版

著陸頁的主要功能就是向用戶清晰展示和介紹產品,讓用戶對產品有個大致印象和了解。

當然,也無需一次性呈現所有產品信息。而左邊的舊版設計,展示內容太多、太擁擠。所有信息都一股腦塞在右上角。而且選用的文字尺寸也太小,用戶閱讀起來非常困難。然而,右邊的新版設計則完全不同。簡短的文案設計,搭配高清吸睛大圖,既簡單介紹了產品,又清晰展示了產品的外觀,直觀吸睛而不失美感,極具高級范兒。

此外,你是否也贊成將購買按鈕放置在頁面頂部?因為用戶總是不太愿意滾動頁面來購買,對嗎?

但事實并非如此。用戶其實是非常愿意滾動頁面的!

如今,瀏覽網頁時,滾動頁面,已然成為人們的習慣性動作。不信?不妨立即打開一個網站試試。在限制不能滾動頁面的情況下,你究竟又能堅持多長時間呢?

如果用戶根本無法了解產品,即使將按鈕放置在頂部,吸引其完成購買,又有什么意義呢?

所以,從這一方面來講,將購買按鈕設置在靠后一些的地方是非常有必要的。

但這并不意味著,購買按鈕就應該放置在頁面的最后,例如頁面的底部。

以下是我們認為不能這樣設計的主要原因:

 

頁面信息構架設計

事實上,重設計過程中,一直困擾我們的是整個頁面的信息構架。我們更希望頁面的每一個內容模塊都能恰到好處的呈現。如圖:

1.棕色箭頭部分:我們將舊版本中的頂部模塊細分成了3個更小的模塊,以方便用戶分類查看。

2.黃色模塊:然后,又添加了一個新的黃色模塊, 以詳細介紹產品信息。既解決舊版中用戶無從了解產品詳情的問題,又提供了充足的空間展示產品,提升頁面質感和美感, 增強界面可信度。

3.深藍色箭頭部分:主要調換了視頻和營養成分模塊的順序。由于它們各自相對獨立,并不會對用戶體驗造成太大影響。

4.淡藍色箭頭部分:主要調換了用戶評論和常見問題模塊的位置。因為,相較于常見問題,用戶常常對產品評論更感興趣。 盡管這樣的改動可能并不會對頁面的整體結構造成太大的影響,但一般網頁都習慣將常見問題放置在頁面最后,符合網頁設計慣例。

如此,為符合用戶閱讀習慣和頁面設計慣例, 網頁各部分信息放置都有一定的順序和模式。

現在,你知道為什么購買按鈕不能設置在頁面底部了嗎?

還是不知道?答案其實很簡單。即使是經常購買產品的回頭客,也不愿意一直滾動到底部進行購買。 相反,他們更愿意稍微滾動或者直接點擊著陸頁CTA按鈕進行購買。

對于新客戶而言, 他們則更愿意按鈕展示在網頁的頂部。 如此,在完成頁面瀏覽和購買之后,就能夠快速找到頁面導航,完成其它操作。

 

購買設計

為提升產品銷量,Complete Nutrition公司最后還是決定改變原有的商業模式。

為什么呢?

我們先看看新舊模式的具體情況吧:

舊模式 ——?用戶可按需定制購買數量。一次性購買三袋以上蛋白型咖啡,即可獲得免費咖啡攪拌杯一個。

新模式 ——?取消原有的定制設計。用戶點擊按鈕,即可一次性購買三袋蛋白型咖啡,并免費獲得一個咖啡攪拌杯。如此,結果看似一樣,但用戶購買的流程變得更加簡單快速。

所以,哪個模式的用戶體驗會更好,結果顯而易見不是嗎?

舊版購買設計

新舊版購買設計

 

而針對用戶普遍反映產品價格太貴的問題,我們主要做了以下三方面的修改:

1.折扣價格和原始價格同行對比展示

盡管舊版設計也直接展示了每筆訂單的優惠度,但其文案設計和擺放位置與原訂單價格的關聯性相對價差,用戶很難注意到。而新版中單獨與每個商品相關聯的設計,讓用戶深信他們以更低的價格購買了更多的產品,且每件商品都享受到了優惠。

2. 突出“免費”

用戶都喜歡免費商品。所以,在新版設計中,我們選用綠色突出“免費”字眼,以吸引用戶購買。

3.利用圖標突出免費服務

新版設計中,在免費送貨和贈品服務介紹部分添加了圖標設計,以吸引用戶,激勵他們購買。而舊版設計中,類似的設計則不夠明顯,用戶很難注意到。

 

視頻推薦設計


視頻推薦部分, 直接展示推薦人年齡和職業的全新設計,很容易引起同齡或同職業潛在用戶的共鳴,從而激勵他們購買。

 

營養成分設計

對于產品營養成分模塊,我們做了以下更改:

1.舊版設計最大的問題就是:三種口味的營養價值其實是完全相同的,根本沒有必要分別展示。

2.根據用戶習慣,簡潔直觀的營養成分表更符合他們的胃口。而舊版頁面,點擊紅色“成分”字樣,才能查看成分詳情的設計, 則顯得復雜而累贅。因此,綜合各方面的考慮,我們最終選用了這樣的解決方案:用戶點擊各個咖啡口味,即可快速查看對應的營養成分表。

3.徽章許可 —— 在頁面設計中,添加產品相關徽章許可,體現產品的合法性和真實性,以獲取用戶信任, 也尤為重要。例如添加一些產品相關產地證書和官方認證等。盡管舊版設計中也添加了類似設計,但卻放置在了底部輪播設計的最后一頁,用戶很難注意到。

事實證明,大部分用戶都直接忽略了底部的輪播內容。即使看到,也不會查看輪播的所有的內容??傊?,最后的結果就是:他們完全沒有注意到相關的徽章許可。

所以, 新版設計中,我們將徽章許可設計提到了更靠前的位置,以吸引用戶注意。

 

常見問題設計

這個部分的重設計就很簡單了。所有問題直接分兩欄進行展示就可以了。

另外,填寫答案的位置也調整到了問題的正下方。這樣,用戶無需再從界面的一端閱讀到另一端,更符合用戶閱讀習慣,閱讀速度也會更快,體驗當然也會更好。

 

底部設計

舊版設計中明顯存在擴展鏈接和支付方式缺失的問題。所以新版設計中在這方面進行了優化。另外,為吸引用戶訂閱產品新聞資訊,也將對應模塊的文案設計“Like what you see”直接優化成了“Get 10% off”。

以上就是我們針對Complete Nutrition的產品頁面重設計的全過程。希望對大家有所幫助和啟發。

 

原文地址:掘金

作者:Chethan KVS

翻譯:摹客團隊

 

轉載請注明:學UI網 » 【UI/UX案例分析】設計提升轉化,看高手如何重設計網頁

登錄收藏
 
你可能喜歡的:
UI設計適合女生學嗎?會不會很難?UI設計適合女生學嗎?會不會很難?
Apple 的設計哲學 · 網頁篇Apple 的設計哲學 · 網頁篇
中臺系統基礎知識- 文字規范系統中臺系統基礎知識- 文字規范系統
8個大膽的賽博朋克網頁設計案例8個大膽的賽博朋克網頁設計案例
B端和C端產品設計有哪些差異?B端和C端產品設計有哪些差異?
讓你靈感爆表的創意進度條設計讓你靈感爆表的創意進度條設計
UI設計、交互設計、UI交互設計的聯系和區別是什么?UI設計、交互設計、UI交互設計的聯系和區別是什么?
超好看的30款網站側邊欄設計超好看的30款網站側邊欄設計
十大用戶體驗設計失敗案例,你知道嗎?十大用戶體驗設計失敗案例,你知道嗎?
搞定UI中報錯信息設計,輕松提升用戶體驗搞定UI中報錯信息設計,輕松提升用戶體驗
?
街机捕鱼城金库券 吉林11选5开奘结果 pk10计划人工在线计划 2013年上证指数数据 体彩和福彩开奖结果 上海11选5玩法 广东快乐10分遗漏 浙江手机版11选5走势图 安徽体彩11选5手机版 江西快3网上平台 新疆11选5专家预测