交互设计黄金法则_6电子商务设计的黄金法则-CSDN博客

交互设计黄金法则

Photo: nateOne

照片：nateOne

Let’s face it, we have all been victims of an impractical or just plain unresponsive checkout system while trying to finish an online purchase.

面对现实，在尝试完成在线购买时，我们所有人都是不切实际或无React的结帐系统的受害者。

Most websites are built with the intention to convert the visitors into customers but there is no way that can happen when a poor checkout design is implemented.

大多数网站的建立都是为了将访问者转化为客户，但是当实施不良的结帐设计时，这是不可能发生的。

Potential customers are looking for a quick and satisfying online experience which means you need to make sure that happens.

潜在客户正在寻找一种快速且令人满意的在线体验，这意味着您需要确保这种情况发生。

Truth be told there have been a few times where I personally didn’t buy an item just because what should have been a simple checkout turned into an unnecessary interrogation with no navigation or step indicators.

实话实说，有几次我个人不买东西，只是因为本来应该是简单的结帐就变成了没有导航或步速指示器的不必要的询问。

To prevent a fleeing potential customer it is imperative to review not only your overall e-commerce design but your ecommerce checkout flow.

为了防止潜在的客户流失，不仅要检查您的整体电子商务设计，还必须检查您的电子商务结帐流程。

Today’s article will feature the basic fundamentals of an ecommerce checkout design including your cart graphics and your overall flow that will hopefully convert your ecommerce store into a profitable one.

今天的文章将介绍电子商务结帐设计的基本原理，包括您的购物车图形和整体流程，这些都有望使您的电子商务商店转变为盈利商店。

1.保持购物车简单 (1. Keep the Cart Simple)

ASOS.com

The first on a very important list of e-commerce checkout fundamentals and must haves is the shopping cart.

购物车是非常重要的电子商务结账基本要素列表中的第一个。

The shopping cart is the first visual indicator to potential customers that your site provides a good or service that can be purchased online.

购物车是向潜在客户显示的第一个视觉指示器，表明您的站点提供了可以在线购买的商品或服务。

Though a seemingly simple attribute the design of your shopping cart should match the website. Getting appropriate graphics is essential to help the process of conversion.

尽管看似简单的属性，但购物车的设计应与网站相匹配。获取合适的图形对于帮助转换过程至关重要。

There are various representations of the famed shopping cart which includes standard shopping trolley, the basket and of course shopping bag for you to choose from. You can even settle for text if you like.

著名的购物车有各种表示形式，包括标准购物车，购物篮和购物袋供您选择。如果愿意，您甚至可以选择文本。

Whichever design you choose you must make sure that it is visibly accessible.

无论选择哪种设计，都必须确保可以看到它。

In other words, it needs to be located in an area where visitors will notice it within five seconds or less. You will often find shopping carts are located in the top right corner.

换句话说，它必须位于访客会在五秒钟或更短时间内注意到它的区域。您经常会发现购物车位于右上角。

Keep in mind that your shopping cart also needs to be a reasonable size, not too big and not too small. Remember that your cart design doesn’t need to be fancy, just visible.

请记住，您的购物车也需要合理大小，不要太大也不能太小。请记住，您的购物车设计不必花哨，只需可见即可。

Other than the basic graphic for your cart you will want to make sure that it updates in real time.

除了您的购物车的基本图形之外，您还需要确保其实时更新。

Whenever a customer adds an item the basket should automatically display the new addition.

每当客户添加商品时，购物篮应自动显示新添加的商品。

Make sure this confirmation is clearly displayed. No one should have to look around to see if their item has been successfully added to their cart.

确保此确认明确显示。没有人应该环顾四周，看看他们的物品是否已成功添加到购物车中。

2.显示购物车详细信息 (2. Display the Cart Details)

oakstreetbootmakers.com

When it comes to purchases a lot of it has to do with the information that is displayed. This includes product details, photos and videos. In fact 92.6% of shoppers base their purchasing decisions on the visuals that are associated with a particular product.

购买时，很多都与显示的信息有关。这包括产品详细信息，照片和视频。实际上，有92.6％的购物者根据与特定产品相关的视觉效果做出购买决定。

What does this tell us?

这告诉我们什么？

It simply tells us the great importance of the visual elements chosen. The photos which you use can either lead to a sell or a passover.

它只是告诉我们所选视觉元素的重要性。您使用的照片可能会导致出售或逾越。

More often than not a potential buyer will likely add an item to their cart if multiple images of the product are included.

如果包含了该产品的多个图片，则潜在的买家通常会将商品添加到他们的购物车中。

Videos are also helpful to push for a sell but you must make sure that the video is straight to the point as to not to lose the viewer’s attention.

视频也有助于推动销售，但是您必须确保视频直截了当，以免引起观众的注意。

Other than photos and videos you need to make sure that your items feature important information like titles and product summaries.

除了照片和视频外，您还需要确保商品具有重要信息，例如标题和产品摘要。

Customers want to know what exactly it is they are buying.

客户想知道他们到底要买什么。

This is a factor that can help instill trust. Along with product summaries you should be sure to include options if applicable which may include color, size and other customizations.

这是可以帮助建立信任的因素。除产品摘要外，您还应确保包括选项(如果适用)，其中可能包括颜色，尺寸和其他自定义项。

Within your checkout design there should also be a section to change quantity and remove items should the customer change their mind.

在您的结帐设计中，还应该有一个部分可以更改数量，并在客户改变主意时删除物品。

Above all else when it comes to making sure details are displayed you will definitely want to include the price of the item, available shipping and the final price (including tax) before they actually checkout.

首先，要确保显示详细信息，您肯定要在实际结帐之前包括商品价格，可用运费和最终价格(含税)。

You don’t want to surprise the customer with hidden prices and fees. This is a sure way to have them abandon their carts and your site.

您不想以隐藏的价格和费用使客户感到惊讶。这是让他们放弃购物车和您的网站的肯定方法。

3.给那些选择 (3. Give Those Options)

viners.co.uk

People like having options. They enjoy having the power to customize and control their purchases so you should make sure such control is given.

人们喜欢选择。他们喜欢定制和控制他们的购买权，因此您应该确保已给予这种控制。

Cart abandonment can also be brought about with the lack of options your site allows. These options can be seemingly basic but to a customer they can make a world of difference.

缺乏网站允许的选项也可能导致购物车被遗弃。这些选项看似基本，但对于客户而言，它们可以带来很大的不同。

Such options you may want to consider is the ability for customers to save their items for later.

您可能要考虑的此类选项是客户保存其商品以备后用的能力。

Sometimes a person is in the middle of shopping but all of sudden realizes they can’t purchase the item at that point in time but still intend to buy what’s in their cart when time permits.

有时，一个人正在购物，但是突然间他们意识到自己无法在该时间点购买商品，但仍打算在时间允许的情况下购买购物车中的商品。

Allowing them to save these items for later ups the chances of them returning to complete their purchase.

允许他们保存这些物品以备以后使用时，他们有机会返回以完成购买。

Along with allowing customers to save their carts you need to make your online store as friendly as possible by offering various forms of payment methods.

除了允许客户保存购物车外，您还需要通过提供各种付款方式来使您的在线商店尽可能友好。

Lack of payment options can really take a toll on your business if you’re not careful. By assuming that everyone uses only one form of payment e.g. credit cards you consequently alienate those who do not use credit cards.

如果您不小心的话，缺乏付款选择可能会给您的业务造成重大损失。通过假设每个人仅使用一种付款方式(例如信用卡)，您将疏远那些不使用信用卡的人。

Offering multiple payment methods will be just as helpful to you as it will be to the customer. Remember to display the payment options on your page where visitors can clearly see it before they begin shopping.

提供多种付款方式对您和客户都一样有帮助。请记住，在您的页面上显示付款方式，以便访客在开始购物之前可以清楚地看到付款方式。

While you are trying to make checking out a better experience for your customers you should also give them the option on whether to create an account or not.

当您尝试为客户提供更好的体验时，还应让他们选择是否创建帐户。

Too many times sites force buyers to register before they can complete their purchase. This is aggravating on many levels as most of us want to “get in and get out”.

网站太多时间强迫买家注册才能完成购买。由于我们大多数人都想“ 进出 ”，这在许多方面都在加剧。

Many of us already have enough accounts that we need both hands and maybe a foot to count them on.

我们中许多人已经拥有足够的账户，我们需要双手甚至一只脚来指望它们。

The last thing we want is to have to create another account with another password when all we desire is a quick purchase. Not to mention customers associate registering to receiving unwanted e-mails.

我们想要做的最后一件事是，当我们要快速购买商品时，必须使用另一个密码创建另一个帐户。更不用说客户将注册与接收不需要的电子邮件相关联。

To most buyers a forced registration is just another roadblock in the process of their purchase.

对于大多数买家而言，强制注册只是他们购买过程中的另一个障碍。

Giving a customer an option to checkout as a guest can actually lead to more purchases in the future believe it or not.

不管信不信由你，让客户选择以客人的身份结帐实际上会在将来导致更多的购买。

4.灌输信任 (4. Instill Trust)

Secure payments by PayPal

贝宝安全付款

The first thing most buyers wonder when going to a site where they are able to make a purchase is “is this site safe”.

大多数买家想知道何时去他们能够购物的网站的第一件事就是“这个网站安全吗”。

With technologies advancement has come the risk of your information falling into the wrong hands so it is understandable for customers to be a bit nervous.

随着技术的进步，您的信息有可能落入错误的人手中，因此让客户有些紧张是可以理解的。

There are various methods however to quell these worries such as by using trust indicators. The most obvious method is to provide a message that your site is indeed secure.

但是，有多种方法可以解决这些问题，例如使用信任指标。最明显的方法是提供一条消息，表明您的站点确实是安全的。

Add visual clues like a lock symbol as well as any third-party seals of approval on your site and not just on the checkout page either. Also include a link to your privacy policy to fortify your assurance that your site is safe.

在您的网站上(不仅是结帐页面上)添加诸如锁形符号之类的视觉提示以及任何第三方认可封条。还包括指向您的隐私政策的链接，以确保您的网站安全。

Allowing for product reviews is also a great way to instill trust with your customers.

允许产品评论也是一种吸引客户信任的好方法。

Giving them the ability to leave testimonials about your business is a great idea too. This doesn’t just help you as a business but it helps potential buyers as well. Buyers will often research a website they have never used if they plan on making a purchase from said site. The mere act of allowing buyers to rate and comment on a product means that you trust them and value their opinion about their product.

让他们能够留下有关您企业的推荐书也是一个好主意。这不仅对您的企业有帮助，而且对潜在的买家也有帮助。如果购买者计划从该网站进行购买，他们通常会研究他们从未使用过的网站。仅允许购买者对产品进行评分和评论的行为就意味着您信任他们并重视他们对产品的看法。

Make sure that your customer service information is easily accessible as well. By having this information ready you are letting customers know that you are available and aren’t some mysterious entity. Giving a working number and an e-mail for them to reach you for questions or concerns is a perfect way to further establish trust.

确保您的客户服务信息也易于访问。通过准备好这些信息，您可以让客户知道您有空，而又不是神秘的实体。给他们一个工作号码和一封电子邮件，以联系您提出问题或疑虑，是进一步建立信任的理想方法。

5.保持流程线性 (5. Keep the Process Linear)

Many companies, including Amazon go as far as literally representing their checkout process as a line.

包括亚马逊在内的许多公司都将其结帐流程从字面上表示为一条线。

Your checkout process should be linear. In other words, there should be no steps within steps.

您的结帐流程应该是线性的。换句话说，步骤中不应有步骤。

When this is done customers often become confused and frustrated before bailing on their purchase altogether. This not only leaves you with a potential customer who won’t come back but also with a loss in conversion.

完成此操作后，客户通常会感到困惑和沮丧，然后才完全放弃购买。这不仅给您留下了一个不会回头的潜在客户，而且还带来了转换损失。

Neither of which is a good thing.

两者都不是一件好事。

Your checkout flow should lead the customer to complete their purchase without any interruptions.

您的结帐流程应引导客户完成购买而不会造成任何干扰。

A linear checkout means a logical flow but this can be interrupted by sites that require you to make an account prior to completing your purchase.

线性结帐意味着逻辑流程，但是需要您在完成购买前进行帐户注册的网站可能会打断它。

Often times these steps within steps will direct you from your account creation to a previous step within the checkout process.

通常，这些步骤中的这些步骤会将您从创建帐户的方向转到结帐流程中的上一个步骤。

This creates confusion for the buyer as they are typically sent to a page they have seen before. This leaves the buyer confused and assuming that there was either an error within the checkout system or that they simply did something wrong.

由于通常会将买家发送到他们之前看过的页面，因此这会给买家带来困惑。这使买方感到困惑，并假设结帐系统中存在错误或他们只是做错了什么。

By avoiding these steps you can keep your checkout linear.

通过避免这些步骤，您可以使结帐保持线性。

Providing a progress indicator that leads the customer step by step will also be beneficial.

提供进度指标以逐步引导客户也将是有益的。

Labeling the steps and indicating exactly where the customer is with their checkout via colors and highlights will give them an idea what will be required of them next.

标记步骤并通过颜色和重点突出显示客户的结帐位置，这将使他们了解下一步需要做什么。

If your site must have a multi-step process use the progress indicator to inform the customer which step they are at and how many more steps are left until they have completed their purchase.

如果您的站点必须执行多步骤流程，则可以使用进度指示器来告知客户他们所处的步骤以及完成购买之前还剩下多少步骤。

6.简化表格 (6. Uncomplicate Your Forms)

https://justoneeye.com

Any forms used on your checkout page should be free of ambiguity and they should not be overly complexed. Though making a purchase online customers do not want to have provide too much information and forms should take this into account.

结帐页面上使用的任何表格都应无歧义，并且不应过于复杂。尽管在线购物，客户并不想提供太多信息，但表格应该考虑到这一点。

While some information must be asked in order to finish an order its illogical hierarchy can have customers once more abandoning their planned purchase.

虽然必须询问一些信息才能完成订单，但其不合逻辑的层次结构可能会使客户再次放弃其计划的购买。

While there are many steps and considerations that need to be made when creating a checkout form there are some basic implementations that need to always be put into practice.

尽管创建结帐表单时需要进行许多步骤和考虑，但仍有一些基本实现需要始终付诸实践。

Any and all form fields need descriptions and if applicable an explanation.

任何和所有表单字段都需要描述，如果适用，还需要说明。

This can be easily done by providing a clickable question mark at the end of each field which can be accessed for a detailed explanation. This is a must for required fields or it can prevent confused customers from finishing.

可以通过在每个字段的末尾提供可单击的问号来轻松完成此操作，可以对它进行详细说明。这是必填字段的必填项，否则它可能会阻止困惑的客户完成工作。

Whether the title field is ambiguous or not it is smart to add an explanation link to each to avoid assumptions.

标题字段是否模棱两可，明智的做法是在每个字段中添加一个解释链接以避免假设。

Other than making sure your forms have the right titles and descriptions you need to also make sure the form fields show up in a logical manner. You wouldn’t have the credit card information appear at the top of the form before everything else would you? Of course not.

除了确保表单具有正确的标题和描述之外，还需要确保表单字段以逻辑方式显示。您不会在表格的顶部显示信用卡信息，然后再进行其他操作？当然不是。

Keep everything consistent and logical by having contact information appear first, followed by shipping information and then billing information. This is a standard setup that most buyers are familiar with.

首先使联系信息出现，然后是装运信息，然后是账单信息，以使一切保持一致和合乎逻辑。这是大多数购买者都熟悉的标准设置。

Also make sure that your form can readily and visually indicate errors before users can move on to complete their purchase.

另外，在用户继续完成购买之前，请确保您的表单可以轻松直观地指示错误。

结论 (Conclusion)

While there are certainly a lot more guidelines than the six above it should be noted that the above fundamentals will definitely push your checkout design in the right direction.

虽然肯定有比以上六个指南更多的准则，但应注意的是，上述基本原理肯定会推动您的结帐设计朝正确的方向发展。

Remember to constantly test your checkout’s efficiency to spot bugs in the system as well as analyze customer cart abandonment if you have the ability to do so.

请记住要不断测试结帐的效率，以发现系统中的错误，并有能力分析客户购物车的遗弃。