如何設計電商首頁運營後臺
各大紛繁複雜、天花亂墜的首頁,常被人說成難看但必須。難看是因為不簡潔,對於綜合電商或者提供多種服務的APP首頁,簡潔不是產品策劃考慮最多的。電商首頁為什麼長那樣?
使用者需要什麼樣的首頁?
使用者來到電商App,對想買什麼商品的清晰程度,影響他處理首頁所呈現資訊,從而影響產品策劃、頁面設計和運營方案。首頁是這三者的結合。想買什麼商品的清晰程度,可簡單分為有明確目標和閒逛兩種。一個對線下消費者的研究,提到男女購物時的不同表現。男性到超市前往往明確自己要什麼,喜歡直奔主題,找到拎著買單離開;女性更名副其實地逛超市,漫無目的帶著發現心態,一不留神結賬時購物車已經滿滿。兩種不同心態使用者,來到電商首頁,對獲取資訊有不同訴求。
購物需求明確的人,會問路、尋找最短的路徑、到達他想要的商品區,中途可能走到別的商品分類區、比較引數、詢價、在導購建議下確定選擇。在App首頁他會依賴搜尋和分類導航,可能因為換關鍵詞、換分類而來回操作,在搜尋結果或某個分類下商品中,比較不同商品,最終下單。這樣路徑下,產品需要提升搜尋結果準確度、最符合使用者想法的商品分類、篩選排序工具、臨門一腳的促銷提示,以此減少操作步驟,提升體驗。
逛的使用者,不太在意搜尋和分類,更容易受到促銷活動和導購內容吸引。看看有什麼活動,誰家又在打折了。問答、討論區、圖文、直播、短視訊都可以用來直接促成下單。滿足這類的使用者,需要垂直品類頻道的強運營,專題營造的購物氛圍,和導購內容的種草能力。
百分百需求明確和純粹閒逛的,這兩種人,現實中不存在。所有人購物時心態居於兩者之間,比如買某個牌子刮鬍刀、客廳換一批擺設、換季挑幾件衣服,心態像顏色漸變的光譜,從目的、類別、品牌、引數、屬性、產地等緯度,對想要的商品有不同期待。
購物在經濟學上是種交換,除了想要的商品,價格也影響心態。對價格敏感的人,關注每日折扣滿減、優惠券、福利社上新;以及各大節日和換季時的促銷活動。在促銷中,最搶眼球也許是力度大、數量少、時間短的限時搶購,它被很多電商放在首頁首屏或第二屏就可見的位置。
商場業態橫跨人類社會兩千年多年,今天電商只是將線下發生的事情,搬到了線上。找商品、挑選、導購、促銷、比價、搭配…… 線下購物時各種細分心態,都可以在電商中找到對應設計。
為數眾多、需求不同的購物者來到首頁,帶著各自期待,要滿足所有期待,像商場門面般的統一入口,必然紛繁複雜,大量展示和你我單個購物者無關的資訊,簡潔也就無從說起。只是,電商首頁不追求簡潔美觀,它首要任務是幫助帶著各種心態進來的人,快速準確找到自己想要的商品,促成購買。運營表現上就是將他們分流到不同欄目、品類、促銷、專題,在資訊顆粒度更小的空間中,更容易做出購買決策。
和其他領域產品一樣,電商首頁也承載建立品牌感知的任務。Logo、配色、排版設計烘托的氣質,讓使用者記住這個產品可以給他什麼價值、有哪些服務。即使這次來需求不匹配,這次建立的品牌-服務場景反饋,可等待下一次被喚醒。
比被記住更難的是被信任,門面要得到信任,基本原則如“Don't make me think”, 呈現所有元素都是明確清晰無困惑。有研究顯示,當大腦輕鬆無壓力時,更容易信任所聽所見。如果產品中任何元素,讓使用者猜測或困惑它為什麼擺在那裡,信任感自然降低,尤其是電商這種涉及交易的產品。
首頁的基本元件
為了滿足上面說的各種使用者各種心態,首頁會如何展示資訊?
搜尋:一般放在頂部,分有顯著的輸入框和只是不顯眼的icon兩種設計,有輸入框的設計更依靠使用者使用搜索功能找到商品
Banner:活動運營位置,圖片背後一般是各個專題或商品聚合頁
分類圖示:又稱金剛位,因為一般有八個。常常是各個分類入口,或者不同領域服務入口,也可在節日活動時作為各個分會場入口
限時搶購:一種很吸引眼球的促銷方式,容易吸引對價格敏感的使用者
垂直頻道入口:商品推薦、品類、品牌、垂直、促銷活動入口。類似線下賣場的導購;一般H5為載體,配置靈活、上下線方便
內容板塊:短視訊、圖文、直播;比起直接介紹商品頻道,更重視氛圍營造
個性推薦:定製給你看的商品;不過諸如淘寶等大廠已經實現頁面或板塊的千人千面
運營後臺
按照運營工作流程,配置顆粒度從大到小分為“頁面 - 元件 - 內容”三個層級。頁面即使用者看到的一個一個充滿圖片和商品的螢幕,不同頁面之間是網狀關係,頁面入口可以是頂部分類標籤欄,或者任何圖片、圖示、專題入口按鈕等元素。頁面由若干個元件構成,同個頁面元件往往是從上到下排列的線性關係。元件像一個個盒子,包裹商品、優惠券、活動等內容,這些內容又通過連結,引導至頁面,從此形成頁面的網狀關係。
運營後臺要做的事,就是將上面提到的頁面、元件和元件,像積木一樣拼接好,在正確的時間放在正確的位置,讓使用者看到。什麼時候展示出來,由運營的排期和節奏決定,比如在國慶節上線主題折扣欄目,時令季節是推薦當季新品;各個層級內容的位置,也由轉化率、市場調研等資料反饋時時調整。
元件承上啟下,是內容和頁面之間的橋樑:內容包裹在元件中,排版佈局靈活多樣;頁面由元件構成,像加蓋樓層一樣排布,疊出一個頁面。頁面或元件佈局配置可以很靈活,比如背景圖片顏色、標題字型大小、每個欄目/樓層的間距,或一個專題展示位中,幾張圖片相對的大小比例,一切皆可配。只是如此靈活配置,對技術和效能要求較高,加之一兩個畫素距離,對產品影響微乎其微,所以設計時需平衡自定義支援程度和開發/使用成本。容易的做法是,將特定元件樣式寫死,運營填充內容。
元件如容器,最簡單的後臺,應該支援對元件做以下配置:
- 所屬頁面:一般通過拖拽地視覺化互動,將元件移入相應頁面
- 位置:操作的互動可拖拽也可點選上移/下移按鈕
- 展示週期:按時自動上線/下限,也可在頁面層級控制展示週期
- 名稱:展示在前端面向用戶,有需要可以另外有別名,用以運營管理內容
- 對誰可見:僅對某類使用者展示,如新註冊還未下單使用者
- 內容填充:不同元件,限制不同內容,比如商品推薦欄目只放入商品
內容填充來源粗略分兩種,圖片/icon/懸浮圖示等宣傳資源,以及商品、圖文等實體庫中的資源。後者對應資料庫中唯一實體。操作時互動需要便捷準確地從內容庫中抓取並填上,比如商品推薦元件,應該支援按名稱、分類、SPU搜尋商品,還有各種緯度排序支援選擇;如果商品庫sku海量,還需增加批量匯入、或複製多行sku(逗號隔開)等功能。
既然首頁有分流使用者到更細分場景,配置元件內容時還需考慮跳轉,也就是使用者點選某個元素,會到達另外一個頁面。這些跳轉型別,可做成公用庫,方便開發複用,也利於靈活配置。每個banner、icon、專題圖片,都可以選擇跳轉到促銷活動頁、商品聚合頁、優惠券領取頁、外鏈等。另外有如商品卡片/縮圖、限時秒殺、積分兌換等元件內容,含義指向明確,分別跳轉對應的商品詳情、限時購活動頁、積分商城,適合單獨寫死跳轉型別。
總結
首頁運營後臺配置邏輯,由使用者對商城入口的需求決定。紛繁的需求意味著首頁佈局複雜、內容多、動態呈現,但抽絲剝繭,任何配置都由“頁面 - 元件 - 內容”三個層級步驟組成,通過連結相互引用跳轉。更復雜的只是擴充套件元件型別和增大樣式的自定義程度。