想做好電商頁面設計?先了解用戶賣場動線需求!
隨著電商的快速發(fā)展,以賣貨為主題的大型活動已不僅僅在 618,雙 11 開展,對用戶來說,平臺級別的大促越來越頻繁,逛賣場的機會越來越多,受到大量大促賣場信息的“轟炸”。那么賣場如何能快速引起用戶興趣,抓住用戶的視線,讓其找到想要的商品并點擊購買呢,本文根據(jù)以往相關項目獲取用戶反饋,整理出以下用戶對于賣場動線的主要需求。
一、核心需求
1. 易讀
會場活動頁包含的信息對用戶來說是豐富而復雜的,用戶瀏覽的場景本身是碎片化的,手拖動手機頻幕,視線跳躍閱讀,呈現(xiàn) Z 字型瀏覽軌跡,視線的停留時間更短,那么提升進行賣場設計時就需要考慮用戶易讀性,降低用戶理解成本,保證信息清晰的展示給用戶,讓其一眼就可以篩選出對自己最有價值的產(chǎn)品或者板塊。易讀體現(xiàn)在不同的方面,文字易理解、圖片干凈不雜亂、頁面展示邏輯易理解,符合用戶的認知慣性。
2. 精準
千萬不要忘記賣場的初衷:賣貨。無論頁面多么易讀,用戶最關注的還是賣場中商品能否真正符合自己的需求,商品內(nèi)容的節(jié)奏要把握好,推送要更精準,用戶不停的往下滑頁面,就是希望可以看到更多符合自己心意的東西,或者是提供更多與需求匹配的購物靈感,在動線上給到用戶更多刺激,讓用戶有點擊的欲望。
二、賣場動線模塊需求
根據(jù)用戶調(diào)研,針對會場頭圖、優(yōu)惠券及商品樓層等動線需求做了一些整理,供大家參考:
1. 會場頭圖:總覽全局,突出重點,尺寸緊湊
總覽全局——對用戶來說,需要通過頭圖快速了解會場頁面的主題和活動力度,頭圖banner提供的內(nèi)容決定了整個大促頁面的第一印象,并預判會場的其他內(nèi)容是否符合用戶的需求,因此需要降低banner的識別成本,讓用戶在更短的時間內(nèi)get到會場主題,從而激發(fā)顧客點擊的欲望。
“一進來看到這個圖就知道這個會場是干什么的,然后再決定是否繼續(xù)瀏覽?!?/p>
突出重點——頭圖Banner無法承載復雜宏大的畫面和大量的信息傳遞,要吸引用戶的注意,并有效的讓用戶了解會場主題,需要突出Banner重點,明確內(nèi)容核心點,否則沒有記憶點,也不利于信息傳達。根據(jù)眼動熱力圖來看,用戶更傾向于通過文字信息來獲取信息,重點表現(xiàn)本會場的主題、平臺的優(yōu)勢和用戶在該會場中可看到的商品和活動力度的文案普遍受到用戶關注。設計文字內(nèi)容清晰簡單直白,讓用戶更好的閱讀信息。
“會場的大標題讓我了解主要是賣什么的,后面的產(chǎn)品會有哪些類別。”
“吸引眼球的文案,比如秒殺、high 購,引爆,視覺沖擊力很大?!?/p>
尺寸緊湊——因為平臺會場頁的活動頁涉及的品牌多,產(chǎn)品多,用戶反饋看到的一些頭圖占用面積大而傳遞的有效信息較少。因此banner需要通過緊湊的布局來將首屏空間利用最大化,提高瀏覽效率,窄頭圖設計更加符合用戶的需求。
2. 優(yōu)惠券:優(yōu)惠醒目,規(guī)則清晰,化繁為簡
優(yōu)惠醒目——前面說過,用戶在瀏覽手機頁面時,停留時間更短,更聚焦,每一模塊不宜有太大的信息量,具體來說仍然是突出核心信息,對優(yōu)惠券模塊來說,優(yōu)惠力度的突出放大能更好的吸引用戶興趣。
下圖中右側(cè)優(yōu)惠券因利益點更加突出用戶反饋視覺感受更好,能快速抓取優(yōu)惠信息。
“京東的券太小了,和淘寶相比存在感太弱了。”
規(guī)則清晰——優(yōu)惠券用在哪里,是否通用,用戶期待在領取時有更加明確的規(guī)則的展示,使用規(guī)則展示清晰,可見。
“之前特意搶了圖書滿 300 減 150 的券,寫著部分圖書可用,但是不確定有哪些書可以用,最后發(fā)現(xiàn)只有工具書使用,是不是可以寫清楚一些優(yōu)惠券的適用范圍。”
化繁為簡——會場領取的優(yōu)惠券在本會場可通用,種類簡單,使用便捷。
“領券太復雜了,會場里領的優(yōu)惠券,有店鋪的,有秒殺的,有整點搶的,感覺比較亂。會場選到的東西和領的券不能匹配,通常都買不到想買的東西?!?/p>
3. 商品樓層:瀏覽連貫,排版透氣,間隔清晰
瀏覽連貫——樓層或者商品的排布需符合用戶的認知邏輯,當用戶按照品類查找商品時,在其認知中相關聯(lián)的品類應放置在一起,同類商品瀏覽更有連續(xù)性。
如下圖所示,游戲電視,游戲本兩個板塊未放置在一起,用戶需要跳躍的去尋找相關聯(lián)的品類板塊,部分用戶可能會因為瀏覽不連貫,或不知道頁面還有相關板塊而提前離開會場,錯過會場較靠后位置展示的興趣商品。
“這個版面的展示就有點跳,這幾個 3C 品類的應該是一類的,比如智能數(shù)碼,游戲電視、游戲本,都是相關聯(lián)的,但是中間間隔開了,我看完游戲電視看到智能家裝就不會繼續(xù)看了?!?/p>
排版透氣——設計上賣場頁面希望最大化的利用版面,但用戶更偏好寬松型的排版方式,讓信息不要一股腦涌到自己面前,缺少視覺重點。對比下圖中一行四商品展示案例,一行三和一行一的展示方式,商品內(nèi)容和顏色簡潔,清晰,重點突出,便于瀏覽。
基于眼動實驗和用戶反饋,用戶瀏覽商品時,一行四個的展示方式,信息多,用戶對各商品信息的關注較為分散,通常一掃而過;而一行一的展示,商品圖更大,商品標題展示更清晰,用戶快速辨別商品后,把更多視覺關注點放在商品價格的判斷與比較。
一行四
一行一
“這種一排放 4 個商品的就太小太擠了,一大堆信息,字也看得很費勁,不夠清楚,就大概看一下,我喜歡一排只有兩個的,或者只有一排一個的,文字、圖片、價格看得清楚,一直下拉也不覺得累?!?/p>
間隔清晰——對用戶來說商品展示的越多,信息量越大,其分在每一模塊上的停留時間可能更短,在這種情況下,清晰的間隔能讓用戶更好的“掃描”商品。
間隔的清晰主要表現(xiàn)在商品與商品背景、模塊與頁面背景上。下(圖一)中商品占據(jù)的位置太滿導致與模塊的名稱及價格展示區(qū)缺少足夠的間隔,給用戶信息爆炸的感受。而(圖二)的口紅為白色,與白色背景之間也缺乏明顯清晰的界線,區(qū)分不強。而根據(jù)用戶的反饋(圖三)和(圖四)純色背景邊界清晰的展示,觀看更加輕松。
“看圖片不知道是什么,都是紅色的,顏色重復,眼花繚亂,抓不住重點?!?/p>
“喜歡這種背景特別清爽的,一眼就知道是什么。”
這里要提的是,賣場的設計邏輯屬于營銷學范疇,對于設計方面的思考是復雜和專業(yè)的,本篇文章只從用戶瀏覽視角淺其析賣場動線需求,希望能對大家有所啟發(fā)。
作者:JellyDesign
想了解更多網(wǎng)站技術(shù)的內(nèi)容,請訪問:網(wǎng)站技術(shù)