一、平面視角的社交電商頁面設計:
電商頁面的UI設計經常會出現的頻道有:首頁、團購、品牌特賣、專題活動、達人等。愛逛現有的頁面,也是按照這種布局設計的。如果把看頁面的視覺流程比擬成我們在shopping mall逛街的路線,這就類似於“樓層”的概念,不同樓層經營著“品牌區”“折扣區”“美食區”等等。這種設計的導航分類明顯,頁面配置清晰,對使用者進行方向感明確的視覺動線引導,能夠很好的展示商品圖並進行有目的主動搜尋。大家對於去年淘寶拋出的“千人千面”這個詞一定不會陌生,千人千面的概念簡單點說就是搜尋時根據使用者留下的軌跡,推送符合每個人不同需要的商品,這種個人化搜尋能夠根據使用者的喜好,更靈活的推送商品。在新版的淘寶和天貓上,愛淘等偏社交性板塊也佔了很大比重,這些功能主要是讓使用者主動關注一些店鋪和品牌,從而第一時間在首頁上展示這些品牌的動態。這些在設計上增加的社交關係,都是在圍繞“准、快”的推送商品做文章。
老版本的愛逛如上述內容一樣,按照現有大部分電商網站的模式進行了設計。但是就像傳統購物一樣,使用者不僅僅是需要在商場裡找到商品,影響最後下單的因素有很多,比如:
需要貨比三家
錯過折扣時間
確定購買目標後,受到店裡的顧客人數、老闆的態度等幹擾
單獨購物時猶豫不決,需詢問朋友
可見,在不斷完善“更快找到需要的商品”這個前期問題的同時,還有一個後期的重要問題需要設計,就是——“如何讓商品更快下單”。那麼,腫麼讓使用者更快下單?“馬上”下單!我們是否可以設計一些內容去影響使用者?針對這個目標,產品、用研、互動、視覺、重構的小夥伴們進行了多番討論。商品展示、頻道、商品詳情頁、下單購買頁,這些頁面就像商場裡的所有指示系統和商品。而商場裡的人流、一起逛街的朋友、老闆的叫賣聲、顧客的回應這些隱形因素。就是我們需要設計的社交關係點,由於愛逛本來依附於QZONE大平台,有社交網站的DNA,在整個流程裡穿針引線就有很多玩法了。
我們按照這個思路對愛逛使用者進行了一組調研,找出了一些可以嘗試的突破點:
使用者關注的點依次是:(1)打折特價(2)新品發布(3)品牌商品;(4)好友推薦
使用者經常想要分享自己購買的商品,而41.9%的使用者會接受好友推薦
分享目的依次是:打折資訊、推薦、求參謀、曬單、拼團
分享對象佔比依次是:閨蜜好友54.2%、同事、同愛好者、同學、另一半
使用者分享的聲音如此迫切,我們怎能視而不見,要讓使用者在虛擬世界中,也能找到結伴逛街的感覺~~~
二、立體視角的社交電商頁面設計:
在頁面中加入社交關係鏈之後,我們發現整個網站從平面化進擊成為立體化的社交電商思路。大致的關係如下圖所示。這時候我們就可以在與好友有關的點上進行設計,讓評價、喜歡等等因素,靈活的對各頻道的商品進行影響:
舉幾個例子:
1.打標籤,豐富使用者資訊庫內容。
◆ 初次登入時讓使用者對自己打標籤,比如關注的品牌、風格、所在地區。
◆ 讓具有好友關係的使用者互相打標籤。
◆ 給品牌設計標籤讓使用者選擇。
◆ 設計不同風格的卡通形象,類似QQ秀讓使用者選擇,從而瞭解使用者喜好。
2. 把折扣新品商品資訊從網站單一推送折扣資訊,轉化為使用者間傳播。
◆ 運營折扣活動時,可以通過關注按鈕進行定時提醒設定,以免錯過折扣時間。
◆ 使用者關注折扣活動後,激勵使用者分享出去。
◆ 收到好友推送的折扣資訊後,建立好友提醒。
◆ 在品牌資訊展示區,設計好友曾關注的該品牌折扣。
◆ 嘗試新的團購形式,讓使用者去拉好友拼團購郵費,發掘熟人關係。
3.建立更快捷的好友互動渠道,打破電商中“一個人逛街”的形式。
◆ 即時顯示商品的人氣,以及好友評論。
◆ 置頂喜歡人數最多的產品,適時變成團購併告知使用者。
◆ 以好友的喜歡和收藏為軸線,展示商品,從單純的商品展示頁,變為商品展示社區。
◆ 設計優惠券和紅包互贈模組,增加優惠券流通。
◆ 設計推薦和參謀快捷按鈕,讓互動變得更輕鬆。
這三個想法的目的依次是:快速瞭解使用者;把折扣等資訊,由網站單一運營轉化為使用者之間的運營;把電商中的陌生人買賣關係轉化成熟人之間的關係,增加購物時的互動。總結一下就是:打破使用者在網站中簡單的1.瀏覽商品2.進行購物的體驗,為使用者打造一個圈子,可以快速的看到好友對商品的評價,從而形成一人購買多人蔘考的形式,使網購這件事更有趣起來。
根據這個思路,我們在新版的愛逛中嘗試了幾個社交關係點:
這次改版綜合了產品和設計組的想法,對上述腦暴之後的點子進行了一些設計點探索。電商網站中的社交關係網如何更完美的編織出來,使平面化的設計方式真正變成多維度綜合性的商品展示方法,還需大家體驗後的更多ideas!