初学者指南 (A beginner’s guide)

If you own a small business with a store front, you might have never had to rely on online sales. Maybe you’re a small clothing store or a coffee shop. You just made that website so people could find you online, but you always expected the majority of your sales would still be in person.

如果您经营一家小型商店，而您却没有商店，那么您可能永远不必依靠在线销售。 也许您是一家小型服装店或咖啡店。 您只是建立了该网站，以便人们可以在网上找到您，但是您始终希望您的大部分销售额仍会亲自出现。

Not anymore.

不再。

From the beginning of March through mid-April, e-commerce sales are up 30%. Habits have changed. Buying online is here to stay. But if your website’s path to purchase is not crystal clear and intuitive, you may lose your potential customers along the way. Customers get frustrated quickly when their user experience (UX) is not up to snuff. Here’s how to make sure that doesn’t happen.

从3月初到4月中旬，电子商务销售额增长了30％ 。 习惯改变了。 在线购买将继续存在。 但是，如果您的网站购买途径不够清晰，直观，那么您可能会失去潜在的客户。 当用户体验(UX)不足时，客户会很快感到沮丧。 这是确保不会发生这种情况的方法。

快速谢谢你 (A quick thank you)

This post was inspired by a friend of mine who owns a killer coffee shop and coworking space in Texas. He had a website, but it was mostly there to provide information to get people to come into his shop. He did sell coffee beans online though, and I tried to buy some. I’m not in Texas but it was the least I could do as he faced a massive hit to his revenue.

这篇文章的灵感来自我的一个朋友，他在得克萨斯州拥有一家杀手级咖啡店和联合办公空间。 他有一个网站，但主要是在那里提供信息，以吸引人们进入他的商店 。 他确实在网上卖咖啡豆，而我试图买一些。 我不在德克萨斯州，但这是我至少能做的，因为他的收入遭受了巨大打击。

Unfortunately, his website was a maze. I couldn’t get back to my shopping cart from anywhere except a product page. This meant I wound up putting more than one of what I wanted in my cart, just to get to my cart (and then taking it out again). I didn’t realize he sold gift cards at all because I couldn’t find them. I was super confused by a duplicative top nav.

不幸的是，他的网站是一个迷宫。 除了产品页面，我无法从任何地方回到购物车。 这意味着我只好把我想要的一个以上的东西放到购物车中，只是想进入购物车(然后再次取出)。 我根本不知道他卖过礼品卡，因为我找不到它们。 我对重复的顶级导航感到非常困惑。

He’s a super smart business owner, but he’d never had to rely on his website before. So I texted him and said, “hey can I help you fix this?” I went through his website page by page and mocked them up, showing him where he needed to fix his path to purchase and user experience. Then I wondered, how many other small business owners need this help?

他是一位超级聪明的企业主，但他以前从未依赖过他的网站。 所以我发短信给他说：“嘿，我能帮您解决这个问题吗？” 我逐页浏览了他的网站并对其进行了模拟，向他展示了他需要在何处修复购买途径和用户体验。 然后我想知道，还有多少其他小企业主需要此帮助？

And here we are, with this article. This article is intended for people who have no experience with great website design or UX. Back to the main event.

这篇文章就在这里。 本文适用于没有出色的网站设计或UX经验的人们。 回到主要事件。

购买途径是什么？ (What is a path to purchase?)

When a new visitor arrives on your site, they see what is called “above the fold” (or ATF) content. This is what is immediately displayed without scrolling or clicking. It comes from the newspaper industry. Printed papers are typically folded in half; what’s on the top half of the front page is what grabs the reader’s eye as they walk past the newsstand. A similar rule applies to websites.

当新的访问者到达您的站点时，他们会看到所谓的“首屏”(或ATF)内容。 这是无需滚动或单击即可立即显示的内容。 它来自报纸行业。 打印的纸张通常会折成两半。 头版上半部分是经过书报亭时吸引读者眼球的内容。 类似的规则适用于网站。

The path to purchase is how that customer gets from that first step — arriving on your website — to the last one, a successful checkout. Optimizing your path to purchase means making sure that your customer can easily and intuitively get one to the other. Here’s how to do it.

购买的途径是客户从第一步(到达您的网站)到最后一个成功结帐的方式。 优化您的购买途径意味着确保您的客户可以轻松，直观地相互吸引。 这是操作方法。

你在卖什么？ (What are you selling?)

This may seem abundantly obvious, but it is the critical first step. You want to make sure that the categories of items you sell are easy to find and easy to buy. Make a list. This could be a selection of items you ship to the customer, but it could also be things like online gift cards and orders to-go.

这似乎很明显，但这是关键的第一步。 您要确保出售的商品类别易于查找和购买。 做一个列表。 这可能是您运送给客户的一系列商品，但也可能是在线礼品卡和待办订单之类的东西。

您不卖什么(在线)…还行吗？ (What are you not selling (online)…yet?)

It is also an opportunity to double check that everything you could sell online is actually on your website. Are you a coffee shop that also sells gift cards and whole beans (like my friend!)? Are you a clothing boutique that also has home goods? Even if you’ve never offered it online before, consider whether you could, by using a drop shipper for example. Have you typically only offered some of your food or drink offerings to-go? Why not all of them? Don’t leave money on the table!

这也是一个机会，可以再次检查您可以在网上出售的所有商品是否确实在您的网站上。 您是一家同时出售礼品卡和全豆的咖啡店(例如我的朋友！)吗？ 您是也有家居用品的服装精品店吗？ 即使您以前从未在线上提供过它，也可以考虑是否可以通过使用例如托运人的方式提供它。 您通常只提供一些食物或饮料吗？ 为什么不全部？ 不要把钱放在桌子上！

成为客户 (Be The Customer)

Now that you have identified what it is that you are selling or could sell online, you have to role play. Go to your website and pretend you are your customer. Start at the homepage, and try to complete a transaction for each item on your list. Ask yourself these questions:

现在，您已经确定要在网上销售的商品或可以在网上销售的商品，现在您必须扮演角色。 转到您的网站并假装您是您的客户。 从首页开始，并尝试完成列表中每个项目的交易。 问自己以下问题：

• Can I find the online shop/menu in one click from my homepage?
  我可以在首页中一键找到在线商店/菜单吗？
• Can I easily search the online shop/menu to find all the goods/dishes that I sell? Does the search function work? (Search for a few keywords and try it out yourself!)
  我可以轻松地搜索在线商店/菜单以找到我出售的所有商品/菜品吗？ 搜索功能有效吗？ (搜索一些关键字，然后自己尝试！)
• Are my goods/dishes displayed in an attractive way, with pictures and key details? If something has a quirky, unique or foreign-language name, make sure you include a brief description in English.
  我的商品/菜品是否以吸引人的方式展示，并带有图片和关键细节？ 如果某个名称具有古怪，唯一或外语名称，请确保提供简短的英语描述。

• Is it obvious how to make attribute selections like sizes, quantities, flavors, toppings or colors? If I don’t put that information in, does the page prompt me to do so before accepting my submission?

  如何进行属性选择(如大小，数量，口味，浇头或颜色)是否很明显？ 如果我没有输入该信息，该页面是否提示我在接受提交之前这样做？

• Is is obvious how to add something to my cart? Where is the “add to cart” button?
  很明显如何在购物车中添加一些东西？ “添加到购物车”按钮在哪里？
• Once I am in my cart, how many steps does it take to get to a confirmation page that my order was submitted? Can I cut any of those steps down, such as default billing address to shipping address unless the customer checks the “Ship to a Different Address” box?
  将我放入购物车后，要进入提交订单的确认页面需要执行几个步骤？ 除非客户选中“运送到其他地址”框，我是否可以减少其中的任何步骤，例如将默认账单地址更改为收货地址？
• What does my webpage look like on mobile? Does it resize correctly? Does the top nav re-organize itself to be mobile friendly, such as by consolidating the top nav items into a hamburger icon?
  我的网页在移动设备上是什么样的？ 尺寸是否正确？ 顶级导航是否会重新组织为适合移动设备使用，例如将顶级导航项合并到一个汉堡图标中？

抽查障碍 (Spot Check Roadblocks)

You have to remember that humans are generally not linear thinkers. They may decide they want to add more things to their cart, change a color of an item, or go read your blog post about the latest trends to make sure they picked the right style. If you were thinking that a customer journey is straight forward, I have news: it’s not.

您必须记住，人类通常不是线性思想家。 他们可能会决定要在购物车中添加更多物品，更改商品的颜色，或者阅读有关最新趋势的博客文章，以确保他们选择了正确的样式。 如果您认为客户之旅是直截了当的，那么我有消息：不是。

On top of that, there tends to be a lot of variety in human behavior. One person may decide to add tons of stuff to her cart, and then go back and check the color options. Another may want to browse everything you offer before taking that step. Here are some of the most common:

最重要的是，人类的行为往往多种多样。 一个人可能会决定向购物车中添加大量物品，然后返回并检查颜色选项。 另一个人可能想要在执行此步骤之前浏览您提供的所有内容。 以下是一些最常见的方法：

• I put something in my cart, but I want to keep shopping…how do I get back to the shop? [Add a “continue shopping” button to your confirmation screen or pop up that an item has been added to the user’s cart]
  我在购物车中放了东西，但我想继续购物……我如何回到商店？ [在确认屏幕上添加“继续购物”按钮，或弹出已将商品添加到用户购物车的弹出窗口]
• I forgot how much I put in my cart, so I add it again. [Use a dynamic shopping cart that updates with an indicator of how many items are in the cart. Check out how Amazon does this for a good example, particularly on mobile.]
  我忘了我在购物车中放了多少东西，所以我再次添加了它。 [使用动态购物车，该购物车会更新其中包含购物车中物品数量的指示器。 请查看亚马逊如何做到这一点，这是一个很好的例子，特别是在移动设备上。]

• I went back to the shop to buy something else, but I changed my mind. Can I get to the cart to check out from anywhere on the website? [The cart should be in your top navigation bar. It is most common to put it as the farthest right icon.]

  我回到商店去买别的东西，但是我改变了主意。 我可以从网站上的任何地方上车购物吗？ [购物车应位于顶部导航栏中。 最常将其作为最右边的图标。]

• I want to change something in my cart, like a quantity or a size. [Make sure the user can update the cart from the cart or create a way to go back to the item page to update it from there, rerouting back to the cart when finished.]
  我想更改购物车中的某些内容，例如数量或尺寸。 [请确保用户可以从购物车中更新购物车，或者创建一种方法来返回到项目页面以从那里进行更新，并在完成后重新路由到购物车。]

• I want to take something out of my cart completely and replace it with something else. [Have a “delete” button and a “continue shopping” button in the cart.]

  我想完全从购物车中取出东西，然后换成其他东西。 [在购物车中具有“删除”按钮和 “继续购物”按钮。]

• I want to buy the matching set of, or related item to, something else I just added to my cart. [Add a “related items” or “recommended” feed to your product pages that prioritizes items related to the product, such as a jacket that matches the pants they are looking at or a drink to go with their food order.]
  我想购买我刚刚添加到购物车中的其他商品的匹配组或相关项目。 [在产品页面上添加“相关项目”或“推荐”提要，以便优先处理与该产品相关的项目，例如与他们正在寻找的裤子相匹配的夹克或与他们的食品订单搭配的饮料。]

现在，问其他人 (Now, Ask Other People)

You know how your website works, so you’re probably going to miss something. The best way to fill this knowledge gap is to ask other people to look at it for you. This is called user testing.

您知道您网站的运作方式，因此您可能会错过一些东西。 弥补这一知识鸿沟的最佳方法是请其他人为您着眼。 这称为用户测试 。

It’s pretty easy to recruit some nice people on forums you usually frequent. I’ve had luck on topical sub-reddits or LinkedIn. I usually offer a $20 Amazon or Starbucks gift card as a thank you.

在您经常访问的论坛上招募一些好人很容易。 我在热门子Reddits或LinkedIn上运气不错。 我通常会提供$ 20的Amazon或Starbucks礼品卡作为感谢。

The cheapest way to do this is simply set up a video call with them and record it. Have them share their screen and then ask them to try to buy something all the way up through the point where they hit “confirm order” or similar. (Obviously, you’re not going to force them to make a purchase.) Tell them to put in a fake credit card number and address just for demonstration purposes.

最便宜的方法是与他们进行视频通话并进行记录。 让他们共享他们的屏幕，然后要求他们尝试在到达“确认订单”或类似位置之前一直购买东西。 (显然，您不会强迫他们购买。)告诉他们输入虚假的信用卡号和地址，仅用于演示目的。

Now, watch what they do. Encourage them to talk out loud while they do it to tell you what they’re thinking. Ideally, you will hear things like, “I like this picture, it makes me crave a cup of coffee!” or “I don’t understand how to put something in my cart. Where is the ‘add to cart’ button?”

现在，看看他们在做什么。 鼓励他们在说话时大声说出来，以告诉您他们在想什么。 理想情况下，您会听到诸如“我喜欢这张照片，这让我渴望喝杯咖啡！”之类的事情。 或“我不知道如何在购物车中放东西。 “添加到购物车”按钮在哪里？”

In general, I would never recommend asking friends or family to do user testing for you because they are likely to be biased. It’s not their fault; they just want you to be successful because they care about you. But if you’re stretched thin financially, they can work in a pinch. (Try to ask some who aren’t regular customers or are unfamiliar with your website.) Be warned: you’re likely to get a lot of ego-inflating compliments, which you should ignore. Make them be honest.

通常，我永远不建议您要求朋友或家人为您做用户测试，因为他们可能会有所偏见。 这不是他们的错； 他们只是希望您成功，因为他们关心您。 但是，如果您财务拮据，他们可以在紧要关头工作。 (尝试问一些不是常规客户或对您的网站不熟悉的人。)警告：您可能会得到很多夸大自我的夸奖，您应该忽略这些夸奖。 让他们诚实。

If you do have the funds, you can set up a quick usability test on a website like User Testing or Validately. They will recruit testers for you based on parameters you set, such as people who live within driving distance of your restaurant or women between the ages of 20 and 45.

如果你有资金，你可以建立一个快速的可用性测试像一个网站上的用户测试或Validately 。 他们会根据您设置的参数为您招募测试人员，例如居住在您餐厅开车距离内的人或20至45岁之间的女性。

不要失去他们 (Don’t Lose Them)

Customers are increasingly impatient when it comes to finding content they want. There are three important concepts to remember:

客户在寻找所需内容时越来越不耐烦 。 要记住三个重要概念：

加载时间 (Load Time)

This is the number of seconds that it takes your page to load on various devices. If it takes too long, your customers are likely to click away and maybe never come back. Fifty-three percent of mobile users will leave a site if it loads in more than three seconds, according to a Google Study.

这是您的页面在各种设备上加载所花费的秒数。 如果花费的时间太长，您的客户可能会点击离开，甚至永远不会回来。 根据Google研究 ，如果网站加载时间超过三秒钟，则有53％的移动用户将离开该网站。

高于折叠vs低于折叠 (Above The Fold vs. Below The Fold)

As I mentioned earlier, the content on the top half of any website page, particularly your homepage, is considered the creme de la creme of content real estate. Above the fold (ATF) content is what first appears when you open the webpage. Anything you have to scroll down to see is below the fold (BTF). This may change depending on whether you are viewing the site from your phone, computer or tablet — and certainly if you have a standalone mobile app.

正如我之前提到的，任何网站页面上半部分的内容，特别是您的首页，都被视为内容房地产的极致。 折叠(ATF)内容上方是打开网页时首先显示的内容。 您必须向下滚动才能看到的所有内容都在折叠(BTF)之下。 这可能会有所不同，具体取决于您是从手机，计算机还是平板电脑上查看网站-当然，如果您有独立的移动应用程序。

呼吁采取行动 (Call To Action)

A call to action (CTA) is the way in which you tell your users what to DO now that they have arrived on your site or a particular page of your site. If you’re reading this article, it’s fairly likely the answer to that question is “make a purchase.” There are all kinds of ways to highlight the call to action, but the most common is a button that is a different color from the background of your page.

号召性用语(CTA)是一种方法，您可以告知用户他们已经到达您的网站或网站的特定页面，现在该怎么做。 如果您正在阅读本文，则该问题的答案很可能是“购买”。 有多种方法可以突出显示号召性用语，但最常见的是按钮，其颜色与页面背景颜色不同。

If you don’t tell users what to do when they arrive on a particular page — your CTA — it’s likely they are not going to do it.

如果您不告诉用户到达特定页面(即您的CTA)时该怎么做，则很可能他们不会这样做。

好，那现在呢？ (Ok, so now what?)

减少您的加载时间 (Scrub Your Load Time)

This is perhaps the only part of this process where you may need some technical help. You can do the first step yourself: check how fast your page loads on various devices by using a tool like this one or this one. You cannot control a slow internet connection, but you can remove any heavy javascript or other top heavy functionalities that may slow down your website. Here are some instructions you can give your website manager:

这也许是此过程中您可能需要一些技术帮助的唯一部分。 您可以自己进行第一步：使用this或this工具检查页面在各种设备上的加载速度。 您无法控制缓慢的Internet连接，但是可以删除任何笨拙的javascript或其他最繁重的功能，这些功能可能会使您的网站变慢。 您可以向网站管理员提供以下说明：

• Remove redirects and serve your website directly; audit your redirects with a tool like this one

  删除重定向并直接为您的网站提供服务； 与像一个工具审核您重定向这一个

• Make your images smaller without sacrificing quality with a tool like this one or this one

  使您的图片，而不会牺牲质量与像一个工具， 这一个或这一个

• Use social share buttons instead of JavaScript social plug-ins
  使用社交共享按钮代替JavaScript社交插件

• Use a Content Delivery Network (CDN) instead of a single server; if you’re using any of the out of the box website hosting tools like Squarespace or WordPress, you’re probably already doing this

  使用内容分发网络 (CDN)代替单个服务器； 如果您正在使用任何现成的网站托管工具，例如Squarespace或WordPress，则您可能已经在这样做了

• Minify JavaScript and CSS scripts with a tool like this one

  压缩JavaScript，并像一个工具，CSS脚本这一个

检查你的折叠 (Check Your Fold)

Open each page that is directly accessible from your homepage, and make sure that your user sees immediately how to make a purchase without scrolling down. If you have a webform at the bottom of the page, for example, put a button a the top that says “contact us” and skips you down. If you want users to put something in their cart, put the “add to cart” button above the fold (ATF). If you want users to find their cart from the homepage, make sure it’s ATF.

打开可从您的主页直接访问的每个页面，并确保您的用户可以立即看到如何进行购买而无需向下滚动 。 例如，如果您在页面底部有一个Web表单，则在顶部放置一个按钮，上面写着“与我们联系”，然后跳过您。 如果希望用户将某些东西放入购物车中，请在折页(ATF)上方放置“添加到购物车”按钮。 如果您希望用户从主页上找到他们的购物车，请确保它是ATF。

One key way to keep content that is very important ATF is a sticky top navigation bar. This is a navigation bar that stays at the top of the page even when a user scrolls down (just like Medium’s!). This ensures, for example, they can always find their cart or the online shop or any other place you want them to find.

保留非常重要的ATF内容的一种关键方法是粘性顶部导航栏。 即使用户向下滚动(就像中号一样！)，这也是一个导航栏，它仍位于页面顶部。 例如，这可以确保他们始终可以找到他们的购物车，网上商店或您希望他们找到的任何其他地方。

打电话给我……一定！ (Call Me…Definitely!)

Every distinct action you want the user to take should be as easy to find as possible…and ATF! You guessed it, these two concepts are related. Make sure that any critical action BTF can be accessed ATF, even if there are other steps they have to do in between. For example, you can have a “Checkout” CTA ATF (aka, call to action, above the fold) even if the customer will still have to fill in their shipping and billing information before placing the order.

您希望用户采取的每一个不同的动作都应该尽可能地容易找到……以及ATF！ 您猜对了，这两个概念是相关的。 确保可以在ATF中访问任何关键操作BTF，即使它们之间还需要执行其他步骤。 例如，即使客户在下订单之前仍必须填写其运送和账单信息，您也可以拥有“结帐” CTA ATF(又名“首付”)。

你可以这样做 (You Can Do This)

If you find any of this intimidating, remember: you are a customer too. Check out the websites of brands you like — where are their CTAs? Is their online shop easy to find? How seamless is the purchase process? Can you get to your shopping cart from anywhere on their site?

如果您发现任何这种威胁，请记住：您也是客户。 查看您喜欢的品牌的网站-他们的CTA在哪里？ 他们的网上商店容易找到吗？ 购买过程有多无缝？ 您可以从他们网站上的任何地方进入购物车吗？

E-commerce is here to stay, and for small businesses that are making the transition for the long run, good UX and a seamless path to purchase is the key. You need and want your customers to actually get to that checkout page.

电子商务将继续存在，对于长期过渡的小型企业来说，良好的用户体验和无缝的购买途径是关键。 您需要并希望您的客户真正进入该结帐页面。

普通纸笔记 (A note In Plain English)

Did you know that we have four publications and a YouTube channel? You can find all of this from our homepage at plainenglish.io — show some love by giving our publications a follow and subscribing to our YouTube channel!

您知道我们有四个出版物和一个YouTube频道吗？ 您可以在我们的主页plainenglish.io上找到所有这些内容 -通过对我们的出版物进行关注并订阅我们的YouTube频道来表达爱意！