初學者指南 (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頻道來表達愛意！