方便购买的电子商务站点设计技巧

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