方便購買的電子商務網站設計技巧

Nadja Vol Ochs
1998年2月15日
設計電子商務網站應該記住的最重要的事情是使你的顧客購買方便。當我寫這篇文章時我正在設計一個電子商務網站，我所學到的一些技巧，可以協助你在電子商務網站設計中成功。

技巧1：使購買方便

這個技巧看起來可能是含糊和不明確的，但是它確實是最重要的建議。你需要把你自己放在顧客的立場上來測試你的設計。把那些可能阻礙使用者成功購買的問題列舉出來。向自己提問題，就像下面這些：

完成一次購買需要多少頁和多少次單擊？
相對於第二次購買，客戶最初需要填寫多少資訊？
能直接在首頁上完成快速購買嗎？
網站為怎樣在完成交易之前儲存選項提供清楚的指示嗎？
網站怎樣與使用者進行良好的溝通？
網站能確認使用者的行為並為使用者所進行的購買行為提供清晰的、簡明的反饋嗎？
使用者能在提交之前收集多個條目嗎？
提示2：製造強烈的第一印象

電子商務必須製造強烈的第一印象。這是你的公司與使用者聯絡和說服他們開始購買的重點。提供你的商店的商標是第一位也是最重要的事情。其次，很重要的一點是為你的商店的種類或門類提供一個清楚的、形象的定義。這一切可以用定位字元或在導航條中完成。
尋找的特徵也必須顯著的放在公司商標附近或幾乎所有網頁的頂部和底部。考慮在首頁上突出特殊的商品以激發客戶購買的慾望。提供到你的產品的故事的連結來提供有教益的資訊，並且可以增加吸引力。

提示3：把幹擾減少到最小：廣告不一定總是必需的

你可以考慮在你的首頁和其他地方上的整個購買過程中不提供任何的廣告。記住你的首頁的目的是鼓勵購買、購物。你不會想因為他們單擊另一公司的廣告而阻擋和失去他們吧。
如果你想登廣告，就把你自己的商品的特徵以某種方式加到顧客的購物籃上。最理想的是，那些產品與顧客的個人資訊聯絡在一起，所以顧客更傾向於購買它們，並且他們可能認為在你的網站購物便利。

讓顧客聚焦於你公司提供的商品，除非你與其他公司有互補的關係。最近，我注意到http://www.expedia.com/和http://www.barnesandnoble.com/從他們各自的首頁有一個連結到彼此的店面。這是一個好的交叉合作廣告策略鼓勵互補商業情形。例如，如果我購買塔希提島的蜜月票，我可能將對購買關於南太平洋的書感興趣。你必須儘可能聰明的挑選要放到你首頁上的廣告，不要隨便的展示廣告橫幅。

一旦顧客裝滿他們的購物籃並想付帳時，重要的是排除幹擾。清除阻擋顧客完成購物過程的無關按鈕和導航元素。

提示4：個人化

你是否在尋找一種方式，與你的顧客建立一種非常和諧的親密關係？你可以在顧客作為一個購物者或成員註冊後，為他們提供個人化的服務。使用這個資訊在首頁或不同部分的頁提供個人化的問候。

歡迎你，Nadja，祝你購物愉快。

你還可以提供一個要求輸入密碼的私人空間，在那裡每個顧客能檢查過去的訂單、訂單狀態、需求商品列表和贈品認證等等。

我找不到關於個人化的設計資訊了。要瞭解更多關於個人化的開發資訊，請訪問 http://www.15seconds.com/ 和 http://www.siteserver.com/；要獲得Microsoft Site Server個人化更深入的理解，請閱讀Rob Howard整理的Professional Site Server 3.0 Personalization and Membership ( http://www.microsoft.com/sbnmember/freebies/books.asp)。

提示5：避免冗長的說明

如果你需要包括一個長篇大論來說明如何使用網站和進行購買，現在是重新設計的時候了。使用者需要依靠最少的說明甚至不需要說明就能完成快速購買。大多數顧客將不會閱讀長篇說明，並會在一片迷惘中轉身離開。

http://www.urbandecay.com/網站使用一個唯一的介面程式來描繪他們的產品的映像和陳述。我喜歡這個網站，只發現一個需要改進的地方。網站管理員可能需要考慮清除怎樣添加項目到購物籃的冗長說明。當我第一次使用這個網站時，我沒有閱讀說明，單擊下面的映像也不明顯：



添加項目到購物籃，下面的方法會更加有效。
添加到購物籃

提示6：給位置提供可視化的線索

對於有幾個不同部分的商店，重要的是創立一種不同位置的感覺。可以通過改變導航條或背景頁的顏色，通過使用文本或圖形提供不同的標題來實現。

http://www.etoys.com/網站做了大量的工作為每個部分提供可視化線索。注意每個部分的導航條顏色和背景頁的顏色改變。這是一個簡單的可視化技巧，可以很容易添加到標準的網頁設計中以保持統一併且區別一個網站的不同部分。

barnesandnoble.com有一個出售書、軟體和雜誌的成功網站。注意這個設計將不同部分放在網頁的頂部。我建議他們創造更多可視的區別來區分這些部分。當前，只有圖形標題在改變，除此之外，每個部分看起來與其他的部分太相似了。

提示7：顯示產品

如果有可能，為每個商品提供相片。以三個尺寸處理相片：極小的，中等的和大的。極小的相片最好用於幾個產品的列表。在單個產品的水平，提供中等尺寸的映像，並能單擊觀看產品的放大版映像。更大的映像是不必要的，但是如果你的產品在極小的或中等的相片中細節不能被反映出來，就值得考慮採用更大的映像。

關於你的商品的細節，你提供得越多越好。如果你關於產品的網頁很長，要確保在資訊本文的頂部和底部都提供購買或添加到你的購物籃或手推車的選項。

提示8：關注映像

一種使每個網頁亮麗的方式是把所有用於普通文本的映像改變為應用於HTML文本。另一個方法是減少單個產品影像檔的大小。大多數產品映像是連續色調的相片。因此產品相片應該被存為24位的JPEG映像。當儲存JPEG檔案時，請測試你的映像的品質水平。例如，在Photoshop中的較低品質的設定將減小檔案尺寸和視覺真實性，而映像品質可能仍然是令人滿意的。

電子商務網站的一個小規則是保持每個網頁最大容量為35K-50K。另一個提示是，在不同的網頁上重複使用相同的圖形以節省額外的下載時間，增加連貫性和增加美感。例如，你可以在一個網頁上使用一個極小的圖形代表一個部分，然後在該部分的網頁上相同的圖形放大作為背景。或者反之亦然：根據映像的高和寬性質按照某一比例縮小大映像建立一個極小的映像。

提示9：激發購買的慾望

這可以用不同的方式實現。如果一個產品在首頁中被提及，在旁邊放上產品的映像和細節，出售價格和一個可直接購買它的連結。在新聞或特徵文章中，直接包含文章中討論的產品購買的連結。或者在一邊通常設定其他公司廣告的專欄中，為你的產品建立清楚的、集中的廣告，並設定廣告中所介紹產品購買的直接連結。

提示10：在長列表中交替背景色

一個使長項目列表可讀性更好的、形象的竅門是在每行和項目交替使用明亮的背景色。如果你在barnesandnoble.com網站檢索作者名你可以看到一個例子。查詢結果返回灰白交替的項目背景色。在動態伺服器頁（Active Server Pages ，ASP）檔案中這個技術可以被寫為一個數組：

<% colr = array ("#FFFFFF","#CCCCCC") %>
這個數組接著被從表格單元調用：
<TD BGCOLOR="<%=colr(x)%>">

提示11：允許使用者收集項目

提供一個購物籃或一個地方協助顧客在購買前存放產品。不要讓顧客在一次交易中不止一次的填寫冗長的付款，投遞和其他表格。在產品層級上提供一個連結付款，一個連結在繼續購買時添加產品到購物手推車。

一項目前正在變得流行的儲存特性叫做期望列表。這個特性與購物手推車類似，但是它不提供購買特性，而是作為你在購物時的一個儲存項目的地方。也許你的期望列表中的產品上市時，網站能通知你。

更多的提示

閱讀在電子商務網站Mary Haggard的初學者專欄，包括它的關於可用性的文章Sure, You Built It -- but They Have to Use It ( http://www.microsoft.com/workshop/essentials/forstarters/starts092598.asp)。