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)。