A year ago we published an article on 11 fundamental guidelines for e-commerce checkout design here at Smashing Magazine. The guidelines presented were based on the 63 findings of a larger E-Commerce Checkout Usability research study we conducted in 2011 focusing strictly on the checkout user experience, from “cart” to “completed order”.
This year we’ve taken a look at the state of e-commerce checkouts by documenting and benchmarking the checkout processes of the top 100 grossing e-commerce websites based on the findings from the original research study. This has lead to a massive checkout database with 508 checkout steps reviewed, 975 screenshots, and 3,000+ examples of adherences and violations of the checkout usability guidelines.
Here’s a walkthrough of just a handful of the interesting stats we’ve found when benchmarking the top 100 grossing e-commerce websites’ checkout processes:
- The average checkout process consist of 5.08 steps.
- 24% require account registration.
- 81% think their newsletter is a must have (opt-out or worse).
- 41% use address validators.
- 50% asks for the same information twice.
- The average top 100 checkouts violate 33% of the checkout usability guidelines.
In this article I’ll go over each of them and explain exactly what’s behind these numbers, showing you some real life implementations of do’s and don’ts when it comes to checkout processes.
The Average Checkout Process Consists Of 5.08 Steps (But It Doesn’t Influence Usability Too Much)
The average checkout consists of 5.08 steps, counting from the shopping cart to the step where the order is actually placed — often a “review and confirm order” step. The shortest checkout process is one step (including cart) and the longest being a massive nine steps.
Above you see the distribution among the top 100 grossing e-commerce websites in regards to the number of checkout steps they have. Note that only a single website had one step (including cart), and the “average” for this one website therefore shouldn’t have been given too much weight.
Above, we’ve plotted the websites grouped after the number of checkout steps, moving out from the x-axis, as the groups average checkout usability score moves up the y-axis. As you can see, we’ve found that up until six checkout steps there isn’t a noticeable relation between the number of checkout steps and the quality of the user’s checkout experience. This matches the test subject’s behavior we observed during the checkout usability test back in 2011. What matters the most for checkout experience isn’t the number of steps in a checkout process, but rather what the customer has to do at each step.
With that being said, there does seem to be an upper limit to the number of steps practically achievable in a checkout process before it begins to hurt the checkout experience. The websites with eight or nine steps have accumulated a significantly lower score in checkout usability than the rest of the checkout processes. This is often a result of required account registration (which typically induces more steps and is bad for checkout usability) as well as the fact that websites that end up with over eight checkout steps simply have more chances available to screw up the experience for their customers. At the time of testing, these were the websites with eight or more steps: Sephora (8), Amazon (8), Peapod (8), Sony (8), Safeway (9), ShopNBC (9) and W.W. Grainger (9).
To recap: don’t focus too much on the number of steps in your checkout — instead spend your resources on what the customers have to do at each step, as that is what matters the most for the checkout experience. Three examples of this are the checkout processes of Apple, Walmart and Gap, which are all seven-step checkouts that perform approximately 50% higher than the average top 100 grossing checkouts (not to say that they are perfect, there are still room for further checkout improvements). While in theory it is possible, in practice none of the benchmarked websites with eight or more checkout steps had a checkout process that wasn’t greatly under-delivering in regards to the checkout user experience for a new customer.
81% Think Their Newsletter Is A “Must Have” (And Don’t Value Customer Privacy)
81% of the 100 largest e-commerce websites “assume” that their customers want their promotional emails by having a pre-checked newsletter checkbox (or worse) at some point during checkout.
One reason why customer hate being required to create an account to complete a purchase is because they have a mental model of account = newsletter. This became evident during the user testing, where we heard the same complaint over and over again: people hate creating an account when buying online. When we asked the test subjects why, 40% told us that they “didn’t want any newsletters”.
For years websites, including e-commerce websites, have tricked customers into “accidentally” signing up for newsletters that they didn’t want by visually downplaying a pre-checked “subscribe to newsletter” checkbox. So people have come to expect, that when they sign up for a new account, that they also sign up for a newsletter, or “spam” (as more than half of the test subjects had referred to such newsletters).
This mental model sadly isn’t just a misconception, but evidently something learned the hard way. Pre-checking the newsletter checkout is one thing, but of those 81% of the websites that think their newsletter is a “must have”, 32 of them proceed to do something even worse than pre-checking a checkbox:
Amazon is just one of the 32% of the top 100 grossing e-commerce websites that automatically signs customers up for their newsletters, without clearly informing the customer (only via the privacy link), and without giving an opting-out option during checkout. Large view.
These 32% automatically sign up their new customers for their newsletters with no way of opting out during the checkout process, and often burying this fact deep down in their privacy policy. Typically, the only way for customers to “opt-out” on these websites are either by a privacy tab in an account settings section (if they were forced to register for an account) or by an unsubscribe link in the newsletters that the customers will automatically start receiving.
So what the test subjects displayed of account = newsletter is something they learned from shopping at websites (such as these from the top 32%). Only 8% of the top 100 e-commerce websites value their customers inbox and ask them to opt-in if they want to receive newsletters (as does the last 11%, which don’t offer newsletter subscriptions at all during checkout.)
24% Require Account Registration
To put it differently: 24% don’t offer the customer a “guest checkout” option when placing an order, but force them to create accounts on their websites.
Sony (step 2) is just one of the 24% that require every new customer to register for an account when placing an order. Large view.
During the checkout usability study, we (as have many others have before us) have identified multiple reasons why potential customers resent being forced to register for an account just for placing a simple order. We’ve already touched upon one of them, the mental model of account = newsletter. But let’s quickly list a handful more of them that we’ve found during the study:
- Signing up for an account means more steps and form fields to complete during checkout — essentially taking longer to complete.
- Most customers already have a myriad of logins and passwords to remember and don’t want more of them.
- When creating an account, customers are more likely to realize that you’re storing their information indefinitely.
- Many customers just don’t understand why they need an account to buy a product. As one test subject clearly expressed during testing: “I don’t need to sign up for anything when I’m buying a perfume in a regular [brick and mortar] store.”
Nordstorm (step 3) is one example of the 76% of the top 100 grossing e-commerce websites that offer new customers the much appreciated “guest checkout” option, but offering at the same time an easy optional account registration. Large view.
When you do it right (as 76% of the e-commerce websites have done) and provide the much appreciated guest checkout option, you still have the possibility of asking for an optional account creation along (or after) the purchase. This can be done simply by creating a short section with a brief description and an optional password field. During the checkout usability study no test subjects were put-off by this approach, and just left the optional field(s) blank if they weren’t interested in creating an account with that particular website. But they generally liked the option on websites where they were interested in becoming repeat customers.
If we look into the type of websites that typically require account registration, there is a slight tendency towards them being the highest grossing websites:
Of the 23 websites that had more than $1 billion in online sales (Internet Retailer 2010 sales estimates), 35% of them required account registration, whereas for the rest of them grossing less than $1 billion (and down to $148 million) it was only 21% that required account registration during checkout.
41% Use Address Validators
Of these 41%, 12% (relative) don’t allow their customers to override the validation mechanism in case the address isn’t recognized (though the customer is absolutely sure the address is correct).
Amway is one examples of the 12% (relative) that doesn’t allow the customer to proceed in any way, in the event that the address validator is outright wrong, or the address validation database isn’t updated properly. Large view.
An address validator can be a smart way to avoid common customer typos that might cause shipping problems, ones that otherwise would have resulted in undelivered or delayed orders. But street names, postal codes, etc. aren’t consistent, nor permanent. So the possibility still exists that it’s the address validation mechanism/database that is erroneous — not the customer’s input. Those subsets of websites that don’t allow the customer to force proceed through a potentially wrong address validator (at the time of testing: Office Depot, ShopNBC, Amway Global, FreshDirect, and CafePress) will leave the customers with no other option but to abandon their purchase as they are technically locked-out from completing the checkout process.
A decent implementation by Overstock (step 3) that informs the customers that their typed address doesn’t match the address validation — and therefore, are likely to be wrong — while still giving the customers an option to force-proceed.
The advisable approach — implemented by the vast majority of the 41% of those websites utilizing address validators — informs the customer that the typed address doesn’t match, yet still allows them to force proceed if they are sure that the address is right.
50% Ask For The Same Information Twice
Instead of pre-filling the already typed-in information for the customer, 50% of the e-commerce websites add needless friction to their checkout experience by asking for the same information more than once. This is rarely at the same page (although that does happen) but is most often happening across multiple pages. Sometimes it’s the customer’s name that isn’t pre-filled from the address step to the billing step. Other times it’s the zip code that the customer provided at the cart step (e.g. for a shipping calculator) which isn’t pre-filled at the the shipping address step. Although it is only fair to assume that in most cases users calculate the shipping to a certain zip code, this would also be the zip code that they plan on shipping the order to.
Apple is one of the 50% of e-commerce websites that asks for the same information more than once. At their 5’th checkout step the billing email address isn’t prefilled — even when the customer clicks the “Same as shipping information”-link. Large view.
Retyping information is a tedious task on a regular computer, but on a mobile device most users will find it outright annoying. Considering that all the benchmarked websites gross $148+ million per year in online sales, it seems rather sloppy that only half of them have dedicated the resources to removing needless checkout friction by ensuring that they don’t ask for the same information more than once (across multiple pages).
On the path to reducing needless checkout friction, only 10% of the websites helped their customers by pre-filling the state and/or city fields based on the zip code provided. Hayneedle (step 2) was one of them. The result: three less fields for the customer to fill + shipping dates and costs already updated at the page entry. Large view.
On the same note for reducing needless checkout friction, only 10% of the websites helped their customers to fill-out even less form fields by pre-fillingthe state and/or city fields based on the zip code that the customer provides.
The Influence Of Revenue And Industry
The e-commerce websites grossing above the $1 billion mark scored 44% worse on checkout usability (for a first-time customer) than the e-commerce websites grossing below $1 billion.
When taking a closer looking at the checkout experience of these 23 websites that gross over $1 billion, it’s likely that some of that gap exists because these websites are more focused on forcing as many customers into their account eco-system as possible. Furthermore, the top grossing e-commerce websites also tend to be the ones with the most complex marketplace systems. These marketplace systems often end up inducing a lot of derived complexity into the checkout process, due to shipping and legal constraints, for a deal where the website only acts as the middleman. In comparison, some of the “smaller” websites in the top 24 to 100 grossing range had one simplified goal for their checkouts: to let the customer move as swiftly as possible through the checkout process.
All the top 100 e-commerce websites plotted with checkout usability score moving up the y-axis and online sales moving out the x-axis (logarithmic scale). Notice that the far majority of checkouts that scored the highest on checkout usability are below the $1 billion sales mark. Large view.
If we take a look at specific e-commerce industries, the Automotive Parts industry had much better checkout usability than the rest of the industries (scoring 110% higher) whereas the Office Supplies industry scored the lowest (38% lower than average). Food & Drugs followed right behind in providing the worst checkout experience.
It’s interesting to see the that in both the worst and the best scoring industries, all three have a very similar checkout process. In fact, their checkouts are almost identical; have a look at Staples’ checkout, Office Depot’s checkout, andOfficeMax’s checkout. I’m not going to speculate on who “was inspired” by whom, nor does it really matter. But in the Office Supplies industry it’s unfortunate, because as a consequence they all suffer from a very sub-standard checkout experience (38% lower than the average). While it’s clear that some of the top 100 e-commerce websites are using the same system vendor (and thus, end up with similar features and sequences in their checkout flow), the tendency of similar checkouts between competitors weren’t noticed to nearly the same degree in some of the other e-commerce industries (e.g. in Electronics).
The General State Of E-Commerce Checkouts
If we have an overall look at the top 100 grossing e-commerce checkout processes, the average checkout violates 21 checkout usability guidelines. This is an indication that checkout improvements are still much needed if the average cart abandonment rate of 65,95% is to be lowered (“50% Ask for Same Information Twice” also points in this direction).
This overall lacking of checkout experience — even among the highest grossing e-commerce stores — is hardly rooted in an unwillingness to improve checkout experience, but is most likely due to a combination of factors, such as:
- Flows are much more difficult to improve than single pages.
- Checkouts often need deep, back-end integration, and thus require more IT capabilities to modify/test upon.
- Checkouts haven’t been on the agenda for top management (although, I believe this has changed a lot in recent years).
- Checkouts are for most designers much more dull to work on than product pages, home pages or new ad-campaigns.
- In a few cases, a poor user experience can still be good for business, at least in the short run (e.g. sneaking people into your newsletter).
- No Web convention for a checkout process exists.
- “Best practice” for checkout designs are scattered and scarce (only two to three research-based resources exist).
- Feedback from those who use the checkout process are only several degrees of separation from those who design and develop it.
- Improving most somewhat-optimized/decent checkouts aren’t 1 to 3 “big fixes”, but are most likely to be 10 to 30 smaller checkout changes.
If you want to further examine the checkout processes and flows of the 100 top grossing e-commerce websites for yourself — without filling out some 1,300 form fields, as we have done — you can do so in the free part of the 2012 E-Commerce Checkout Benchmark, as we’ve decided to make that part of the database publicly available.
(jvb)
2011年，Smashing Magazine发布了一篇文章《Fundamental Guidelines Of E-Commerce Checkout Design》，分享了11条基本的电子商务网站付费流程设计指南。该指南基于大型电子商务付费流程可用性研究中的63条研究结果。今年，Smashing Magazine基于最初的研究成果，对前100家热卖的电子商务网站进行了记录及基准测试，并从中分析了电子商务网站付费流程的现状。
在对这100家电子商务网站的付费过程进行基准测试时，我们发现了很多有趣数据：
（1）付费过程平均包含5.08步；
（2）24%要求进行帐号注册；
（3）81%认为他们的新闻简报“很有必要”；
（4）41%使用了地址验证器；
（5）50%要求相同的信息填写两遍；
（6）被调查的100家电子商务网站平均违反了付费可用性指南中33%的内容。
本文将详细解释每个数字背后的故事，并对实际付费设计过程中的注意事项进行说明。
付费过程平均包含5.08步（这对可用性的影响并不大）
从“加入购物车”到“查看并确认订单”，该付费过程平均包含5.08步。最短的付费流程包含1步（包括购物车），最长的可达到9步。
（查看大图）
通过上图，可以看出这100家电子商务网站付费步骤数的分布图。注意仅一个网站包含1步（包括购物车），该网站对于平均步骤数并不会产生大的影响。
（查看大图）
上图中的X轴表示网站的付费流程步骤数，Y轴表示相应步骤数的用户体验平均得分。从中我们可以发现在步骤数达到6（包含6）之前，付费流程的体验与其步骤数没有明显的关系。这与我们在2011年进行的付费可用性测试中测试对象的行为相一致。由此说明，最大程度影响付费体验的并不是步骤的多少，而是每一步中用户所要完成的操作。
话虽然这样说，但似乎仍有一个步骤数的上限值，超过该值就会损害付费流程的用户体验。付费步骤数为8和9的网站在用户体验的得分上明显低于其他网站。这通常由帐号注册这一步骤导致（它不仅增加了操作步骤数，还损害了用户体验）。事实上，操作步骤在8步以上的网站更有可能损害用户体验。在本次测试中，步骤数在8步以上的网站包括Sephora(8)、Amazon(8)、Peapod(8), Sony(8)、Safeway(9)、ShopNBC(9)和W.W.Grainger(9)。
再次说明：不要把精力过多投入到付费的步骤数上，应关注用户在每步中需完成的操作，因为这在很大程度上影响着付费过程的用户体验。Apple、Walmart和Gap三个网站的付费过程就是案例，购买过程均包含7步，其用户体验得分比被测的100家网站的平均得分值高出近50%（此处并不是这几家网站做得很完美，他们仍有近一步提升体验的空间）。
81%认为他们的新闻简报“很有必要”（不尊重用户的隐私）
这100家电子商务网站中，有81%的网站“自认为”客户希望接收他们提供的促销信息，从而在付费过程中将类似“是否接受新闻简报”的复选框设置为“已勾选”状态。
（查看大图）
只有创建帐号后才能完成购买，用户对这一要求十分厌恶，原因之一是他们认为注册了帐号就不得不接收本网站的新闻简报。在进行用户测试时，我们一次又一次地听到这样的抱怨：在线购买时，用户讨厌创建帐号。我们曾询问他们原因，40%的用户表示不想收到任何相关的邮件内容。
多年来，网站（包括电子商务网站）采用各种手段诱导用户“不经意地”订阅新闻简报；用户最容易忽略那些被轻描淡写的已勾选的“订阅新闻简报”复选框，他们不希望因此而错误订阅这些邮件内容。这往往导致人们认为，他们注册了新帐号，就同时也订阅了新闻简报，或“垃圾邮件”（有近一半的测试用户这样称谓新闻简报）。
用户的这种误解，很明显会让网站吃到更多苦头。将“订阅新闻简报”的复选框预勾选是一回事，81%的被调查网站认为他们有必要提供新闻简报则是另外一回事。其中有32家网站仍在做着比这更加糟糕的事：
Amazon为32家中的一家，它在不告知用户的情况下，自行为用户订阅新闻简报，且在付费过程中无法取消该订阅。（查看大图）
这32%的网站替用户订阅新闻简报，且在付费过程中无法退订。这一点被深深隐藏于隐私政策条款中。用户要想退订，要么通过帐号设置选项中的“隐私”标签，要么通过新闻简报中的退订链接。
在这100家电子商务网站中只有8%尊重用户的收件箱，只有在用户希望接受新闻邮件时才请他们选择订阅。剩余的11%，在整个付费过程中一般不会提供新闻简报的订阅。
24%要求进行帐号注册
在用户下订单的时候，有24%的网站不会为用户提供“访客付费”的选项，而是强迫用户在他们的网站上注册帐号。
Sony是这24%网站中的一个，在下订单的第二步会要求每个新用户注册一个新帐户。（查看大图）
只为下一个简单的订单，而被迫进行帐号注册，潜在用户对此十分憎恶。在付费过程的可用性研究中，我们（包括之前的其他人）分析了这一情绪的原因。除了上文提到的“他们认为注册了帐号就不得不接收本网站的新闻简报”外，下面还列出了其他方面的原因：
（1）注册一个帐号意味在付费过程中要有更多的操作步骤，要填写更多的表单项，即花费更多的时间；
（2）大部分用户已经有太多的帐号，他们不想再增加了；
（3）当创建一个新帐户时，用户可能认为你在存储他们的信息；
（4）很多用户不理解，他们为什么需要一个帐号才能购买商品。正如一个测试用户在测试过程中所表述的那样：“在普通的实体店中购买一瓶香水，我不需要进行任何注册。”
100家被测电子商务网站中有76%为新用户提供了令人欣赏的“访客购买”选项。Nordstorm便是其中一家，它同时提供了可选的帐号注册表单。（点击查看大图）
如果你和这76%的网站做法一样，为用户提供了“访客购买”选项，那么你仍需要在购买过程中或购买之后提供一个可选的帐号注册表单。该表单可以很简单，只占很小的区域，提供一个简单的描述外，再增加一个可选的密码表单项。在付费流程的可用性测试中，测试用户不会因此而被拖延，他们如果不想在该网站中注册帐号，可以不必理会这个表单。对于那些希望再来该网站的用户来说，他们很喜欢这个可选项。
如果我们观察这些需要用户注册帐号的网站，可以发现它们成为最热卖网站的小小趋势：
在线销售额超过十亿美元的23家网站中，有35%的网站要求注册帐号；而销售额低于十亿美元的其他网站中，只有21%的网站要求注册帐号。
41%使用了地址验证器
当用户所填写的地址无法被识别时，在这41%的网站中有12%的网站不允许用户跳过该验证机制，即便用户绝对相信地址是无误的。
Amway正是这12%中的一个，当地址验证器未验证通过，或地址数据库未进行及时更新时，都不允许用户继续操作。（查看大图）
地址验证器可以很好地避免普通用户打错字的情况，以避免延迟邮寄，或无法邮寄。但街道地址、邮政编码等并不是一成不变的。有时地址验证机制/数据库可能是错误的，而客户的输入反而正确的。对于那些不允许用户强制通过含有潜在错误地址验证器的网站（本次测试中有：Office Depot、ShopNBC、Amway Global、FreshDirect和CafePress），用户在别无选择的情况下只能放弃该购买过程。
Overstock在这方面做得很好，它会告知用户输入的地址与地址验证器不匹配，可能是错误的，但同时也提供了一个选项，允许用户强行通过。
正确的方法是告知用户输入的地址不匹配，如果他们确信地址无误，则允许他们强行通过。在使用地址验证器的网站中有41%的网站采用了该做法。
50%要求相同的信息填写两遍
这100家电子商务网站中有50%在付费体验中增加了很多不必要的摩擦，他们不止一次地要求用户填写相同的信息，而不是提前填充入用户曾输入过的信息。这很少发生有同一页面（有时也会发生），但却经常发生在多个页面上。有时从地址输入到最后付费，用户需要重复填入姓名。有时产品在加入购物车时，用户提供了邮政编码（为了计算运送费用），但到了填写邮寄地址时却仍需再提供一次。
Apple是这50%中的一个，它不止一次地要求用户提供相同信息。在付费过程中的第五步，帐单中的Email地址仍需要再填写——即便用户点击了页面中的“Same as shipping information”链接。（查看大图）
在普通的计算机上，重复输入相同的信息是一个乏味的工作，但在移动设备上将会十分烦人。细想一下，所有参与基准测试的网站每年在线收入达1亿4千8百万以上，只有一半的网站投入精力移除了这些不必要的付费繁琐，以确保不再向用户索要同样的内容。
在这些网站中只有10%的网站根据用户提供的邮政编码进行国家和城市的判断，并预先填入相应表单中。Hayneedle便是其中一家。取得的效果是：用户可以少输入三个字段，购买日期和价钱在页面加入时也获得了更新。（查看大图）
只有10%的网站根据用户提供的邮政编码进行国家和城市的判断，并预先填入相应表单中，从而减少了用户的输入次数。
收入和行业影响
收入在10亿美元以上的电子商务网站在付费流程可用性（对于首次购买用户）上的得分要比收入低于10亿美元的电子商务网站低44%。
这23家收入超过10亿美元的网站都在尽力强迫尽可能多的用户进入他们的帐户生态系统。而且这些网站的售卖系统正向最复杂的方向发展。这些售卖系统也会因付费过程中包含过多的复杂性而被取代。相比这下，位居24位以后的“较小”的这些网站只有一个简单的目的：让用户尽可能快速地完成付费过程。
该图绘制出100家热销网站在付费用户体验的得分，X轴表示在线销售额，Y轴表示用户体验得分。从图中可以看出得分最高的大部分网站其销售额低于10亿美元。(点击查看大图）
让我们看一下具体的电子商务行业。汽车配件行业在付费体验上做得比其它行业都好，得分高达110%；办公用品行业得分最低，为38%，低于平均水平；食品和药行业提供的付费体验最差。
这三个行业有相似的付费过程。事实上他们的结帐过程几乎相同，不信可以看一下Staples、Office Depot和OfficeMax这三个网站的结帐过程。有一点很清晰，就是这100家网站中有一些网站具有相同的系统供应商。
电子商务付费过程中一般状态
从100家电子商务的付费过程中可以发现，一般的付费过程均违反了21条付费可能性指导方案。如果想让购物车平均放弃率由65.95%有所下降的话，改善付费体验仍是非常必要的。
付费体验的整体欠缺多半是因为不愿意去提升，这可能是由多方面原因造成的，比如：
（1）改善该流程比改善某个单页面更困难；
（2）付费过程通常需要更深入的后端集成，因此要求更强的IT能力来修改和测试；
（3）付费过程的改进无法上升到高层管理者的日程中（但近几年该情况已有了改善）；
（4）对于大部分设计师来说，付费过程比设计产品页、首页更加枯燥；
（5）在少数情况下，糟糕的用户体验从短期看来对商业还是有好处（如，偷偷为用户订阅新闻简报）；
（6）没有专门针对付费流程的Web会议；
（7）针对付费设计的“最好实践”很分散且稀缺（只存在两三种研究型的资源）；
（8）使用该付费过程的用户给出的反馈无法传达给设计和开发该过程的人；
（9）提高付费体验不是做1到3个“大修整”就能完成，多需要10到30个小的改变。（编译：陈秋歌）
扫一扫
2357
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
