耿人杰的网络日志

【译者：耿人杰 原文：Mobile Commerce Usability：Forms and Checkout 作者：Linda Bustos】

这是此系列的第四部分：

• 第1部分：网站主页和导航
• 第2部分：搜索和目录页面
• 第3部分：产品页面和购物车
• 第4部分：表单和结帐

以下是我参考了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网站的可用性指南不适用于移动网络，这主要是基于设备的特性和使用场景。我的建议是如果移动战略是你生意的一部分（无论是提供交易还是客户服务），那么请提供一个友好的移动网站。当你在设计移动网站时，请时刻关注行业竞争对手的产品，并确保在许多不同的设备上测试过你的网站，并让真实的用户试用它。

【译者：耿人杰 原文：Mobile Commerce Usability：Product Pages and Cart Summary 作者：Linda Bustos】

• 第1部分：网站主页和导航
• 第2部分：搜索和目录页面
• 第3部分：产品页面和购物车
• 第4部分：表单和结帐

以下是我参考了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的验证码很难识别。

下一篇我们将专注于结帐流程和表单设计。

【译者：耿人杰 原文：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篇关于移动商务网站设计和可用性的系列文章：

• 第1部分：网站主页和导航
• 第2部分：搜索和目录页面
• 第3部分：产品页面和购物车
• 第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层时。请记住，要让面包屑看上去像面包屑（使用下划线并用>来分隔），并且要放在每个页面的顶部或底部。

喜欢这篇文章吗？敬请期待下一篇：搜索和目录页面。