Checkout产品设计：一步走还是四步走
本文的图片和主要观点来自：A/B Test Case Study:Single Page vs. Multi-Step
作者是Linda Bustos、Janis Lanka，她们都来自Elastic Path Software
从文字标题上来看，作者原本的意图是介绍一个通过A/B测试来提高产品性能的案例（温哥华冬奥会官方特许商品购买网站），但大家实际留下的评论以及关注重点都被集中在这个具体的Checkout设计的交互细节上。当然我也被这个我认为有些优雅的设计所吸引，因此简单翻译并整理一下原文和原文评论。好了，言归正传。
什么是Checkout？就我个人的理解来说就是挑选商品结束后进入结帐的流程。从决定开始结帐到输入联系信息、支付选择到最后的支付成功，整个过程就叫Checkout。在改版前，她们原来的Checkou流程是这样的：
原Checkout的sign in
control
可以发现原 Checkout流程分成：Sign in、Shipping、Billing & Review、Receipt，也就是说从点Checkout按钮到最后结帐成功需要走四步。
经过重新设计后，新的流程变成了一步（见下图）。怎么做到的呢？
首先，取消了Checkout前的强制Sign in（只保留Returning Customer Sign in以便于直接获得Shipping和Delivery option等信息）。其次，将Shipping和Billing信息进行整合，以简单扁平的方式形成一个较长的表单供用户填写并确认。页面右侧是订单详细信息。点击Place Order后Checkout完成后，提示用户可以新注册帐号（Create Account）以便跟踪具体的订单情况。
另外一个我个人认为不错的交互是右侧的Order Summary展示。由于合并后的页面较长，因此她们把Order Summary做成能随着页面上下浮动，这让用户始终能看到订单的详情。
从最后的数据上来看，新设计相比老设计：
- 购买完成率上升了257.26%
- 平均订单额上升了8.54%（这个数值的上升作者自称始料未及，也不知道具体原因）
- Overall site conversion rate上升了0.54%（这个数值作者没有很好的解释清楚，评论下方也有人在问）
新的Checkout设计
Checkout成功后，提示注册
为什么她们会这么设计，要知道连Amazon也是4步checkout的，她们是怎么考虑的？思考过程作者在原文中没有透露，但从下方的激 烈的评论和作者的回应中我们可以基本找到答案。
首先，这个 store的目的是销售特许商品。因此通过简化产品设计和降低门槛来提高购物的转化率是她们的核心KPI，抛开运营的压力（主要是不注册可Checkout不利于二次购物和商品推荐），她们的设计出发点就是尽可能多的帮助用户完成订单。多余的Checkout流程会给用户机会来改变他们的选择。（评论中一哥们提到他做过相似的实验，多一个页面转化率就有少20%。）其次，由于她们销售的属于利基（niche）商品，因此Checkout步骤少或多并不影响实际的转化率。因为用户只能在这里购买，没有其他选择，这以因素也可以认为是之前提到的第二个指标并未提高很多的原因。最后，另外一个老兄发现他们只提供VISA支付，作者解释到这是因为VISA是奥运特许合作伙伴，而这一 客观因素也帮助她们能在设计上少费些周折。如果必须有多种支付方式选择，那么真的把所有的支付方式结合其他信息放在一个页面上，我想她们也会有思想斗争的压力的：）
题外话，有朋友会认为她们的表单设计也并非完美，比如在实时数据验证、错误提示、表单字段的提示上等等也有可改进的地方。但我们应该认识到完美又优雅的设计往往可遇而不可求，最合适的设计才是我们应该努力去实现的。我想至少在这个具体问题上，这个例子给了我们一个榜样。
最后总结一下，本例告诉我们在可能的情况下，把多页面表单适时地整合成不太复杂的单页面表单也是一种提高转化率的方法。这也是一种明明白白告诉用户你有多少表单信息需要填写的直白方式，但这么做的前提是必须很好地认识用户的行为以及行为背后潜在的需求，切不可为了KPI而不顾一切。
原文评论中其他有价值的问题：
- 如果把订单额从现在的$45.60变成$456，是否实验的结果依然是如此？
- Checkout结束后的注册有多少效果？
- A/B测试的注意事项：何时开始、何时结束？
真正的最后，有问题的朋友欢迎各位看了原文后和我讨论。
移动电子商务可用性4：表单和结帐
【译者：耿人杰 原文：Mobile Commerce Usability：Forms and Checkout 作者：Linda Bustos】
这是此系列的第四部分：
以下是我参考了Best Buy, Target, Sephora, Moosejaw, Barnes and Noble, Amazon, Sears2Go, Ralph Lauren和 Tickets.com（每个网站都直接链接到它们的移动版本）后的一些关于移动设备网站可用性的建议。
表单和结帐处理
就像我在本系列的第三部分产品展示页面和购物车里提到的，Best Buy、 Sephora、 Target和Moosejaw的新站不支持移动支付。所以在这一部分提到的网站是Barnes and Noble、Amazon、 Sears2Go、 Moosejaw的老站和Ralph Lauren。
我对于移动电子商务网站如何最大程度在支付流程能拥有最大用户转换率有如下建议：
- 允许有访客（非必须注册）支付选项
- 提供支付安全保证和交易信任
- 提供隐私保护协议的链接
- 在支付的第一步要求email地址
- 在支付表单中不需要填写不必要的内容
- 必填项用*标识
- 允许用户复制账单和快递地址（用tickbox来实现快递地址复制，同账单地址处理方式一样）
- 在支付的每一步提供技术支持电话
- 利用cookie随时记录购物车的内容，如果用户放弃将某个商品加入购物车，将之前保留的项保存到下一个会话
- 将步骤用可视化的进度显示出来
- 利用个性化推荐/tag技术，通过产品推广代码来识别用户特征，并把这些信息对其他人隐藏
当我在使用之前提到的几个网站的支付流程时，我发现没有一个使用了可视化的进度显示，也没有个人隐私协议和客服支持电话（或许他们认为用户不能一边填表单一边打电话，但在电脑上你可以）。还有就是我无法测试个性化推荐。
但如果有一个移动电子商务网站能包含以下所有功能，我想那它应该就是一个完美的例子：
访客支付选项
没有人愿意因为需要支付而必须去注册，这种人在移动端更多！
Barnes and Noble很明确的表示注册不是必须的，并且暗示现在注册可以使下次支付时更快捷。
Sears2Go也展示了注册的好处，且也允许访客支付，但它把访客支付选项放在首要位置，用一个粗体字的按钮来呈现它。Sears认为它的用户通常不会去读这段文字，而访客支付按钮本身能做自我解释。
把访客支付放在首要位置能提高用户转换率，这是因为用户极少会假设他/她需要一个帐号或在支付前必须有一个帐号。因此此方式假设用户想用最快的方式完成支付，这也确实是用户想的。
Ralph Lauren将登录页面和支付的第一步（账单和快递地址信息输入）结合起来。这个方法能减少支付步骤。
Amazon的简单登录表单是在线支付的一部分。这实际上也是强制注册，但你不会有所感觉。
要减少用户登录次数取决于用户记住邮件和密码，但回头客经常会忘记（用户不得不至少记得email地址来找回密码）。许多简单注册的帐号，很难和用户信息结合起来（一个忠实的用户看上去像5个散乱的普通用户）。这是web端和移动端都面临的问题。
安全保证
即使了解公众对于手机支付的安全心存疑虑（正如在Multichannel 2.0在线讨论会上提到的），但仍然只有Amazon有一个“为什么使用信用卡是安全的”的提醒链接。
在第一步就要求电子邮件
越早在支付流程中要求用户提供电子邮件，越早能在用户放弃购物时触发提示其撤销放弃行为的邮件。虽然这个追踪用户试图改变他们想法的主意有些争议，但这是许多零售商挽回生意的一种方式。
当然，Amazon的第一步就是要求电子邮件。其余是在账单/运费页面在8-10个必填项后要求另一个电子邮件。这是因为给一些多疑的人提供另外的联系方式。B&N包含“你的邮件将被用于联系你有关你的订单需求”的提示，Sears2Go使用“告诉我们如何把订单确认消息发给你”。如果能包含一行邮件隐私协议那将会更有帮助（例如，你不想分享地址或收到促销邮件）。不幸的是，Ralph Lauren没有任何安全保证提示，甚至没有邮件列表例行检查确认框。
感知表单的困难
表单越长，用户越感到乏味，从而更少用户有兴趣去填写它。但大多数用户能识别带*的必填项和选填项，所以关键是要用上*。通常用非常规的文字提示，如“*粗体是必填项”是不明智的（哪些是粗体？）。不要让用户去猜测。
允许快速复制账单地址到运送地址
这是对新用户的标准流程，而回头客能够选择运送地址和付款方式，如同Amazon：
唯一在手机屏幕上困扰用户的是哪个按钮对应哪个地址修改。一个小三角标记指向可以修改的地址可能会有帮助。错误的运送地址将会导致大麻烦。
Moosejaw老站的一个省时功能是当你在第一步输入电话号码时，基于你的区号等相关信息，可以在账单地址上预填信息。
估计到达时间
我之前提到过用实际的天数来表示到达货物到达时间比说“X工作日”体验要好。对用户来说这种方式需要思考的时间更少。在4个网站中，只有Sears2Go提出了这种说法：
在支付流程中允许修改订单
许多零售商诸如Amazon，在用户进入支付流程后希望保持用户的专注，因此它们将导航去掉了。但这又导致另外的问题发生，如果用户想在最后一刻修改或增加订单将无从下手。Barnes and Noble允许用户修改订单，而Sears2Go允许用户取消并返回首页或回到购物车总览页面。Amazon则有一个进入购物车的链接。
提供可选的支付方式/通过电话支付
我没有发现这几个网站使用任何可选支付，如PayPal的移动支付，但 Barnes and Noble很有意思地提供了电话支付选项。这并不是一个直接电话支付选项，而是有点类似提供一个800电话来预定。当你完成订单后，用户将会获得一个确认号码（通过电话和email）。
虽然通过电话下订单尤其自身的风险，但一些用户仍然会感觉这样的方式相比输入信用卡号码更安全一点。对Barnes and Noble来说，另外一个可能让他们的头疼的问题是用户下了单却没有通过电话电话确认，导致支付流程无法完成。
最后的总结
通过研究这些移动电子商务网站，此系列并没有试图去给出一个完美的用于实践参考的指南，而是希望收集一些基于观察的意见收集。请记住我主要是用iPhone来体验的这些网站。大多数WWW网站的可用性指南不适用于移动网络，这主要是基于设备的特性和使用场景。我的建议是如果移动战略是你生意的一部分（无论是提供交易还是客户服务），那么请提供一个友好的移动网站。当你在设计移动网站时，请时刻关注行业竞争对手的产品，并确保在许多不同的设备上测试过你的网站，并让真实的用户试用它。
移动电子商务可用性3：产品展示页面和购物车
【译者：耿人杰 原文：Mobile Commerce Usability：Product Pages and Cart Summary 作者：Linda Bustos】
以下是我参考了Best Buy, Target, Sephora, Moosejaw, Barnes and Noble, Amazon, Sears2Go, Ralph Lauren和 Tickets.com（每个网站都直接链接到它们的移动版本）后的一些关于移动设备网站可用性的建议。
产品页面
虽然你能用任何只能手机接入电子商务网站，但优化过的产品页面通常更易用，如你在下图看到的：
产品描述
当主页去掉图片和多余的导航后，页面就变得更易于手机使用。请始终认清什么内容是对在线购物体验最重要的：
- 当要决定是否从在线零售商购买商品时，77%的“非常可能购买”的人会被产品信息内容的质量所影响（描述、版权信息、图片和工具）
- 79%的人在没有完整产品信息时不会或几乎不会购买商品
- 76%的人认为网站提供的内容并不足以完成产品研究或导致“经常”、“非常频繁”或“有时候会”在线购买商品
- 当没有足够信息时，72%的用户会去竞争对手那里做进一步的研究
信息来源于e-tailing group，2007
最好的在线商店提供最丰富的产品描述、图片预览、图片缩放、评论，甚至是产品比较工具。当然，把所有这些都放到移动网站上可能不是最优的方案，也可能是不现实的，但请注意那些能代表产品最核心优势的品牌、质地和模式的信息展示。
上图是BestBuy电子商务商店的HDTV产品页面，下图是移动版的商品界面：
BestBuy的例子简单明了，但如果移动网站是作为产品研究而用的，那么是否展示的这些信息足够能导致商品被卖掉？用户能理解“HDMI输入、屏幕高宽比、黑色钢琴烤漆机壳”这样的行业术语吗？
用户总是想获得尽可能完美的无缝接入体验。如果你已经用一个可用性很高，内容丰富的传统网站赢得用户的忠诚度，那么使移动设备的体验满足用户的预期也同样重要。
小心那些产品描述段落不以连贯方式显示。Moosejaw在它的新设计（右）中摆脱了冗长且不连贯的描述（左）：
老版网站有这样几个问题：HYPN OLV可能是对颜色的描述，但它的意思并不明显。click-to-call和add to cart这两个按钮离的太近了，在触摸屏上很容易点错。在段落底部的Zoom Prod. Image call-to-action看上去并不像一个链接。新网站看上去感觉更像传统的Moosejaw网站，对产品的描述有一贯Moosejaw诡异的风格。click-to-call链接和大图片很容易在触屏上点击。
Target利用了点句来简化表达的信息，使得内容更易于浏览：
你甚至能把产品细节信息通过短信发到自己的手机上。
Sears2Go允许你读取一段产品描述，如果你需要还可以展开显示更多细节。这既给厌恶滚动屏幕的用户带来了便利，也满足了研究者对于详细信息的需求：
Sephora和Sears在产品页面的顶部给出产品评分和评论链接：
小心使用表格，它们经常迫使用户横向滚屏，有时同时在纵向和横向滚屏，像Ralph Lauren在iPhone上表现的：
Moosejaw允许用户展开和收起评论，这最大程度地减少了页面读取的时间：
图片
考虑到当要决定是否从在线零售商购买商品时，77%的“非常可能购买”的人会被包括图片等产品信息内容的质量所影响，所以不应在图片的质量上减少投入。Target、Ralph Lauren和Sears都默认显示大图，而Moosejaw则提供可选的图片显示方式。显然，通过高质量的图片展示，你能获得较高的商品购买率。
按钮布局
对触摸屏用户来说，要避免把“Add to Cart”、 “Add to Wishlist”和“Continue Shopping”等按钮堆积在一起。让各个按钮间保留点空间，或一行一行的摆放他们：
购物车总览
Best Buy、Sephora、Target和Moosejaw只支持在移动端直接结帐。如果是这样的话，这里有一些小贴士：
Ralph Lauren和Sears都允许编辑购物车，Barnes and Noble允许将商品转移到收藏夹中。令人惊讶的是，Amazo没有购物车总览页面，而是直接跳转到登录页面。
Ralph Lauren的购物车总览页面让用户确认数量并高亮强调通过手机购买能免运费。Sear提供运费和自取选项，但当商品不适合自取服务时则不能设置。最出色的功能是相Sears那样在购物车按钮上提供安全购物图标，正如我在上周的多通道2.0在线讨论会上提到的那样，害怕安全性没有保障是用户用手机进行购物的主要障碍。
Tickets.com很有意思。它的商业模式很独特，因为票务购买是有时限的，如果在一定时间内没有完成交易则所购的票仍然会回到库存中。你也几乎看不到在电子商务的结帐页面有验证码，但票务行业相对其他在线零售业通常对于可疑的在线行为更敏感。不幸的是，Tickets.com的验证码很难识别。
下一篇我们将专注于结帐流程和表单设计。
移动电子商务可用性2：搜索和目录页
【译者：耿人杰 原文：Mobile Commerce Usability：Search and Category Pages 作者：Linda Bustos】
这是此系列的第二部分：
以下是我参考了Best Buy, Target, Sephora, Moosejaw, Barnes and Noble, Amazon, Sears2Go, Ralph Lauren和 Tickets.com（每个网站都直接链接到它们的移动版本）后的一些关于移动设备网站可用性的建议。
搜索
错误处理
如我在此系列的第1部分：主页和导航中提到的，一些网站，像Best Buy和Barnes and Noble提供关键词搜索而不是目录浏览选项。如果你尝试用此方式，确保网站的搜索引擎能非常好地处理同义词和相近词。通常，相比传统的电脑，用触屏手机和小键盘输入更容易出错。搜索引擎自动补全技术，像iTunes Store那样的技术也很有用。
布局
许多网站在每个页面都显示搜索框，就像传统的电子商务网站那样。
搜索结果和目录页面
排序选项
Best Buy为它的每个搜索结果选项编号，这样利用数字键盘就能快速选择对应的搜索结果。此外，搜索结果不展示缩略图（为了更快的页面读取速度）。一个潜在的问题是默认搜索结果，如果有200个搜索结果并且是按价格进行排序的，那么价格低且包含此关键词的配件可能被显示在前几页。例如，HDTV电缆可能被混淆在HDTVs的结果页面里。
Sears提供了更多的选项。你能通过目录、价格、评分、关键词相关度和流行度进一步过滤搜索结果。这真的是非常有用：
sears sort
因为一些移动设备没有“回退键”，所以推荐提供一个链接返回到搜索结果列表。不幸的是，Sears并没有这样做。
点击次数最少化
在目录列表也包含库存量（实体和在线库存）和价格，这减少了用户的点击和页面读取次数并有效地提高了购物的体验。如果你提供店内取货，请确认哪些商品适合于此服务。Sears甚至包含提供在姐妹商店取货的服务：
Amazon提供一项叫“nice-to-have”功能使你可以在目录或搜索结果的右侧把某个商品加入到购物车或想购买的商品列表（在iPhone上，点击箭头来展开列表并选择相应的项）。这减少了页面的读取次数，对“猎取者”来说可以从商品描述中准确地了解这是不是他们想要的商品。
什么是可点击的？
确保图片的缩略图是可点击的。Moosejaw的老版设计很令人困惑，只有标题是可以点击的：
是否在搜索结果展示缩略图和星评取决于你，它们会降低页面读取速度但能帮助用户做出更好的选择。Best Buy选择不展示缩略图，这可能是由于很多产品在缩略图中的呈现并不好。如果你不显示缩略图，请确保在搜索结果间有足够的空间使你用手指进行操作。
喜欢这篇文章吗？敬请期待下一篇：产品展示页面和购物车。
【译者：耿人杰 原文：Mobile Commerce Usability：Home Pages and Navigation 作者：Linda Bustos】
当越来越多的零售商面临网站优化的挑战时，伴随而来的是移动网络的独特需求、可用性挑战和机遇。为移动设备设计网站不是一个新鲜事物，但对于在线电子商务网站来说这还比较少见。如果为用户提供随时随地的服务是你非常重要的电子商务战略，你就不能仅仅依靠智能手机来通过简单转换你的传统网站来达到期望的移动设备可用性。是否针对移动设备进行网站的优化，其效果是有着显著差异的。
思考90年代末WWW网站的可用性指南，一些对今日的移动网站设计存在疑问：
1.滚动，水平滚动
2.小字体，不友好的Web字体
3.残破的图像，不兼容的插件
4.没有显示出可点击状态的链接
5.缓慢的页面读取（“World Wide Wait?”）
6.复杂的导航，简陋的标签
7.不能识别同义词和拼写错误的搜索工具
8.被忽视的Banner广告，如果某些东西看上去太像广告，那么它将被忽略
9.复杂的表单
10.在结帐前要求注册
11.不清晰的信息传达、网站指南
这个列表还将继续延伸下去。加之移动设备窄小的屏幕、缓慢不稳定的网络连接、对富媒体的缺乏支持、数据传递的成本、较短的电池使用时间等等，对于网络的头痛演变成了对于移动设备的偏头痛。
业界宣称到2010年，移动电子商务的的市场份额将会以爆炸般的速度暴涨到2亿美元？你在跟我开玩笑吗？
是的，这其中很大份额是数字产品下载，包括铃声和桌面壁纸，但有不少潜在的移动购物网站蠢蠢欲动，即使是在微型屏幕体验上饱受折磨。
有不少零售商已经意识到并付诸行动于移动网站的开发。相对没有针对移动设备进行任何优化的网站版本，它们中的一些干的不错，另一些做的非常棒。以下是我参考了Best Buy, Target, Sephora, Moosejaw, Barnes and Noble, Amazon, Sears2Go, Ralph Lauren和 Tickets.com（每个网站都直接链接到它们的移动版本）后的一些关于移动设备网站可用性的建议。
这是总共4篇关于移动商务网站设计和可用性的系列文章：
注意：在我的研究后，Moosejaw在一个新的平台重新发布了它的移动网站。因此，我在这个系列中同时使用了老的和新的两种界面。
搜索引擎
选择URL
相比在web上，移动设备的输入通常相对更困难一些（相对我个人而言，这在用长指甲使用iPhone时尤其突出），而长链接通常对输入者来说是梦魇。虽然并没有要求移动网站一定要用哪种形式的URL，但通常m.site.com是相对容易被用户记住的地址（容易记且输入的字符更少）。Sears是唯一一个我见过的有自己独立域名的网站，Sears2Go.com，这也是一个相当易于传播的名字。
如果可能，尝试注册m.yourdomain.com，yourdomain.mobi和mobile.yourdomain.com，然后让它们指向同一个移动版本。这会对用户在猜测你的移动网站URL时有所帮助。
Meta描述
这是在搜索引擎结果中出现的几个网站meta描述的截图。将移动网站的功能特点用简短的文字概况在meta信息中是个非常有帮助的举措。
想了解更多关于搜索引擎和移动网站的信息，请参看你需要一个移动版本的电子商务网站吗？
主页设计
布局
传统的网站经常是充斥着图片、广告展示区域、Flash广告、AJAX效果、多层导航菜单和许多按钮。如果用智能手机访问传统网站，通常需要像使用小孔查看地图那样的放大缩小页面。也需要很长的时间来读取这些大容量的内容。看一下Sephora和Target的传统主页在iPhone上的表现：
现在看一下Tickets.com和Barnes and Noble的Web主页和经过优化过的移动站点主页：
为了在小屏幕上提高可用性，你将会注意到大多数移动网站主页都限制图片的使用，不包含传统的导航菜单。Best Buy就避免使用完整的导航，仅显示一个搜索框、门店选择和客服电话：
Barnes和Noble的移动主页也配置了搜索功能和门店位置选择功能，但并没有提供商品的目录导航，取而代之的是客户服务选项和Top 10销售列表。对于移动端来说，合乎情理的是“人们通常是搜索而非浏览”，而搜索者更倾向于使用搜索框。这是一个合理的假设，特别是当输入很困难时和产品的名称或作者名很长时。
另外一个使用“瘦”导航菜单的方式是像Moosejaw的老网站和 Sephora的网站那样：
很少情况你会看到在移动网站主页上会有产品推销。但Amazon和Moosejaw的新站就是这么做的，但总体来说图片很小，布局也很简单：
Moosejaw原来的主页相当温和且实用，不符合Moosejaw它狂野的风格。新的主页设计的更加个性化，增加了更多的娱乐内容而不仅仅呈现出产品目录。就像他们一贯的口号传达的“假如你很无趣”，这也是Moosejaw主要的消费群高中生和大学生所崇尚的特征。
其实并没有捷径能指导你做出完美的移动网站主页（仅提供搜索和必要的客服链接，仅提供简单菜单和精简推销广告），但必须确保它有清晰的信息架构和仅提供必须的信息和工具来帮助进行搜索、产品选择和客户服务。这些对于你的移动战略至关重要。
字体/字形
许多移动设备屏幕的颜色对比很弱，并不能在白天、夜晚、车里或其他光线不足的地方提供足够清晰的视觉体验。所以要小心处理这些低对比度色彩的屏幕，避免使用暗色的背景上使用很淡颜色的字体，尤其是白色带下划线的文本。
无论是否是衬体字形，链接和其他文本如果都是大写的将很难阅读。
移动设备的浏览器通过不同的方式控制样式表。它们可能或可能不会缓存外部的样式表，也可能支持某些样式元素或不支持样式表。如果你有某些针对移动设备的特殊样式表，并没有办法来保证所有的设备都能正常显示它。所以，最好的方式是给所有的非文本方式的元素以一个文字描述，就像在为关闭图片显示功能的email客户端设计一文所提到的。
导航
菜单栏
在手机上显示菜单栏的最好方式是纵向显示，并只在首页显示顶级目录。你将不得不决定（在用户已经选择展开一个顶级目录的情况下）是否在二级导航中显示该级的展开内容或二级的分类目录，或使用一个下拉式表达，像这样：
在选择并展开顶级目录后的部分：
其他的像Sephora和Moosejaw的老版本使用下拉式层级式的表现方式：
这两种方式都有它们的优势和劣势。展开菜单的方式不再需要读取和滚动条，而下拉方式需要在每次选择后有更多的页面读取。如果你是为使用数字键盘输入的手机进行设计，那么下拉式的菜单更容易管理，这意味着需要更少的对应数字按钮。
无论你选择了哪种方式，请确保对触摸屏来说链接是很明显的（不要像Moosejaw的旧版本或Target的，下图）。当链接和按钮太小或太靠近时，很容易误操作。通过数字键盘直接进行导航会很有帮助。
在页面的末尾使用“返回”或“回到首页”链接返回页面顶部是很方便的，特别是当表单项比较多时。
图片导航
我不推荐使用图片导航。这有可能混淆用户，因为图片通常不是非常像可点击的链接，除非它们是产品的缩略图或按钮。此外，图片增加了页面加载时间，且图片做的标签很难阅读。就像Ralph Lauren的“Shop”标签（找不到吧？）。而且小的图片无法带来增值，只可能是对视觉造成压力。
标签
清晰是对于交互操作、目录和链接的标签来说是最重要的。因为页面可能加载的很慢，所以要尽可能的减少链接通往何处的歧义。Ralph Lauren的“Entertainment”（上图）就是一个不太清晰的标签实例。
面包屑
记住一个古老的建议“让链接看上去像链接”。面包屑是链接，所以他们应该看上去像链接。我发现常见的错误是在头部隐藏面包屑，且太靠近logo和使用全大写并不带下划线。Sephora的面包屑很容易被忽视，并且很容易让人混淆“Mobile Reviews”是一个标语还是一个链接（显然不是一个链接）。
Moosejaw的老版面包屑被棕色的背景栏所隐藏，并且全部大写不带下划线。这很容易被忽略，尤其是出现在页面中心时（见上面的截图）。
Tickets.com在这点上做的不错。面包屑在顶部，字体很大。在底部，“Back to Reggae,” “Back to Concerts” and “Home.”放置的也很清晰。
因为不是所有的移动设备都有回退键，所以移动网站没有多余的空间留给侧边栏导航。面包屑是非常重要的元素，尤其是当目录和字母来展开到2或3层时。请记住，要让面包屑看上去像面包屑（使用下划线并用>来分隔），并且要放在每个页面的顶部或底部。
喜欢这篇文章吗？敬请期待下一篇：搜索和目录页面。
亚马逊产品广告：好主意？坏主意？
【译者：耿人杰 原文：Amazon Product Ads：Good Idea？Bad Idea？
作者：Linda Bustos】
Amazon的产品页面从来就没有停止为我带来惊喜。除了本身要卖的商品外，页面上还包括banner广告、产品其他销售者的链接地址、论坛地址、个人收藏列表（Listmania）、更多其他banner广告、赞助商链接、顾客还买了其他（译者注：交叉销售）、更好商品推荐（译者注：向上销售）、评论、商品tag、Amapedia（译者注：Amazon针对商品的wiki，Amapedia=Amazon+Wikipedia）…等等
目前，Amazon把“外部网站的相关商品列表”加入到产品页面中，也就是展示外站合作伙伴相关商品的缩略图和链接，这相当于亚马逊的产品广告系统。这类产品广告是以点击次数（PPC）进行收费，并允许其他销售者通过此渠道在Amazon产品页面右侧来进行产品推荐（附带产品缩略图，这取决于用户使用何种浏览器）。详细点击这里。
参考Amazon的产品广告描述，PPC广告可能会被部署在加入购物车按钮附近：
如你所了解，Amazon仍然在持续地测试中，所以我不会对在不同地方看到此广告而感到惊讶。相比上面的布局，这是我在页面上实际看到的：
好吧，现在谈谈我对此类广告的观点：
1.这是是用户所期望的吗？
产品广告是一种为Aamzon用户提供无限接入外部网站商品的广告渠道。许多顾客选择在Aamzon购物是出于免运费和全程的购物保证，他们已经拥有一个Amazon帐号并且信任在Amazon上的销售商。然而，当它准备提供相关的产品广告链接时，Amazon无法提供对目标URL的预览。这些地址是从Amazon跳转出去的，并且有可能拒绝用户的访问请求。用户不知道它们将通向哪里，或他们将非常惊奇地发现他们进入了另外的网站（即使你在网页上已经明确告诉他们这是外部网站）。
2.当前，推荐还不是非常的相关。
上图中的蜡烛和水龙头是我浏览小狗玩具时推荐的：
提供不太相关的推荐意味着广告只有很低的点击率（是的，Amazon利用交易量和点击量来决定广告部署位置和最终的广告点击价格）。对用户而言，这也意味着更多的不解和困惑。但我相信这是有改进余地的。
3.这类广告将潜在地减少在Amazon自身的销售额和在Amazon上进行销售的的零售商的市场份额。
作为一个销售者，我不赞成Amazon将潜在的消费者带向其他地方。不论怎样，如果你正在想法设法地想进入Amazon的销售渠道，这是一种可行的流量贩卖方式。我非常有兴趣来听听来自任何采用了此种广告方式的广告主的声音。这样的流量质量如何？它的转换率相比其他PPC广告方式又效果怎样？
————————————译后感想 —————————————
翻译这篇文章的目的主要不是要大家考量此类广告的效果的具体数值，而是希望从产品角度来观察外链广告对用户体验的影响。这篇文章作者是完成于09年的3月，从广告位置看已经发生了变化，目前Amaznon把外站的商品推荐广告放在了商品详细页面产品介绍、评论、讨论的下方。从位置上看，应该是还算不错的位置。广告中列出了外站名称、商品图片、商品描述、价格（运费）等等，已经比较接近于商品搜索结果所呈现的内容了。对BlogBus而言，不断地有各种的内容合作商想与我们合作，但怎样在不影响体验的情况下提高产品在商业层面的价值，这是个很有挑战的问题。
