網站規劃怎麼做？談欣亞排排購改版

編輯註：本文作者為bobo，引用於該作者的部落格。雖然我們常會看到不少書藉或網站，會提到如何建立網站之類的的說明，不過通常所提的觀點都非常高，很多都是大方向的規劃，在實務上的作為其實很難得提到。剛巧bobo在去年年中的時候，執行了欣亞排排購的改版，將執行的實務與心得提出說明，很有一看的價值。剛好也可以補足一般網站或書籍講得不夠具體的缺憾。


我在2012年7月19日，執行了欣亞排排購的改版。雖然現在回頭看來，還有很多不完美的地方，不過改版、或產品創新一向是件有趣的事情；也是一個用來釐清每個網站、每個頁面任務的絕佳機會。將一些關鍵概念用文件記錄下來，更可以依循同樣的目標持續地檢驗、修正。

其實當初改版前的頁面是沒有保存下來的，所以我只能提供一些不盡完整的抓圖來示範。必須聲明的是，本文僅為個人經驗分享，關於確切的營運數字、或是內部策略等比較敏感的內容，並不在文章的討論範圍。

改版前。

改版後，網址：http://www.sinya.com.tw。

網站品牌與核心訴求

第一件事要抓出來的，絕對是整個改版的大方向，要不要新的網站品牌？需要搭配購買新的網址嗎？先來看看舊版的網站品牌：

第一個問題是「欣亞數位」4個字，就是平鋪直敘的公司名稱，沒什麼錯，但就是不有趣。另一個問題是 logo 上方還有一排「數位3C購物網」小字，這個資訊有點多餘，而且整體念下來是：「欣亞數位‧數位3C購物網」，不通順。

修正版的網站品牌與 logo 設計，調整了兩次，終於有了讓人滿意的版本。有趣的是，一個新品牌的誕生，通常在組織內部會有一段「尷尬期」，也就是大家念出欣亞排排購的時候會很害羞。不過一旦念習慣之後，想要改口都很難。

新名字當然不只要有趣，它也必須可以傳達網站的精神，讓其他的頁面、功能都在新品牌的引領之下展開。而排排購想要傳達的是排隊搶購這件事，網站的主力是銷售電腦3C商品，對於3C商品的愛好者，就算沒搶過，也看過新聞上漏夜排隊搶購 iPad、iPhone、Wii 的人群。我們也同步推出了排排購搶標活動，每天最快通關的使用者，就可以用5折購買事先公告的排隊商品。

在期限內點進闖關畫面的人，只要依序填好驗證碼、通關密語、Email即可搶標。
獎項名額有時會增加，但是熱門商品通常都只會有3人中獎。

不過排排購主活動推出一段時間以來，開始有一些負面迴響，畢竟每天獲得特價折扣的消費者只有3位，瞬間秒殺之後其他湧進來的顧客難免敗興而歸。在網站上進行限時限量搶購是有效果的，只是成果不如預期，有點可惜。

網路工具與專案管理

方向確立之後，再來就是確立執行和溝通的機制了。對於原生的網路或軟體公司而言，這些應該就是平常的工作模式。但是對於從其他產業跨足網站的公司來說，通常需要準備：

    一套即時通訊軟體，每個專案成員都要安裝
    一個專案管理工具，最好連同審核的老闆也願意積極使用

即時通訊軟體相對是容易搞定的，以前還有MSN、Skype要挑選，現在直接裝Skype就對了。將專案成員加進同一個Skype群組當中，每當網站有即時的事項要討論，只要在群組聊天室裡面丟訊息，每個成員都可以接收到。而且歷史記錄只要在同一個畫面裡向上回溯就可以「爬文」了。不過缺點是，Skype群組和聊天記錄在不同裝置之間的同步是有問題的，所以常常會有離職很久的聊天室成員，因為開了另一部電腦的Skype又被挖墳出來的囧事。

我習慣在群組建立的時候加一張代表圖片，看起來是不是很有戰鬥力呢？

網站改版一定要用完整的規劃文件為依據，這樣程式人員、設計人員、專案經理、上層主管才不會各說各話，樣樣依照文件來畫押、執行、與驗收。而專案管理系統，就是專門用來統整以上事項的輔助工具。

我在T客邦接觸過Redmine這套系統，它的進入門檻是比較高的，必須要自己架設與設定，功能非常齊全，但是要讓非專業人員願意學習、且勤於使用，並不是很容易。考慮到這些問題，我選擇了另一套Basecamp系統，它是一套典型的雲端系統，線上註冊、線上使用。它把複雜的專案管理簡化成了單純的to-do lists（待辦事項），可以說會用瀏覽器、會打勾勾的人就會用了，比較可惜的是它沒有中文介面，但輸入中文是完全沒問題的。另外Basecamp最低要繳交20塊美金的月費，雖然10個專案和3GB儲存空間已經相當夠用，對於比較保守的企業可能還是嫌貴。

Redmine的「開票」畫面，要填寫不少欄位和選項。

相對來說，Basecamp的開票畫面非常簡單，功能卻一點也不含糊。

分類選單與操作動線

回到舊版網站的問題，在主選單的地方，有很多不同性質的連結擠在一起，有些連結是有子選單的、有些則只有一層。且主選單是採取上下兩排、像漢堡一樣的設計，分為淺綠、深綠兩種顏色；但是什麼在上、什麼在下並沒有明確的邏輯可以依循。

舊版網站採用兩排按鈕、圖形式的主選單。

改版後的主選單，把重心放在協助顧客「找產品」上面。我們先將現有的列表頁面（list pages）展開來，根據相關的流量、產品數量、以及未來的銷售計畫重新整理組合。

這時又發現另一個問題，原本網站上主打著「快搜」功能，由於挑選電腦3C產品很注重挑選規格這件事，而快搜可以做到的，就是在頁面沒有重整（refresh）的情況下快速篩選指定範圍內的購買範圍。舊版的快搜與主選單一樣，有的頁面條件太複雜、有的頁面條件太少，所以我們將分類與快搜一起展開整理，讓顧客找產品的操作動線更為順暢、一致。

新版網站採用效能更好的文字主選單，常用的搜尋框也移到更明顯的位置。

某個舊版快搜頁面，左邊的篩選條件比右邊的產品列表長太多了。

新版快搜加上了計數功能，可以預先知道符合條件的產品數量。

一頁到底，還是分工合作？

無敵估價單是排排購網站上一個很重要的功能頁面，這要歸功於台灣各大電腦賣場傳統的銷售模式，是透過一張手寫的紙本估價單，和顧客確定光華牌電腦的各個零組件規格。而無敵估價單其實就是紙本估價單的網頁版，幾個同類型的競爭對手也都有同樣的估價頁面，包括原價屋的線上估價系統、Autobuy的線上估價、順發的估價單系統。

無敵估價單很明顯是個轉換頁面（conversion page），到這裡的顧客只有一個單純的目的：估價。所以它的頁面設計就是讓越多顧客估價成功，轉換率就越高。但是舊版估價單把估價、結帳兩個頁面組合在一起，這樣不只頁面高度會拉得更長，轉換目標也增加為兩個（估價＋結帳）。

絕大多數的網路購物，都不會把結帳頁跟其他頁面組合在一起，這是因為進入結帳流程，想要盡量提高轉換率，就是讓顧客做越少的選擇步驟，越容易成功。這是約定成俗的事情，最好不要與眾不同。

舊版估價單畫面已經找不到了，新版估價單，將右下角的「馬上買」設定為最主要的轉換目標。

頁面標題，SEO第一課

想要經營網站，一定要懂得SEO，也就是搜尋引擎最佳化這件事。以我參與過的網站專案來說，每天都有4到5成的流量來自搜尋引擎，你當然不可能白白把這些流量送給競爭對手。最基本的SEO，就是頁面標題（page title）上要有對的關鍵字，至於其他重點就不在本文的討論範圍。

在每次改版的過程當中，通常會建立一些新的網頁來替代舊的頁面，除了確認填入最適合的頁面標題，還得注意哪些舊版頁面需要設定轉址（301 redirect）到新版頁面，以便保留搜尋引擎所累積的頁面評分（page rank）。

有一位朋友跟我說：「網站改版，並不是把一個開關打開就可以開站了」。對於專案經理來說，其中一項開站前的基本動作，就是地毯式掃瞄所有的頁面標題，以免錯失SEO的加分機會。同樣的道理，有時候漂漂亮亮地做完一堆網頁，流量卻直直往下跌，事後才發現連Google Analytics程式碼都忘了嵌入，囧爆了。

欣亞排排購的頁面標題格式為：「含關鍵字的頁面名稱 | 欣亞排排購」，將網站名稱往後放，可以讓使用者搜尋的關鍵字更早出現，搜尋排名也就越高。

分組對照、操轉換率

總結欣亞排排購改版一年來，雖不盡完美，自己仍然又再進步了一些。對於電子商務網站來說，轉換率的提升是非常重要的。但是對於如何提升轉換率，不能只憑經驗想像，藉由Google Analytics的實驗功能，將介面改進收集成實驗組、對照組的數據，讓數據來說話，那麼網站規劃就可以再往上升級。

引用來源：bobo實驗室

↓↓↓↓↓↓加入癮科技粉絲團，有更多歡樂有趣的科技新聞↓↓↓↓↓↓