本文作者將從交互和體驗(yàn)上來(lái)聊一聊Forever21這個(gè)網(wǎng)站的首頁(yè)，enjoy~

Forever21（以下簡(jiǎn)稱(chēng)F21）成立于1984年，在全球都有連鎖店，在04年的時(shí)候銷(xiāo)售額就有6.8億美金，做電商或年輕的同學(xué)應(yīng)該對(duì)這個(gè)品牌不陌生。同時(shí)，F(xiàn)21也擁有交互和體驗(yàn)都不錯(cuò)的線上網(wǎng)站和APP，也成為本人公司一直參考的競(jìng)品網(wǎng)站。首先來(lái)看一下一組關(guān)于F21的數(shù)據(jù)：預(yù)估收入已經(jīng)超過(guò)10億美金，分類(lèi)排名已經(jīng)高居16，網(wǎng)站的數(shù)據(jù)從人均停留時(shí)間，人均訪問(wèn)頁(yè)面，跳出率來(lái)看都很不錯(cuò)。F21雖然關(guān)閉了部分地區(qū)的門(mén)店，但在服裝行業(yè)的地位仍然不容小覷，成功必定有其道理。

拋開(kāi)其營(yíng)業(yè)模式不談，今天就簡(jiǎn)單從交互和體驗(yàn)上來(lái)聊一聊這個(gè)網(wǎng)站的首頁(yè)，畢竟我們作為一個(gè)產(chǎn)品或者運(yùn)營(yíng)這是我們前期更應(yīng)該關(guān)注的事情。

頂部信息及導(dǎo)航

根據(jù)尼爾森F形狀網(wǎng)頁(yè)瀏覽模型，視覺(jué)頂部信息是我們首先映入眼簾的東西，且頂部信息會(huì)在各個(gè)頁(yè)面展現(xiàn)出來(lái)，因此，這個(gè)位置所展示的內(nèi)容非常重要。作為一家電商網(wǎng)站，包郵從來(lái)都是一個(gè)很重要的噱頭，大家想想有多少人因?yàn)椴话]而打消下單的念頭的。因此F21在這個(gè)位置就告訴了大家滿(mǎn)50美金包郵的信息，一方面告訴了客戶(hù)網(wǎng)站擁有這樣的服務(wù)；一方面對(duì)提高客單價(jià)有幫助，對(duì)客戶(hù)湊單有暗示的作用。

關(guān)于導(dǎo)航有個(gè)很好的比喻，假設(shè)我們要去超市購(gòu)物，我們?nèi)绾握业阶约合胭I(mǎi)的或者是感興趣的物品呢？一種是根據(jù)服務(wù)人員的指引，另一種就是根據(jù)超市的指標(biāo)牌了。我們可以把網(wǎng)站想象成一個(gè)大型購(gòu)物超市，每天都會(huì)有很多客人光顧我們的網(wǎng)站，在我們不能擁有這么多服務(wù)人員進(jìn)行一對(duì)一服務(wù)的情況下，做好我們的導(dǎo)航就顯得十分重要了，這樣我們就能夠滿(mǎn)足大部分客戶(hù)的需求（找不到方向，找不到位置），剩下的極小部分客戶(hù)，就可以由我們的客服人員來(lái)處理了。

那么，如何去做好一個(gè)導(dǎo)航欄呢？一個(gè)導(dǎo)航欄好與不好，應(yīng)該明確持久導(dǎo)航的四個(gè)要素：網(wǎng)站LOGO，欄目，實(shí)用工具（登錄注冊(cè)，購(gòu)物車(chē)，收藏等），搜索。如果對(duì)這個(gè)不是很理解，大家想一想是否能夠快速的回答出來(lái)以下幾點(diǎn)問(wèn)題就能夠馬上理解了“這是個(gè)什么網(wǎng)站”“我在哪個(gè)頁(yè)面”“本頁(yè)我有哪些選擇”“位置指示器”“我怎么搜索”。怎么樣，是不是一一對(duì)應(yīng)上了？如果沒(méi)有，就要思考是哪里沒(méi)有，為什么沒(méi)有，需不需要有的問(wèn)題了。

廣告位

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

推薦位

推薦區(qū)是大多數(shù)電商首頁(yè)都會(huì)看見(jiàn)的板塊。F21首頁(yè)一共有三個(gè)板塊從上到下依次為New Arrivals，Best Sellers，Sale，三個(gè)推薦區(qū)分別擁有共性也擁有自己的特性。

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

特性：從平均價(jià)格上來(lái)看三個(gè)區(qū)域New Arrivals > Best Sellers > Sale。Sale推薦區(qū)擁有兩個(gè)價(jià)格，當(dāng)前售價(jià)采取了顯眼的色彩去突出價(jià)格上的優(yōu)勢(shì)，并與右側(cè)灰色的市場(chǎng)價(jià)擁有明顯的對(duì)比。

后續(xù)發(fā)現(xiàn)其首頁(yè)可以調(diào)整推薦區(qū)的順序，如Sale放在第一個(gè)，這其實(shí)反應(yīng)了該網(wǎng)站不同時(shí)期的側(cè)重點(diǎn)。如F21是有一批忠實(shí)粉絲的網(wǎng)站，會(huì)定期關(guān)注網(wǎng)站的上新情況，因此在大多數(shù)時(shí)候都會(huì)將New Arrivals板塊放在推薦區(qū)的最上方。但是有些時(shí)候沒(méi)有上新，就需要調(diào)整一下位置，給客戶(hù)看到不同的東西。如果你的網(wǎng)站主要客戶(hù)來(lái)源是新用戶(hù)，那也不建議放新品區(qū)放在顯眼的位置。因?yàn)樾缕穮^(qū)價(jià)格上相較于清倉(cāng)板塊，促銷(xiāo)板塊并不具備優(yōu)勢(shì)。

社交板塊

近幾年社交平臺(tái)的火爆導(dǎo)致很多電商網(wǎng)站也開(kāi)始著重于社交，從開(kāi)始的買(mǎi)家秀到后來(lái)的社區(qū)其實(shí)都屬于社交內(nèi)容，F(xiàn)21也是如此。

Shop the ‘Gram，有點(diǎn)像買(mǎi)家秀的升級(jí)版，用戶(hù)在Instagram上發(fā)布帶有#F21xME的標(biāo)簽去參與，可以增強(qiáng)客戶(hù)與網(wǎng)站的互動(dòng)，提高粘性。內(nèi)容形式表現(xiàn)豐富，可以做到圖片，視頻結(jié)合，每個(gè)圖片都與網(wǎng)站所售賣(mài)的某個(gè)或多個(gè)產(chǎn)品綁定，可以直接鏈接去商詳頁(yè)，能夠有效的提升轉(zhuǎn)化。圖片的質(zhì)量也看過(guò)去更有逼格，采用與Instagram相同的1:1的展現(xiàn)方式，默認(rèn)10個(gè)，每次點(diǎn)擊+View More瀑布流加載10個(gè)（此處注意+View More+ 與 推薦區(qū)的 View More+的細(xì)節(jié)，簡(jiǎn)直好評(píng)，一個(gè)當(dāng)前窗口加載，一個(gè)新窗口鏈接）。但缺點(diǎn)在于圖片看上去較推薦區(qū)要模糊很多，不夠清晰，且在左右兩邊的文字都具有一定的引導(dǎo)暗示如 Show us，F(xiàn)ollow us on Instagram都沒(méi)有對(duì)應(yīng)的鏈接給到客戶(hù)，只是單純的文本。

Forever Connected是F21的周邊互動(dòng)，有常規(guī)的社交渠道如Instagram，Youtube等，也有與品牌推出的聯(lián)合活動(dòng)，網(wǎng)紅采訪等。其實(shí)這些也是為了拓展社交的渠道，一定程度上擴(kuò)大了品牌的影響力，讓客戶(hù)有更多的渠道了解網(wǎng)站的動(dòng)態(tài)，增強(qiáng)對(duì)核心用戶(hù)的滲透。

說(shuō)到這里其實(shí)想說(shuō)F21的迭代做的很好，其實(shí)我在調(diào)研這個(gè)網(wǎng)站的時(shí)候發(fā)現(xiàn)了一些個(gè)人認(rèn)為不好的點(diǎn)或者bug，都在一周內(nèi)全部?jī)?yōu)化了。如一些按鈕重合，如Connected區(qū)跳轉(zhuǎn)Instagram廣告圖應(yīng)該新窗口跳轉(zhuǎn)而不是當(dāng)前窗口跳轉(zhuǎn)以降低退出率及跳出率等。

自我解釋

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

說(shuō)在最后

其實(shí)大家應(yīng)該發(fā)現(xiàn)了，這一次首頁(yè)的分析是按照板塊來(lái)寫(xiě)的，從頂部到廣告位到推薦位到社交板塊。為什么要如此呢？我想下面的一組圖片能夠很清晰的說(shuō)明這個(gè)問(wèn)題。

這一些都是觀看《DON’T MAKE ME THINK》后整理出來(lái)的想法。大家細(xì)心的話能夠發(fā)現(xiàn)其實(shí)很多網(wǎng)站或者是APP都是按照板塊來(lái)布局的，按照板塊來(lái)布局可以讓客戶(hù)在看到不喜歡的板塊時(shí)能夠安全的跳過(guò)這個(gè)板塊而不會(huì)造成什么損失。如客戶(hù)只對(duì)當(dāng)前網(wǎng)站上架了什么新品感興趣，就不用去看前面的廣告位的信息直接可以略過(guò)。因?yàn)榇蠖鄶?shù)客戶(hù)花在網(wǎng)頁(yè)瀏覽上的時(shí)間比我們想象中的要少，這一點(diǎn)我們可以從各自的數(shù)據(jù)上來(lái)觀看，比如首頁(yè)的瀏覽時(shí)間大概只有一分鐘左右，而你又希望客戶(hù)在這一分鐘內(nèi)像做閱讀題一樣仔細(xì)看每一個(gè)板塊的內(nèi)容嗎？顯然是不可能的?？蛻?hù)從來(lái)不是做閱讀題，而是在快速掃看你的網(wǎng)站或者APP，就如下圖一樣（微信公眾號(hào)：先什么生）。

客戶(hù)體驗(yàn)這個(gè)東西對(duì)于電商行業(yè)無(wú)疑是很重要的，因?yàn)閲?guó)內(nèi)外的電商競(jìng)爭(zhēng)對(duì)手太多了，客戶(hù)轉(zhuǎn)向流失簡(jiǎn)單。這也是為什么我們要盡量的去滿(mǎn)足主流客戶(hù)想要的東西，畢竟我們不是12306，我們沒(méi)有壟斷市場(chǎng)的能力，希望寫(xiě)的這些對(duì)大家能夠有一定的幫助，讓大家的產(chǎn)品從“可用”邁向“易用”，謝謝。

作者：先什么生，微信公眾號(hào)：先什么生

本文由 @先什么生 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來(lái)源于網(wǎng)絡(luò)