本文作者將從交互和體驗上來聊一聊Forever21這個網站的首頁，enjoy~

Forever21（以下簡稱F21）成立于1984年，在全球都有連鎖店，在04年的時候銷售額就有6.8億美金，做電商或年輕的同學應該對這個品牌不陌生。同時，F21也擁有交互和體驗都不錯的線上網站和APP，也成為本人公司一直參考的競品網站。首先來看一下一組關于F21的數據：預估收入已經超過10億美金，分類排名已經高居16，網站的數據從人均停留時間，人均訪問頁面，跳出率來看都很不錯。F21雖然關閉了部分地區的門店，但在服裝行業的地位仍然不容小覷，成功必定有其道理。

拋開其營業模式不談，今天就簡單從交互和體驗上來聊一聊這個網站的首頁，畢竟我們作為一個產品或者運營這是我們前期更應該關注的事情。

頂部信息及導航

根據尼爾森F形狀網頁瀏覽模型，視覺頂部信息是我們首先映入眼簾的東西，且頂部信息會在各個頁面展現出來，因此，這個位置所展示的內容非常重要。作為一家電商網站，包郵從來都是一個很重要的噱頭，大家想想有多少人因為不包郵而打消下單的念頭的。因此F21在這個位置就告訴了大家滿50美金包郵的信息，一方面告訴了客戶網站擁有這樣的服務；一方面對提高客單價有幫助，對客戶湊單有暗示的作用。

關于導航有個很好的比喻，假設我們要去超市購物，我們如何找到自己想買的或者是感興趣的物品呢？一種是根據服務人員的指引，另一種就是根據超市的指標牌了。我們可以把網站想象成一個大型購物超市，每天都會有很多客人光顧我們的網站，在我們不能擁有這么多服務人員進行一對一服務的情況下，做好我們的導航就顯得十分重要了，這樣我們就能夠滿足大部分客戶的需求（找不到方向，找不到位置），剩下的極小部分客戶，就可以由我們的客服人員來處理了。

那么，如何去做好一個導航欄呢？一個導航欄好與不好，應該明確持久導航的四個要素：網站LOGO，欄目，實用工具（登錄注冊，購物車，收藏等），搜索。如果對這個不是很理解，大家想一想是否能夠快速的回答出來以下幾點問題就能夠馬上理解了“這是個什么網站”“我在哪個頁面”“本頁我有哪些選擇”“位置指示器”“我怎么搜索”。怎么樣，是不是一一對應上了？如果沒有，就要思考是哪里沒有，為什么沒有，需不需要有的問題了。

廣告位

F21鎖定的目標客戶主要是20歲左右熱衷時尚潮流的美國青少年，迎合青少年的著裝喜好，并且定價比較低。前面一句話摘自于百度百科，大家從廣告圖的設計及文案上是不是可以非常直觀的看出與目標客戶及其匹配。無論是流行趨勢，衣服風格，模特造型，低價促銷都能夠一一對應。在廣告位的圖片上，要建立有效的視覺層次（突出，相關，邏輯嵌套），最小化干擾（眼花繚亂，密集，太多“重點”和吸引力的詞），畢竟重點太多就是沒有重點。關于文案則需要注意用語，圖標和位置，創建清楚的格式或者段落，省略多余的文字，盡量用習慣性的用法。同時，作為強指引性的CTA按鈕也在廣告圖上得到了很好的應用。關于CTA按鈕指引性的強弱也是有區分的，如下圖所示，此處就不過多解釋CTA的作用了，文章太多了，不懂可以自行搜索一下（微信公眾號：先什么生）。

推薦位

推薦區是大多數電商首頁都會看見的板塊。F21首頁一共有三個板塊從上到下依次為New Arrivals，Best Sellers，Sale，三個推薦區分別擁有共性也擁有自己的特性。

共性：首先，他們都是每排展示6個，一共3頁，數量上一致并附有View More+的按鈕在客戶沒有看到滿意的產品時能夠鏈接去這個推薦區的集成頁去挑選更多的產品。其次圖片尺寸一致，都為大圖，符合近年來網站風格變大的趨勢，且圖片下方都留有足夠的位置去顯示商品的標題。據觀察，本人發現很多網站的推薦位只顯示了一個圖片和一個價格，既沒有標題或是標題剩余部分不顯示以…代替，也沒有價格符號。為什么說這些很重要，部分網站為了將SEO排名做起來，會在部分商品的標題內加入一些當前流行元素的詞，如XX爆款，XX材質之類的熱門詞，這樣就會導致很多商品標題的前半部分都及其相似，如果不完全展示標題，那么就會造成如果客戶想買衣服，但點進去的是條褲子，又要退回首頁的尷尬情況（比方說第二個推薦區域的第一個商品，不看標題你知道是賣什么嗎）。其次，沒有價格符號會對一些價格敏感的用戶造成困擾，如我以為是10人民幣結果進去是10美金，價格就超出了我的預算，當然這對于全球站影響較大，但這都是細節，需要注意。

特性：從平均價格上來看三個區域New Arrivals > Best Sellers > Sale。Sale推薦區擁有兩個價格，當前售價采取了顯眼的色彩去突出價格上的優勢，并與右側灰色的市場價擁有明顯的對比。

后續發現其首頁可以調整推薦區的順序，如Sale放在第一個，這其實反應了該網站不同時期的側重點。如F21是有一批忠實粉絲的網站，會定期關注網站的上新情況，因此在大多數時候都會將New Arrivals板塊放在推薦區的最上方。但是有些時候沒有上新，就需要調整一下位置，給客戶看到不同的東西。如果你的網站主要客戶來源是新用戶，那也不建議放新品區放在顯眼的位置。因為新品區價格上相較于清倉板塊，促銷板塊并不具備優勢。

社交板塊

近幾年社交平臺的火爆導致很多電商網站也開始著重于社交，從開始的買家秀到后來的社區其實都屬于社交內容，F21也是如此。

Shop the ‘Gram，有點像買家秀的升級版，用戶在Instagram上發布帶有#F21xME的標簽去參與，可以增強客戶與網站的互動，提高粘性。內容形式表現豐富，可以做到圖片，視頻結合，每個圖片都與網站所售賣的某個或多個產品綁定，可以直接鏈接去商詳頁，能夠有效的提升轉化。圖片的質量也看過去更有逼格，采用與Instagram相同的1:1的展現方式，默認10個，每次點擊+View More瀑布流加載10個（此處注意+View More+ 與 推薦區的 View More+的細節，簡直好評，一個當前窗口加載，一個新窗口鏈接）。但缺點在于圖片看上去較推薦區要模糊很多，不夠清晰，且在左右兩邊的文字都具有一定的引導暗示如 Show us，Follow us on Instagram都沒有對應的鏈接給到客戶，只是單純的文本。

Forever Connected是F21的周邊互動，有常規的社交渠道如Instagram，Youtube等，也有與品牌推出的聯合活動，網紅采訪等。其實這些也是為了拓展社交的渠道，一定程度上擴大了品牌的影響力，讓客戶有更多的渠道了解網站的動態，增強對核心用戶的滲透。

說到這里其實想說F21的迭代做的很好，其實我在調研這個網站的時候發現了一些個人認為不好的點或者bug，都在一周內全部優化了。如一些按鈕重合，如Connected區跳轉Instagram廣告圖應該新窗口跳轉而不是當前窗口跳轉以降低退出率及跳出率等。

自我解釋

自我解釋其實會在很多地方出現，是典型的“別讓我思考”的體現。那么什么叫自我解釋呢？比如當你創建一個獨有的名詞時，除非你能夠做到不言而喻，一目了然（指你能百度或者谷歌這個詞搜出來的東西大致相同或者大家都認可的詞，如一說到315大家都知道是什么日子）的讓客戶明白這是什么意思，不然你就需要一小段話去告訴客戶這是個什么東西，如F21的廣告位，社交板塊等都能發現在標題下有一句話去解釋這個大致是什么，這樣做的好處就是避免客戶點進去了發現其實不是想要的，造成一種心理落差，然后退回首頁又會造成操作成本的提升（微信公眾號：先什么生）。

說在最后

其實大家應該發現了，這一次首頁的分析是按照板塊來寫的，從頂部到廣告位到推薦位到社交板塊。為什么要如此呢？我想下面的一組圖片能夠很清晰的說明這個問題。

這一些都是觀看《DON’T MAKE ME THINK》后整理出來的想法。大家細心的話能夠發現其實很多網站或者是APP都是按照板塊來布局的，按照板塊來布局可以讓客戶在看到不喜歡的板塊時能夠安全的跳過這個板塊而不會造成什么損失。如客戶只對當前網站上架了什么新品感興趣，就不用去看前面的廣告位的信息直接可以略過。因為大多數客戶花在網頁瀏覽上的時間比我們想象中的要少，這一點我們可以從各自的數據上來觀看，比如首頁的瀏覽時間大概只有一分鐘左右，而你又希望客戶在這一分鐘內像做閱讀題一樣仔細看每一個板塊的內容嗎？顯然是不可能的?？蛻魪膩聿皇亲鲩喿x題，而是在快速掃看你的網站或者APP，就如下圖一樣（微信公眾號：先什么生）。

客戶體驗這個東西對于電商行業無疑是很重要的，因為國內外的電商競爭對手太多了，客戶轉向流失簡單。這也是為什么我們要盡量的去滿足主流客戶想要的東西，畢竟我們不是12306，我們沒有壟斷市場的能力，希望寫的這些對大家能夠有一定的幫助，讓大家的產品從“可用”邁向“易用”，謝謝。

作者：先什么生，微信公眾號：先什么生

本文由 @先什么生 原創發布于人人都是產品經理。未經許可，禁止轉載。

題圖來源于網絡