Đăng ký SPRINGMEBLOG để tiếp thu kiến thức hiệu quả hơn!

Forgot Password

Đăng ký SPRINGMEBLOG để tiếp thu kiến thức hiệu quả hơn!

Cảm ơn bạn đã đăng ký tài khoản Springmeweb!

Vui lòng kiểm tra Email, click vào Link để kích hoạt tài khoản.

The Ultimate Guide To UX Design For Ecommerce

BY: Nguyen-Ngoan  |   Nov. 21, 2018
41 MIN
UX
  • 0

Click vào từ bạn chưa biết để dịch

eCommerce UX Design Guide

When it comes to UX design for eCommerce websites, many businesses we speak to seem to value their own brand experience over what will help the users. There’s a notion that they simply need to sell their style and the users will buy, in those immortal words, just like that.

Hướng dẫn thiết kế UX cho trang thương mại điện tử

Khi nói đến thiết kế UX cho các trang web thương mại điện tử, nhiều doanh nghiệp mà chúng tôi nói đến dường như coi trọng trải nghiệm thương hiệu của riêng họ về những gì sẽ giúp người dùng. Có một khái niệm rằng họ chỉ cần bán phong cách của họ và người dùng sẽ mua, trong những lời bất tử đó, như thế.

You can only imagine the amount of head-to-desk slamming we’ve done over the years.

As sales are massively impacted by poor usability, good UX is, in our opinion, the most important feature of any eCommerce website design. This means making sure that all content delivered to the user is relevant, valuable and has a definite purpose. But where do you begin?

Bạn chỉ có thể tưởng tượng số lượng các cú đánh đầu vào bàn mà chúng tôi đã thực hiện trong những năm qua.

Khi bán hàng bị ảnh hưởng ồ ạt bởi khả năng sử dụng kém, UX tốt, theo ý kiến ​​của chúng tôi, tính năng quan trọng nhất của bất kỳ thiết kế trang web thương mại điện tử nào. Điều này có nghĩa là đảm bảo rằng tất cả nội dung được phân phối cho người dùng có liên quan, có giá trị và có mục đích nhất định. nhưng bạn bắt đầu từ đâu?

Let me preface this article by stating that everything you are doing must be optimised for mobile. With the dramatic increases in actual purchases being made on mobile devices, don’t for one second consider a website design that won’t function effectively on both mobile and desktop.

I’m just getting that out of the way here so I don’t have to hammer the point home every second sentence.

So let’s start.

Hãy để tôi mở đầu bài viết này bằng cách nói rằng mọi thứ bạn đang làm phải được tối ưu hóa cho thiết bị di động. Với sự gia tăng đáng kể trong các giao dịch mua thực tế được thực hiện trên thiết bị di động, không mất một giây để xem xét thiết kế trang web sẽ không hoạt động hiệu quả trên cả thiết bị di động và máy tính để bàn.

Tôi chỉ nhận được rằng ra khỏi con đường ở đây vì vậy tôi không phải búa điểm nhà mỗi câu thứ hai.

Hãy bắt đầu.

Table of Contents

Business and Website Evaluation

Competitor and Market Research

Client Personas

eCommerce Homepage UX

Product Page Design

eCommerce Checkout UX

Search, Segmentation & Navigation

Sales

Mục lục

Đánh giá doanh nghiệp và trang web

Đối thủ cạnh tranh và nghiên cứu thị trường

Khách hàng Personas

Trang chủ Thương mại điện tử UX

Thiết kế trang sản phẩm

UX thanh toán thương mại điện tử

Tìm kiếm, phân đoạn và điều hướng

Bán hàng

Understanding the Business

Hiểu doanh nghiệp

Though it ought to go without saying, you need to understand what the business is and what it does before you begin any work on optimising any website. This may seem simple – and it is – but you need to make sure you are asking yourself the right questions in order to get the right answers.

Mặc dù nó phải đi mà không nói, bạn cần phải hiểu những gì doanh nghiệp là và những gì nó làm trước khi bạn bắt đầu bất kỳ công việc trên tối ưu hóa bất kỳ trang web. Điều này có vẻ đơn giản - và nó là - nhưng bạn cần phải chắc chắn rằng bạn đang tự hỏi mình những câu hỏi đúng để có được câu trả lời đúng.

When working with clients, the first thing we perform is an in-depth evaluation of all their current market standing, their content, how the company is set up and what their strengths and weaknesses are. This gives us the best possible vantage point to begin the UX design process.

Khi làm việc với khách hàng, điều đầu tiên chúng tôi thực hiện là đánh giá chuyên sâu về tất cả thị trường hiện tại của họ, nội dung của họ, cách công ty được thiết lập và điểm mạnh và điểm yếu của họ. Điều này cho chúng ta điểm thuận lợi nhất có thể để bắt đầu quá trình thiết kế UX.

Evaluating Current UX Design

There are a variety of ways that this can be carried out, and at Spot Studio we combine the following 3 to deliver the best evaluation we can.

Đánh giá thiết kế UX hiện tại

Có nhiều cách để thực hiện điều này và tại Spot Studio, chúng tôi kết hợp 3 điều sau đây để cung cấp đánh giá tốt nhất có thể.

User Session Viewing

Xem phiên người dùng

Perhaps the most helpful of all practises, we watch how actual customers use the website. By monitoring these sessions we can see how the business’ target market is engaging with what already exists.

Có lẽ hữu ích nhất trong tất cả các thực tiễn, chúng tôi xem khách hàng thực sự sử dụng trang web như thế nào. Bằng cách theo dõi các phiên này, chúng ta có thể thấy thị trường mục tiêu của doanh nghiệp đang tương tác với những gì đã tồn tại.

This helps us understand where the UX is already functioning properly, but also where there are bottlenecks and exit points. Identifying these key areas will help us create cures later on.

Điều này giúp chúng ta hiểu nơi UX đã hoạt động đúng cách, nhưng cũng có nơi có những nút cổ chai và điểm thoát. Việc xác định các khu vực chính này sẽ giúp chúng tôi tạo ra các phương pháp chữa trị sau này.

Heat Maps

A/B Test Hugo Carter

A little less robust than session monitoring, heat maps are a valuable tool to understand where exactly your user’s attention is placed. This will show you the most important parts of the current on-page content, and those that are redundant. We personally like Hotjar for this.

Một chút ít mạnh mẽ hơn so với giám sát phiên, bản đồ nhiệt là một công cụ có giá trị để hiểu chính xác nơi người dùng của bạn được đặt. Điều này sẽ cho bạn thấy những phần quan trọng nhất của nội dung hiện tại trên trang và những phần không cần thiết. Cá nhân chúng tôi thích Hotjar cho việc này.

Behavioural Design Discussions

Thảo luận về thiết kế hành vi

Here’s where the specialists come in. At Spot Studio we have an in-house behavioural psychologist that works alongside our UX team to discuss each element of the webpage.

Đây là nơi các chuyên gia đến. Tại Spot Studio, chúng tôi có một nhà tâm lý học hành vi trong nhà làm việc cùng với nhóm UX của chúng tôi để thảo luận từng yếu tố của trang web.

Approaching the website as a set of behavioural triggers, you need to unearth whether the triggers are effective, relevant and with the right goal in mind.

Tiếp cận trang web dưới dạng bộ kích hoạt hành vi, bạn cần khai quật liệu trình kích hoạt có hiệu quả, có liên quan và với mục tiêu đúng hay không.

Research

When it comes to research, there are two key areas that any eCommerce UX designer will need to focus on: the competition & the market.

Nghiên cứu

Khi nói đến nghiên cứu, có hai lĩnh vực chính mà bất kỳ nhà thiết kế UX thương mại điện tử nào sẽ cần phải tập trung vào: cạnh tranh và thị trường.

blog_1b

Competitors

Đối thủ cạnh tranh

Without analytics data it’s not possible to know exactly what your competitors are achieving with their UX, however, we use a rule of thumb to judge which are performing the best: the bigger, the better.

Nếu không có dữ liệu phân tích, bạn không thể biết chính xác những gì đối thủ cạnh tranh của bạn đang đạt được với UX của họ, tuy nhiên, chúng tôi sử dụng quy tắc để đánh giá hoạt động tốt nhất: lớn hơn, càng tốt.

Pretty simple.

The bigger the business, the more likely they will have their own in-house UX team, and the more likely they are to be doing things right. Of course, this won’t always be the case and you’ll have to judge for yourself. Some big businesses will be more ignorant than you can imagine.

Khá đơn giản.

Doanh nghiệp càng lớn thì càng có nhiều khả năng họ sẽ có đội UX nội bộ của riêng họ và họ càng có nhiều khả năng làm điều đúng đắn. Tất nhiên, điều này không phải lúc nào cũng đúng và bạn sẽ phải tự đánh giá bản thân. Một số doanh nghiệp lớn sẽ dốt nát hơn bạn có thể tưởng tượng.

When you do find a company that you think are doing things right, ask yourself the following questions:

  • Why have they designed their website like this?
  • How am I, as a user, being guided through this website?
  • Do I have any questions about their products that aren’t answered?
  • Do I like the website and, if so, why?
  • Do I feel compelled to read their resources, click their links, make searches?

You see, understanding good eCommerce UX design isn’t a strict science… You need to be creative too.

Khi bạn tìm thấy một công ty mà bạn cho là đang làm đúng, hãy tự hỏi mình những câu hỏi sau đây:

  • Tại sao họ lại thiết kế trang web của họ như thế này?
  • Tôi, với tư cách là người dùng, đang được hướng dẫn thông qua trang web này?
  • Tôi có bất kỳ câu hỏi nào về sản phẩm của họ không được trả lời không?
  • Tôi có thích trang web không và nếu có thì tại sao?
  • Tôi có cảm thấy bắt buộc phải đọc tài nguyên của họ hay không, nhấp vào liên kết của họ, thực hiện tìm kiếm?

Bạn thấy đấy, hiểu biết về thiết kế UX thương mại điện tử tốt không phải là một khoa học nghiêm ngặt ... Bạn cũng cần sáng tạo.

Market Research

Really, there’s no more valuable source of information than your clients themselves. But how do you get them to talk?

Well, everyone likes little gifts, and seeing as they’re your customers (and provided you’ve been doing everything right), they’re probably fans of yours already.

Nghiên cứu thị trường

Thực sự, không có nguồn thông tin có giá trị hơn chính khách hàng của bạn. Nhưng làm cách nào bạn khiến họ nói chuyện?

Vâng, mọi người đều thích những món quà nhỏ và thấy họ là khách hàng của bạn (và miễn là bạn đã làm mọi thứ đúng), họ có lẽ là người hâm mộ của bạn.

What we suggest is sending vouchers or small little products to your most valuable customers. These will be the more likely to respond and are most likely to purchase again. Making them feel like valued customers won’t hurt in the long run either.

Simply ask them what they think about your website, and what they think can be improved. Don’t give them a mountain of questions either – we’ve found that 3-4 works best.

Những gì chúng tôi đề xuất là gửi chứng từ hoặc sản phẩm nhỏ đến những khách hàng có giá trị nhất của bạn. Đây sẽ là nhiều khả năng để trả lời và có nhiều khả năng mua lại. Làm cho họ cảm thấy như khách hàng có giá trị sẽ không bị tổn thương trong thời gian dài.

Đơn giản chỉ cần hỏi họ những gì họ nghĩ về trang web của bạn, và những gì họ nghĩ có thể được cải thiện. Đừng cung cấp cho họ một loạt câu hỏi - chúng tôi thấy rằng 3-4 hoạt động tốt nhất.

Personas

If you’ve read anything I’ve written before, you will know that I like to talk about on-page narratives. A lot. But that’s because they’re very important. I like to think of each single web page as a story that the user is the protagonist in, with each element a plot point in that story.

Personas

Nếu bạn đã đọc bất cứ điều gì tôi đã viết trước đây, bạn sẽ biết rằng tôi thích nói về các câu chuyện trên trang. Rất nhiều. Nhưng đó là vì chúng rất quan trọng. Tôi thích nghĩ về từng trang web như một câu chuyện mà người dùng là nhân vật chính, với mỗi yếu tố là một điểm cốt truyện trong câu chuyện đó.

Sure, the user isn’t strictly a character of my creation, but by writing the narrative to suit a character like them, I can get them to follow my plot and make that purchase.

Chắc chắn, người dùng không phải là một nhân vật sáng tạo của tôi, nhưng bằng cách viết câu chuyện cho phù hợp với một nhân vật như họ, tôi có thể khiến họ theo dõi cốt truyện của tôi và thực hiện giao dịch mua đó.

But before I begin writing any of the narrative, I need to know who my characters are, and what will inform their decisions. What will trigger them to perform certain actions and how I can ensure they’ll behave as I want them to.

Nhưng trước khi tôi bắt đầu viết bất kỳ câu chuyện nào, tôi cần phải biết nhân vật của mình là ai, và điều gì sẽ thông báo quyết định của họ. Điều gì sẽ kích hoạt chúng để thực hiện các hành động nhất định và cách tôi có thể đảm bảo chúng sẽ hoạt động như tôi muốn.

As we discussed above, session monitoring is excellent for this, as is your market research. But this is where analytics data becomes incredibly useful too.

Như chúng tôi đã thảo luận ở trên, giám sát phiên là tuyệt vời cho điều này, cũng như nghiên cứu thị trường của bạn. Nhưng đây là nơi dữ liệu phân tích trở nên cực kỳ hữu ích.

Creating client personas for UX Design Planning

Creating Client Personas

Tạo chân dung khách hàng

Think of this as simply putting faces to the anonymous internet users that visit your eCommerce website. Client personas are the stereotypical members of your market. They give you someone to directly sell to, which will help a great deal when it comes to deciding on UX features.

Hãy nghĩ về điều này đơn giản là đặt khuôn mặt cho người dùng internet ẩn danh truy cập vào trang web Thương mại điện tử của bạn. Client personas là thành viên khuôn mẫu của thị trường của bạn. Họ cung cấp cho bạn một người nào đó để bán trực tiếp, điều này sẽ giúp ích rất nhiều khi quyết định về các tính năng của UX.

We find that it’s best to create at least 3 separate personas to give yourself a fair estimation of your target market. These personas should embody the characteristics of specific demographics of your market base.

Chúng tôi thấy rằng tốt nhất nên tạo ít nhất 3 tên riêng biệt để cung cấp cho bạn một ước tính hợp lý về thị trường mục tiêu của bạn. Những personas nên thể hiện các đặc điểm của nhân khẩu học cụ thể của cơ sở thị trường của bạn.

eCommerce UX Design for Pages

Thiết kế UX thương mại điện tử cho các trang

By now you should have enough information on your market, your current website design and your competition to start designing the new website.

Bởi bây giờ bạn nên có đủ thông tin về thị trường của bạn, thiết kế trang web hiện tại của bạn và sự cạnh tranh của bạn để bắt đầu thiết kế trang web mới.

So let’s take a look at what the important landing pages for an eCommerce website should contain.

Vì vậy, hãy xem những trang đích quan trọng cho trang web Thương mại điện tử nên chứa những gì.

The Homepage

Trang chủ

They always say you should never judge a book by its cover, don’t they? But everyone does. And in the world of eCommerce it’s even more prevalent.

Họ luôn luôn nói rằng bạn không bao giờ nên đánh giá một cuốn sách bằng bìa của nó, phải không? Nhưng tất cả mọi người đều làm vậy. Và trong thế giới thương mại điện tử thậm chí còn phổ biến hơn.

When a user lands on your website you have 0.05 seconds to convince them that you’re worth their time. That’s a about the length of a single frame on TV. You need to convince them that you’re trustworthy and will have what they’re looking for in the blink of an eye. So how do you do it?

Khi người dùng truy cập vào trang web của bạn, bạn có 0,05 giây để thuyết phục họ rằng bạn xứng đáng với thời gian của họ. Đó là khoảng thời gian của một khung hình duy nhất trên TV. Bạn cần thuyết phục họ rằng bạn đáng tin cậy và sẽ có những gì họ đang tìm kiếm trong nháy mắt. vậy bạn sẽ làm sao?

The Top Line Banner

Biểu ngữ ở đầu trang

Ever since we were children we’ve been taught to read from top to bottom. It’s ingrained in us. Which means that when a potential customer lands on your homepage, their eyes are going to start at the top and work their way down.

Từ khi còn nhỏ, chúng tôi được dạy đọc từ trên xuống dưới. Nó ăn sâu vào chúng ta. Điều này có nghĩa là khi một khách hàng tiềm năng truy cập vào trang chủ của bạn, mắt của họ sẽ bắt đầu ở đầu và làm việc theo cách của họ.

So what do you do with this knowledge? You convey important, sales driven information in the top line banner.

Vậy bạn làm gì với kiến ​​thức này? Bạn truyền đạt thông tin quan trọng, bán hàng theo định hướng trong biểu ngữ trên cùng.

Top Line Banner ecommerce ux

In about 2 inches of screen space, Clarks have managed to convey an incredible amount of information. Important information about needs, wants and desires. Let’s dissect it.

Trong khoảng không gian màn hình khoảng 2 inch, Clarks đã xoay sở để truyền tải một lượng thông tin đáng kinh ngạc. Thông tin quan trọng về nhu cầu, mong muốn và mong muốn. Hãy mổ xẻ nó đi.

Needs

The top line is extremely helpful, linking to all the key informations a customer needs. Store locator for bricks and mortar purchases, their help section, the customer login, the shopping bag and the eCommerce checkout. These are for those who are either there to make a purchase or require help.

Nhu cầu

Dòng đầu là cực kỳ hữu ích, liên kết đến tất cả các thông tin quan trọng mà khách hàng cần. Địa chỉ cửa hàng truyền thống, phần trợ giúp, đăng nhập của khách hàng, túi mua sắm và thanh toán thương mại điện tử. Đây là những người đang ở đó để mua hàng hoặc yêu cầu trợ giúp.

Wants

Here we have all the store section or category links; everything that the customer could want will be found here. They can even search for what they specifically want in the bar.

Muốn

Ở đây chúng tôi có tất cả các liên kết phần hoặc danh mục cửa hàng; mọi thứ mà khách hàng có thể muốn sẽ được tìm thấy ở đây. Họ thậm chí có thể tìm kiếm những gì họ đặc biệt muốn trong thanh.

Desires

Here Clarks give their potential customers some desire fulfilment. Everyone who makes an online purchase dreams of getting free things, cheap things or things as soon as they can.

Ham muốn

Ở đây Clarks cung cấp cho khách hàng tiềm năng của họ một số mong muốn thực hiện. Tất cả những người làm cho một giấc mơ mua hàng trực tuyến nhận được những thứ miễn phí, những thứ giá rẻ hoặc những thứ càng sớm càng tốt.

Your Value Proposition

This is the reason why your customers should choose you, and it requires some really smart, snappy copy. Below we have a fantastic example of how to do it right.

Đề xuất giá trị của bạn

Đây là lý do tại sao khách hàng của bạn nên chọn bạn, và nó đòi hỏi một số bản sao thực sự thông minh, linh hoạt. Dưới đây chúng tôi có một ví dụ tuyệt vời về cách làm đúng.

Value proposition for eCommerce UX Design

So simple, yet so effective. The copy, “You called. We answered.” shows precisely how valuable Muc-Off are to their customers. They listen to what they have to say, and not only that, they deliver what the customers are looking for.

Rất đơn giản nhưng hiệu quả. Bản sao chép, "Bạn đã gọi. Chúng tôi đã trả lời." cho thấy chính xác giá trị Muc-Off dành cho khách hàng của họ như thế nào. Họ lắng nghe những gì họ nói, và không chỉ vậy, họ cung cấp những gì khách hàng đang tìm kiếm.

You, as the customer, become a valuable part of the company itself, with your own opinions affecting the company’s business choices. And as this is a specialist athletic products company, you really want to know that they care about your niche.

Bạn, với tư cách là khách hàng, trở thành một phần có giá trị của chính công ty, với ý kiến ​​của riêng bạn ảnh hưởng đến các lựa chọn kinh doanh của công ty. Và vì đây là một công ty chuyên về sản phẩm thể thao, bạn thực sự muốn biết rằng họ quan tâm đến lĩnh vực của bạn.

Top points to the copywriter for this one.

Các điểm hàng đầu cho người viết bài cho tác phẩm này.

Funnelling

Phễu

Make it as simple as possible for your customers to find what they want as soon as they land on your homepage. Sure, you may want to give up the above the fold space to announce new products or special offers, but below this you want to immediately pull people through to your shop.

Làm cho khách hàng của bạn đơn giản nhất có thể để tìm thấy những gì họ muốn ngay sau khi họ truy cập trang chủ của bạn. Chắc chắn, bạn có thể muốn từ bỏ không gian trên màn hình để công bố sản phẩm mới hoặc ưu đãi đặc biệt, nhưng dưới đây bạn muốn ngay lập tức kéo mọi người đến cửa hàng của bạn.

Speaking of which, Pull and Bear have decided to forgo the value proposition entirely and immediately funnel people through to their respective departments.

Phát biểu trong đó, Pull and Bear đã quyết định từ bỏ toàn bộ đề xuất giá trị và ngay lập tức đưa mọi người đến với các phòng ban tương ứng của họ.

Funnelling from homepage eCommerce

You have to admire the simplicity of the layout here. It says,

“We both know why you’re here, so come take a look at the clothes”.

No fancy gimmicks, no thrills, no buffering videos. Straight to the point.

Bạn phải chiêm ngưỡng sự đơn giản của bố cục ở đây. Nó nói rằng,

“Cả hai chúng ta đều biết tại sao cậu lại ở đây, nên hãy nhìn vào quần áo đi.”

Không có mánh lới quảng cáo lạ mắt, không có cảm giác mạnh, không có video đệm. Thẳng đến điểm.

Clarks menu ux design

Going back to Clarks, we can see a different way of approaching funnelling. Hovering over an item in the store menu, you are delivered each item category, speeding up your online shopping experience.

They also include a selection of ‘popular items’, leveraging buyer proof to upsell their products. More on this later.

Quay trở lại Clarks, chúng ta có thể thấy một cách khác để tiếp cận kênh. Di chuột qua một mục trong menu cửa hàng, bạn được phân phối từng danh mục mục, tăng tốc trải nghiệm mua sắm trực tuyến của bạn.

Chúng cũng bao gồm một lựa chọn 'các mặt hàng phổ biến', tận dụng bằng chứng của người mua để nâng cao sản phẩm của họ. Thêm về điều này sau.

The Fountain of Knowledge

So you have created excellent, funnel driven links above the fold. Nice. But there are those intrepid shoppers who always want to know more. But what do you give them? Knowledge.

For those who aren’t satisfied to simply click through to your shop, you have the opportunity to demonstrate your expertise and the added value of buying from your company. This is where your content strategy will come in and where you can really show off your smarts.

Fountain of Knowledge

Vì vậy, bạn đã tạo các liên kết tuyệt vời, được định hướng kênh trong màn hình đầu tiên. Tốt đẹp. Nhưng có những người mua sắm dũng cảm luôn muốn biết nhiều hơn. Nhưng bạn cung cấp cho họ những gì? Hiểu biết.

Đối với những người không hài lòng chỉ đơn giản là nhấp qua cửa hàng của bạn, bạn có cơ hội thể hiện chuyên môn của mình và giá trị gia tăng mua từ công ty của bạn. Đây là nơi chiến lược nội dung của bạn sẽ đến và nơi bạn có thể thể hiện sự khéo léo của mình.

Lush homepage UX design guide

Uniquely, Lush intermingle their expert content with products and customer reviews. These articles support the sales of their products and introduce their prospective customers to the specialist knowledge that the company can offer.

Now, to some eyes, this may look like a mishmash of nauseating perfumery, to others this reflects the bubbly, effervescent nature of Lush itself. So take head. If you’re considering this route for your eCommerce UX design, we urge you to evaluate whether this suits your business and be cautious to not overdo it.

Duy nhất, Lush trộn lẫn nội dung chuyên môn của họ với các sản phẩm và đánh giá của khách hàng. Những bài viết này hỗ trợ việc bán sản phẩm của họ và giới thiệu khách hàng tiềm năng của họ với kiến ​​thức chuyên môn mà công ty có thể cung cấp.

Bây giờ, đối với một số đôi mắt, điều này có thể giống như một hỗn độn của nước hoa buồn nôn, cho những người khác phản ánh bản chất sôi nổi, sủi bọt của chính Lush. Vì vậy, đi đầu. Nếu bạn đang xem xét tuyến đường này cho thiết kế UX thương mại điện tử của mình, chúng tôi khuyên bạn nên đánh giá liệu điều này có phù hợp với doanh nghiệp của bạn và thận trọng không lạm dụng nó hay không.

The Qualifiers

Here’s where you can sing your accolades. But don’t warble. No one likes a warbler. Use this bottom section to demonstrate your credibility as a manufacturer/developer/seller of products in nice, plain and simple terms. Show your customers that you’ve been in the news, that you have unique qualities and things that you’re proud of.

Các vòng loại

Đây là nơi bạn có thể hát các giải thưởng của mình. Nhưng đừng vội vã. Không ai thích một con chim chích. Sử dụng phần dưới cùng này để chứng minh sự tín nhiệm của bạn với tư cách là nhà sản xuất / nhà phát triển / người bán sản phẩm với các cụm từ đẹp, đơn giản và đơn giản. Cho khách hàng của bạn biết rằng bạn đã có tin tức, rằng bạn có những phẩm chất độc đáo và những điều mà bạn tự hào.

Homepage Qualifiers for UX design

Lush have used this space to inform their customers that their products are all ethically manufactured and tested, handmade and with naked packaging. That’s called knowing your market.

Lush đã sử dụng không gian này để thông báo cho khách hàng của họ rằng các sản phẩm của họ đều được sản xuất và thử nghiệm về mặt đạo đức, thủ công và có bao bì khỏa thân. Điều đó được gọi là biết thị trường của bạn.

The Footer

Also known as the matrix of links. There’s no point in getting particularly fancy about the footer, simply put all of your relevant links there. It’s the done thing, and customers will expect it. Link to your help pages, your contact, your social media accounts, the album of your family pets. Whatever is important to your business should be found here.

Chân trang

Còn được gọi là ma trận liên kết. Không có điểm nào đặc biệt ưa thích về chân trang, chỉ cần đặt tất cả các liên kết có liên quan của bạn ở đó. Đó là điều được thực hiện và khách hàng sẽ mong đợi điều đó. Liên kết đến các trang trợ giúp của bạn, liên hệ của bạn, tài khoản truyền thông xã hội, album của thú cưng trong gia đình bạn. Bất cứ điều gì là quan trọng đối với doanh nghiệp của bạn nên được tìm thấy ở đây.

homepage footer for ecommerce ux

Contact

Whether it’s over the phone, via live chat or via email, your customers will want to speak to you, or at least know that they can if they need to. This will help incredibly with your credibility and accountability, meaning that users are far more likely to trust you and to make a purchase. As such, you need to make it as clear as possible that you aren’t a faceless entity. Reassure your customers that behind the screen there’s a human being just waiting to help.

Liên hệ

Cho dù đó là qua điện thoại, qua trò chuyện trực tiếp hoặc qua email, khách hàng của bạn sẽ muốn nói chuyện với bạn hoặc ít nhất biết rằng họ có thể nếu họ cần. Điều này sẽ giúp vô cùng với độ tin cậy và trách nhiệm giải trình của bạn, có nghĩa là người dùng có nhiều khả năng tin tưởng bạn hơn và thực hiện mua hàng. Như vậy, bạn cần phải làm rõ ràng nhất có thể rằng bạn không phải là một thực thể vô danh. Đảm bảo với khách hàng của bạn rằng đằng sau màn hình có một con người chỉ cần chờ đợi để giúp đỡ.

It may be impractical for your company, but a direct phone number is incredibly handy for this, and will make it a lot easier for client queries to be resolved. Do avoid using any 08 numbers, however. Although they’re free nowadays, people will still get confused and are wary of running up massive mobile phone bills. And whilst we’re at it, don’t use a mobile number – they don’t inspire credibility.

Điều này có thể không thực tế đối với công ty của bạn, nhưng một số điện thoại trực tiếp vô cùng tiện lợi cho việc này và sẽ giúp việc truy vấn của khách hàng được giải quyết dễ dàng hơn rất nhiều. Tuy nhiên, tránh sử dụng bất kỳ số 08 nào. Mặc dù chúng được miễn phí hiện nay, mọi người vẫn sẽ bối rối và cảnh giác với việc chạy các hóa đơn điện thoại di động khổng lồ. Và trong khi chúng tôi ở đó, không sử dụng số điện thoại di động - chúng không truyền cảm hứng cho sự tín nhiệm.

Notes on Homepage UX

Whilst this list may seem basic, and it is, that’s because these are really the only sections that your eCommerce homepage needs. The last thing you need to do is start overcomplicating matters with a bunch of noise that will distract your user from the purpose of your website: to sell them things. There are additional sections you might like to include, such as a newsletter sign up or a gallery section, but you will have to decide whether that is valuable to your users or not.

Hint: 9 times out of 10 it won’t be.

Ghi chú trên Trang chủ UX

Mặc dù danh sách này có vẻ cơ bản và đó là vì đó thực sự là những phần duy nhất mà trang chủ Thương mại điện tử của bạn cần. Điều cuối cùng bạn cần làm là bắt đầu quá phức tạp các vấn đề với một loạt các tiếng ồn sẽ làm sao lãng người dùng của bạn từ mục đích của trang web của bạn: để bán cho họ những thứ. Có các phần bổ sung mà bạn có thể muốn bao gồm, chẳng hạn như phần đăng ký bản tin hoặc bộ sưu tập, nhưng bạn sẽ phải quyết định xem phần đó có đáng giá cho người dùng của bạn hay không.

Gợi ý: 9 lần trong số 10 nó sẽ không được.

The Product Page

The second most important page when it comes to eCommerce UX design, the product page needs to be smartly crafted to generate (at bare minimum) a deposit in the cart. So let’s take a look at how to optimise the usability of your product page.

Trang sản phẩm

Trang quan trọng thứ hai khi nói đến thiết kế UX thương mại điện tử, trang sản phẩm cần phải được tạo thủ công một cách thông minh để tạo ra (tối thiểu) một khoản tiền gửi trong giỏ hàng. Vì vậy, hãy xem cách tối ưu hóa khả năng sử dụng của trang sản phẩm của bạn.

Product Images

Your product images are your primary weapon. They are what will first draw your users’ eyes and can, in a split second, determine whether they will buy from you or not. Something as innocuous as poor lighting can make your operation seem makeshift and therefore untrustworthy, so follow these guidelines closely to ensure you don’t let yourselves down.

Hình ảnh sản phẩm

Hình ảnh sản phẩm của bạn là vũ khí chính của bạn. Họ là những gì đầu tiên sẽ thu hút mắt người dùng của bạn và có thể, trong một giây, xác định xem họ sẽ mua từ bạn hay không. Thứ gì đó vô hại như ánh sáng yếu có thể làm cho hoạt động của bạn có vẻ tạm thời và do đó không đáng tin cậy, vì vậy hãy làm theo các hướng dẫn này chặt chẽ để đảm bảo bạn không buông xuống.

Use Natural Lighting

Make sure that the picture looks as real as possible. You might secure a sale with fancy lighting, but if the product doesn’t look like a picture, you’re dramatically increasing your chances of having it sent back to you.

Give A Sense Perspective

Your customers wants to know exactly how big the thing is, so give them a sense of perspective. Take a photo of the product next to a recognisable object.

Show Your Products Being Used

This will simply help the customer visualise themselves using your product in a specific situation. And visualisation is key to the sale. Just ask any estate agent.

Photos That Won’t Clash

Make sure the photos you take will not clash with the branding on your website. Keep consistency in the pictures and make sure they work with your colour palette.

Sử dụng ánh sáng tự nhiên

Đảm bảo hình ảnh trông thật nhất có thể. Bạn có thể đảm bảo bán hàng với ánh sáng lạ mắt, nhưng nếu sản phẩm không giống như một bức tranh, bạn đang tăng đáng kể cơ hội được gửi lại cho bạn.

Đưa ra một quan điểm Sense

Khách hàng của bạn muốn biết chính xác điều lớn như thế nào, vì vậy hãy cho họ cảm giác về quan điểm. Chụp ảnh sản phẩm bên cạnh đối tượng dễ nhận biết.

Hiển thị sản phẩm của bạn đang được sử dụng

Điều này sẽ giúp khách hàng trực quan hóa bản thân bằng cách sử dụng sản phẩm của bạn trong một tình huống cụ thể. Và hình dung là chìa khóa để bán hàng. Chỉ cần hỏi bất kỳ đại lý bất động sản nào.

Ảnh sẽ không đụng độ

Đảm bảo ảnh bạn chụp sẽ không xung đột với thương hiệu trên trang web của bạn. Giữ sự nhất quán trong hình ảnh và đảm bảo chúng hoạt động với bảng màu của bạn.

Optimise Your Photos for SEO

As we wrote about recently, Google is displaying images in mobile search results. This means that to make sure you have the best chance of getting traffic on your site, you need to optimise your photos with Schema.org markup. Click the link above for more information on how to do this.

Show Uniqueness

What makes your products your products? Is there some fine detailing? A special quirk? Make sure you get this across in your pictures, or your clients might never know about it…

Tối ưu hóa hình ảnh của bạn cho SEO

Như chúng tôi đã viết gần đây, Google đang hiển thị hình ảnh trong kết quả tìm kiếm trên thiết bị di động. Điều này có nghĩa là để đảm bảo bạn có cơ hội nhận lưu lượng truy cập trên trang web của mình tốt nhất, bạn cần tối ưu hóa ảnh của mình bằng đánh dấu Schema.org. Nhấp vào liên kết ở trên để biết thêm thông tin về cách thực hiện việc này.

Hiển thị tính độc đáo

Điều gì làm cho sản phẩm của bạn trở thành sản phẩm của bạn? Có một số chi tiết tốt? Một quirk đặc biệt? Hãy chắc chắn rằng bạn có được điều này trên trong hình ảnh của bạn, hoặc khách hàng của bạn có thể không bao giờ biết về nó ...

For more on product photography…

Product Specs

Give your customers everything they need to know about your product to make an informed purchase. For things like bags, explain the exact dimensions, whether they’re waterproof, whether they have additional pockets, a security pouch, how much weight they can handle.

Clothes need to have specific dimensions outlined, or at bare minimum, a description of how your business classifies medium, large and small clothing.

Để biết thêm về chụp ảnh sản phẩm…

Thông số sản phẩm

Cung cấp cho khách hàng của bạn mọi thứ họ cần biết về sản phẩm của bạn để mua hàng thông báo. Đối với những thứ như túi xách, hãy giải thích các kích thước chính xác, cho dù chúng không thấm nước, cho dù chúng có thêm túi, túi bảo mật, chúng có thể xử lý bao nhiêu không.

Quần áo cần phải có kích thước cụ thể được vạch ra, hoặc ở mức tối thiểu, một mô tả về cách doanh nghiệp của bạn phân loại quần áo trung bình, lớn và nhỏ.

Ux Design for eCommerce product page

ASOS do this extremely well, outlining all the product details the customer might be interested in by using very simple language. Explaining how the product should be looked after in the first person adds a nice touch of personalisation, and describing the size of the model and the product they’re wearing really helps the customer judge whether this is the fit for them.

ASOS làm điều này rất tốt, phác thảo tất cả các chi tiết sản phẩm mà khách hàng có thể quan tâm bằng cách sử dụng ngôn ngữ rất đơn giản. Giải thích cách sản phẩm nên được chăm sóc trong người đầu tiên thêm một liên lạc cá nhân hóa tốt và mô tả kích thước của mô hình và sản phẩm họ đang đeo thực sự giúp khách hàng đánh giá liệu điều này có phù hợp với họ hay không.

Colour Options

Far too many companies will stock the same product in different colours, but not explicitly show this on the website. By not only putting this information on the product page, but linking to the alternate colours, you will give customers who like the product, but aren’t sure the colour is for them, an additional nudge to make the purchase.

Tùy chọn màu

Quá nhiều công ty sẽ lưu trữ cùng một sản phẩm với các màu khác nhau, nhưng không hiển thị rõ ràng điều này trên trang web. Bằng cách không chỉ đặt thông tin này trên trang sản phẩm, nhưng liên kết với các màu thay thế, bạn sẽ cung cấp cho khách hàng những người thích sản phẩm, nhưng không chắc chắn màu sắc là dành cho họ, một sự thúc đẩy bổ sung để thực hiện giao dịch mua.

Show colour options on product page for eCommerce

Pull and Bear have a simple box to click, loading images of the same product on the same model in a different colour. Such simplicity, but incredibly useful for browsing customers.

Kéo và gấu có một hộp đơn giản để nhấp, tải hình ảnh của cùng một sản phẩm trên cùng một mẫu với một màu khác nhau. Đơn giản như vậy, nhưng vô cùng hữu ích để duyệt khách hàng.

Returns Policy & Delivery

With the first iterations of online stores this information was stored way at the end of the purchasing process. Finally revealed when the client was finally ready to buy, I can’t be the only one who has seen a 2 week delivery time, or an additional £5 P&P cost, sighed and immediately closed the tab. Being upfront about this information means that the customer can be more informed about their purchase and shows that you don’t want to waste their time.

Trả lại chính sách & giao hàng

Với các lần lặp đầu tiên của các cửa hàng trực tuyến, thông tin này được lưu trữ cách vào cuối quá trình mua hàng. Cuối cùng cũng tiết lộ khi khách hàng cuối cùng đã sẵn sàng mua, tôi không thể là người duy nhất nhìn thấy thời gian giao hàng trong 2 tuần, hoặc thêm £ 5 chi phí P & P, thở dài và ngay lập tức đóng tab. Việc trả trước thông tin này có nghĩa là khách hàng có thể được thông báo thêm về giao dịch mua của họ và cho thấy rằng bạn không muốn lãng phí thời gian của họ.

Returns and Delivery options on product page

We’re not suggesting that you offer to come and pick the product up from wherever the client is, but tell them what their options are. If your delivery options are simple, outline them here too, there’s no need to link them to another page. Added clicks just means the customer is more likely to get bored and leave your website.

Chúng tôi không gợi ý rằng bạn đề xuất đến và chọn sản phẩm từ bất kỳ đâu khách hàng, nhưng hãy cho họ biết lựa chọn của họ là gì. Nếu tùy chọn phân phối của bạn đơn giản, hãy phác thảo chúng ở đây, bạn không cần phải liên kết chúng với một trang khác. Các nhấp chuột được thêm vào chỉ có nghĩa là khách hàng có nhiều khả năng chán và rời khỏi trang web của bạn.

Shop The Look

This was a stroke of eCommerce UX design genius and whoever first thought of it deserves a massive pat on the back.

So you’ve spent all that time and money and effort to get professional photos taken with a model. Your wardrobe department has done an incredible job of matching items to make those photos really snap. But now you expect your clients to search around the site to find the combination themselves?

Mua cái nhìn

Đây là một đột phá của thiên tài thiết kế UX thương mại điện tử và bất cứ ai đầu tiên nghĩ về nó xứng đáng là một vỗ nhẹ trên lưng.

Vì vậy, bạn đã dành tất cả thời gian và tiền bạc và công sức để có được những bức ảnh chuyên nghiệp được chụp bằng một mô hình. Bộ phận tủ quần áo của bạn đã thực hiện một công việc đáng kinh ngạc về các mục phù hợp để làm cho những bức ảnh đó thực sự chụp nhanh. Nhưng bây giờ bạn mong đợi khách hàng của bạn để tìm kiếm trên trang web để tìm sự kết hợp mình?

SHop the look for ecommerce good ux design

Your customers might not want to dress exactly like the model, right down to the socks. But maybe they just really want those socks. See, providing the best eCommerce UX design means giving users the options they may want. Not what they all need. Which leads us seamlessly onto our next product page feature…

Khách hàng của bạn có thể không muốn ăn mặc chính xác như mô hình, ngay xuống tất. Nhưng có lẽ họ chỉ thực sự muốn những đôi tất. Xem, cung cấp thiết kế UX thương mại điện tử tốt nhất có nghĩa là cung cấp cho người dùng các tùy chọn mà họ có thể muốn. Không phải tất cả những gì họ cần. Điều này dẫn chúng tôi liên tục vào tính năng trang sản phẩm tiếp theo của chúng tôi…

You Might Also Like…

Also known as the ‘Related Products’ or ‘Our Customers Also Bought’ section. It’s the fantastically versatile cousin of the Shop the Look section and can be utilised in different ways throughout your website. For instance, on the Clarins website, the customer is offered two options: products they might also like, and products that the current item works well with. These two sections present two very important UX functions; one done well, one not so.

Bạn cũng có thể thích…

Còn được gọi là phần 'Sản phẩm có liên quan' hoặc 'Khách hàng của chúng tôi cũng Mua'. Đó là người anh em họ rất đa năng của cửa hàng Look the Look và có thể được sử dụng theo nhiều cách khác nhau trên trang web của bạn. Ví dụ: trên trang web Clarins, khách hàng được cung cấp hai tùy chọn: các sản phẩm mà họ cũng có thể thích và các sản phẩm mà mặt hàng hiện tại hoạt động tốt. Hai phần này trình bày hai hàm UX rất quan trọng; một cái được làm tốt, một cái không phải vậy.

Clarins you might also like section on ecommerce site

Although it’s not explicit, the ‘You Might Also Like’ section shows products that past clients have bought. With more explicit copy such as ‘Our Customers Also Bought’, this section would give the customer social proof to prompt the click-through. It’s the second section that I like, however. Clarins are make-up experts, and here they are giving you their guidance to not only make a purchase, but on how to use their make-up. Extremely subtle up-selling, but a very nice touch.

Amazon, the undisputed champions of eCommerce UX design, approach this slightly differently. The first image is from the product page itself:

Mặc dù không rõ ràng, phần ‘Bạn cũng có thể thích’ hiển thị các sản phẩm mà khách hàng trước đây đã mua. Với bản sao rõ ràng hơn như ‘Khách hàng của chúng tôi cũng đã mua’, phần này sẽ cung cấp cho khách hàng bằng chứng xã hội để nhắc nhấp qua. Tuy nhiên, đó là phần thứ hai mà tôi thích. Clarins là các chuyên gia trang điểm, và ở đây họ đang hướng dẫn bạn không chỉ mua hàng mà còn hướng dẫn cách sử dụng trang điểm của họ. Cực kỳ tinh tế lên bán, nhưng một liên lạc rất tốt đẹp.

Amazon, nhà vô địch không thể tranh cãi về thiết kế UX thương mại điện tử, cách tiếp cận này hơi khác một chút. Hình ảnh đầu tiên là từ chính trang sản phẩm:

Amazon upselling on product page

Here we see the page after you have added a product to your basket:

Ở đây chúng tôi thấy trang sau khi bạn đã thêm sản phẩm vào giỏ của mình:

Amazon product page UX design examples

Never one for subtlety, Amazon is a machine designed to make money. They know it, and all their customers know it too. Here Amazon repeat that these items are frequently bought together to really nail the point home. The distinction between these sections is simply in the copy (which will affect different customers in different ways) and gives Amazon more space to cross sell.

Now, this won’t work for every eCommerce company, but bigger marketplaces can get away with a lot of things that boutique shops can’t. Think about the bloke shouting about his apples in Lewisham high street compared to the clerks in New York’s Macy’s. Is it right for your brand to cross sell so vocally? Or should you be more subtle about it?

Không bao giờ một cho tinh tế, Amazon là một máy được thiết kế để kiếm tiền. Họ biết điều đó, và tất cả khách hàng của họ cũng biết điều đó. Ở đây Amazon lặp lại rằng những mặt hàng này thường được mua lại với nhau để thực sự làm móng tay nhà điểm. Sự khác biệt giữa các phần này chỉ đơn giản là trong bản sao (sẽ ảnh hưởng đến các khách hàng khác nhau theo những cách khác nhau) và cung cấp cho Amazon nhiều không gian hơn để bán chéo.

Giờ đây, điều này sẽ không hiệu quả đối với mọi công ty Thương mại điện tử, nhưng thị trường lớn hơn có thể lấy đi nhiều thứ mà cửa hàng boutique không thể làm được. Hãy suy nghĩ về tiếng la hét về những quả táo của anh ta trên con phố cao Lewisham so với những nhân viên ở Macy của New York. Có phù hợp với thương hiệu của bạn để bán chéo để hát không? Hay bạn nên tinh tế hơn về nó?

A Note on Cross-selling and Upselling

Though these terms can be used pretty interchangeably, there’s a definite difference between the two.

Cross-selling is a strategy used to sell related or complementary products. For instance, when you buy a ‘Universal Remote’ on Amazon they will show you that customer also bought batteries.

Upselling is used to sell customers a more superior product, or add value onto the purchase order. Apple are a great example of this, giving their customer the option to add things like memory or better processors for a set price.

Lưu ý về bán chéo và bán hàng

Mặc dù các thuật ngữ này có thể được sử dụng khá hoán đổi cho nhau, nhưng có sự khác biệt rõ ràng giữa hai cụm từ này.

Bán kèm là một chiến lược được sử dụng để bán các sản phẩm liên quan hoặc bổ sung. Ví dụ: khi bạn mua ‘Universal Remote’ trên Amazon, họ sẽ cho bạn biết rằng khách hàng cũng đã mua pin.

Upselling được sử dụng để bán cho khách hàng một sản phẩm cao cấp hơn, hoặc thêm giá trị vào đơn đặt hàng. Apple là một ví dụ tuyệt vời về điều này, mang lại cho khách hàng của họ tùy chọn để thêm những thứ như bộ nhớ hoặc bộ vi xử lý tốt hơn cho một mức giá đã định.

Apple upselling example on website

Which technique you decide to use will depend upon your business model and how customers make purchases on your website. Most importantly, cross-selling and upselling should be used on the product pages in order to keep the user in shopping mode. Not on the checkout page when they’re in purchasing mode. Speaking of which…

Kỹ thuật nào bạn quyết định sử dụng sẽ tùy thuộc vào mô hình kinh doanh của bạn và cách khách hàng thực hiện mua hàng trên trang web của bạn. Quan trọng nhất, việc bán kèm và bán lại nên được sử dụng trên các trang sản phẩm để giữ cho người dùng ở chế độ mua sắm. Không có trên trang thanh toán khi họ đang ở chế độ mua hàng. Nói về mà…

eCommerce Checkout UX

You’ve managed to get your customer on your website, they’ve added products to their basket from your product pages, now they’re ready to make a purchase. Don’t mess it up now! Thankfully, with this eCommerce UX design guide, you’ll find it pretty hard to.

UX thanh toán thương mại điện tử

Bạn đã quản lý để đưa khách hàng của mình lên trang web của mình, họ đã thêm sản phẩm vào giỏ của họ từ các trang sản phẩm của bạn, giờ đây họ đã sẵn sàng mua hàng. Đừng làm hỏng nó ngay bây giờ! Rất may, với hướng dẫn thiết kế UX thương mại điện tử này, bạn sẽ thấy nó khá khó.

Don’t Make Them Register

Now this might seem slightly counterintuitive. As a marketer, you want those email addresses and contact details so that you can find out who you’re selling to (or, more likely, market to them later). But people don’t want to be marketed to, and more often than not, just want to make a purchase…

Đừng làm cho họ đăng ký

Bây giờ điều này có vẻ hơi phản trực giác. Là một nhà tiếp thị, bạn muốn có các địa chỉ email và chi tiết liên hệ đó để bạn có thể biết bạn đang bán cho ai (hoặc, nhiều khả năng, tiếp thị cho họ sau này). Nhưng mọi người không muốn được tiếp thị và thường xuyên hơn không, chỉ muốn mua hàng…

Think about those times you’ve been hungover, buying paracetamol. Your jittering hand just wants to drop a couple of quid and get the hell out of there. You don’t want to tell them your name and email address and create a password for the next time you might want to buy paracetamol, do you? Your customer knows that there’s no needfor them to register in order to buy what they want, so don’t make them do it.

Hãy suy nghĩ về những lần bạn bị đói, mua paracetamol. Bàn tay giơ tay của bạn chỉ muốn thả một vài quid và có được địa ngục ra khỏi đó. Bạn không muốn cho họ biết tên và địa chỉ email của bạn và tạo mật khẩu cho lần tiếp theo bạn có thể muốn mua paracetamol, phải không? Khách hàng của bạn biết rằng không cần họ đăng ký để mua những gì họ muốn, do đó, đừng bắt họ làm điều đó.

Boots checkout process for ux design

Unless you are selling paracetamol, in which case you will have to get your customers to register.

Trừ khi bạn đang bán paracetamol, trong trường hợp đó bạn sẽ phải yêu cầu khách hàng đăng ký.

Cut Those Forms Right Down

Get rid of all those ridiculous form fields. You don’t need their age, their gender, their title. Just take the information that is vitally important. You need a delivery address, their name and their card details.

To make filling in this information even easier, give the customer a checkbox to confirm that the billing address is the same as the delivery address. And whilst we’re at it, give them real-time, inline validation.

If they have entered some data wrong, highlight it immediately, don’t make the customer click confirm then go back through your form all over again.

Cắt các biểu mẫu đó xuống dưới

Loại bỏ tất cả những lĩnh vực hình thức vô lý đó. Bạn không cần tuổi tác, giới tính, danh hiệu của họ. Chỉ cần lấy thông tin đó là cực kỳ quan trọng. Bạn cần một địa chỉ giao hàng, tên của họ và chi tiết thẻ của họ.

Để điền thông tin này dễ dàng hơn, hãy cung cấp cho khách hàng một hộp kiểm để xác nhận rằng địa chỉ thanh toán giống với địa chỉ giao hàng. Và trong khi chúng tôi thực hiện, hãy cung cấp cho họ xác thực nội dòng, thời gian thực.

Nếu họ đã nhập sai một số dữ liệu, hãy đánh dấu nó ngay lập tức, không làm cho khách hàng nhấp xác nhận, sau đó quay trở lại thông qua biểu mẫu của bạn.

Inline validation for good eCommerce UX

Source

Put The Blinkers On

Customers are here to make a purchase now. So don’t give them any distractions that might prevent them from doing this. Remove navigation options except the vitally important ones – perhaps to change billing details, or simply to return home – so they don’t find themselves moving away from the eCommerce checkout process. If they are going home, give them the option to save their basket with their email, even if you are using persistent carts.

And draw their eyes down to the next step.

Đặt các Blinkers On

Khách hàng đang ở đây để mua hàng ngay bây giờ. Vì vậy, đừng cho họ bất kỳ sự xao lãng nào có thể ngăn cản họ làm điều này. Xóa các tùy chọn điều hướng ngoại trừ các tùy chọn cực kỳ quan trọng - có thể thay đổi chi tiết thanh toán hoặc chỉ cần trở về nhà - vì vậy họ không thấy mình đang di chuyển khỏi quy trình thanh toán Thương mại điện tử. Nếu họ về nhà, hãy cung cấp cho họ tùy chọn để lưu giỏ của họ bằng email của họ, ngay cả khi bạn đang sử dụng giỏ hàng liên tục.

Và vẽ mắt của họ xuống bước tiếp theo.

Harrods CTA on checkout page

Here we see Harrods have used their famed rich green to draw the customer down to their next stage in the purchase. We can excuse the use of a title field here to keep up appearances. It’s Harrods after all…

Ở đây chúng ta thấy Harrods đã sử dụng màu xanh lá cây giàu có nổi tiếng của họ để thu hút khách hàng xuống đến giai đoạn tiếp theo của họ trong mua hàng. Chúng ta có thể tha thứ cho việc sử dụng một trường tiêu đề ở đây để theo kịp sự xuất hiện. Đó là Harrods sau tất cả…

Shipping

Surprise shipping costs are one of the chief reasons customers will abandon carts and leave your checkout. That’s why we suggest you place your shipping options up front on the product page itself. However, here you need to present a precise calculation of the costs and an expected delivery date.

Be as exact as possible and explain what shipping options your clients have. For an example of how not to do this, see below.

Đang chuyển hàng

Chi phí vận chuyển bất ngờ là một trong những lý do chính khiến khách hàng từ bỏ giỏ hàng và để lại khoản thanh toán của bạn. Đó là lý do chúng tôi khuyên bạn nên đặt các tùy chọn giao hàng của mình lên phía trước trên chính trang sản phẩm. Tuy nhiên, ở đây bạn cần trình bày một phép tính chính xác về chi phí và ngày giao hàng dự kiến.

Hãy làm chính xác nhất có thể và giải thích các tùy chọn giao hàng mà khách hàng của bạn có. Để biết ví dụ về cách không thực hiện việc này, hãy xem bên dưới.

Delivery options for eCommerce

Surprisingly the option to collect from the warehouse is more expensive than the other (international) delivery methods combined. Though it doesn’t stop there. When you click on the express delivery box it simply updates your price.

There is no indication of what you are paying for, or what your expected delivery date is. Sure, it’s being taken care of by a third-party company, but your user needs to at least have an idea of what the added cost means.

Đáng ngạc nhiên là tùy chọn thu thập từ nhà kho đắt hơn các phương thức phân phối khác (quốc tế) kết hợp. Mặc dù nó không dừng lại ở đó. Khi bạn nhấp vào hộp chuyển phát nhanh, nó chỉ cập nhật giá của bạn.

Không có dấu hiệu của những gì bạn đang trả tiền, hoặc ngày giao hàng dự kiến ​​của bạn là gì. Chắc chắn, nó đang được một công ty bên thứ ba chăm sóc, nhưng người dùng của bạn cần ít nhất có ý tưởng về ý nghĩa của chi phí bổ sung.

An additional admin charge of £19.99 is also completely ridiculous and will make customers question your service. I mean, why would it cost twenty pounds for you to not collect your item? And is this on top of the cost of the item itself?

Một khoản phí quản trị bổ sung £ 19,99 cũng hoàn toàn vô lý và sẽ làm cho khách hàng đặt câu hỏi về dịch vụ của bạn. Tôi có nghĩa là, tại sao nó sẽ chi phí hai mươi bảng Anh cho bạn không thu thập hàng của bạn? Và đây có phải là chi phí cao nhất của bản thân vật phẩm không?

A good shipping section won’t lead your customer to ask any questions, it will lead them to choose the option right for them and move onto the purchase itself.

Một phần giao hàng tốt sẽ không dẫn khách hàng của bạn hỏi bất kỳ câu hỏi nào, điều này sẽ dẫn họ chọn tùy chọn phù hợp với họ và chuyển sang mua hàng.

Put Credit Card Details Last

Đặt chi tiết thẻ tín dụng sau cùng

Entering your details is a fiddly process. You need to have your card out, you need to flip it over and you need to check that everything is entered exactly right or you’re going to have a bad time. That’s why we say put payment details last!

Nhập chi tiết của bạn là một quá trình khó sử dụng. Bạn cần phải có thẻ của bạn ra, bạn cần phải lật nó ra và bạn cần phải kiểm tra xem tất cả mọi thứ được nhập chính xác hoặc bạn sẽ có một thời gian xấu. Đó là lý do tại sao chúng tôi nói đặt chi tiết thanh toán cuối cùng!

Get all the easy stuff out of the way first. Then when they come to the ‘complicated’ stuff, they’ve already made a commitment that they have to see through. It’s a simple psychological trick, but it works wonders.

Nhận tất cả các công cụ dễ dàng ra khỏi con đường đầu tiên. Sau đó, khi họ đến với nội dung 'phức tạp', họ đã thực hiện một cam kết mà họ phải xem qua. Đó là một mẹo tâm lý đơn giản, nhưng nó hoạt động kỳ diệu.

Make Them Trust You

Làm cho họ tin tưởng bạn

You might have one of the most reputable businesses in the world, but when it comes to entering their card details online customers are rightfully cautious. Reassure them that their transaction will be handled safely. Secure the deal with https (people will be looking for it in their URL field), and use images of security badges as a visual aid. Add a link or expandable areas for your privacy policy. Throw everything you can here, because the customer needs to know that you can be trusted with their bank details. This is also increasingly becoming an SEO ranking factor. So just do it!

Bạn có thể có một trong những doanh nghiệp có uy tín nhất trên thế giới, nhưng khi nói đến việc nhập chi tiết thẻ khách hàng trực tuyến của họ là đúng thận trọng. Đảm bảo với họ rằng giao dịch của họ sẽ được xử lý an toàn. Bảo đảm thỏa thuận với https (mọi người sẽ tìm kiếm nó trong trường URL của họ) và sử dụng hình ảnh huy hiệu bảo mật làm hình ảnh. Thêm liên kết hoặc khu vực có thể mở rộng cho chính sách bảo mật của bạn. Ném tất cả mọi thứ bạn có thể ở đây, bởi vì khách hàng cần biết rằng bạn có thể được tin cậy với chi tiết ngân hàng của họ. Điều này cũng ngày càng trở thành một yếu tố xếp hạng SEO. Vì vậy, chỉ cần làm điều đó!

You really don’t want to let yourself down at this stage by having a dodgy looking couple of fields on a blank page.

Bạn thực sự không muốn để bản thân mình xuống ở giai đoạn này bằng cách có một vài lĩnh vực tinh ranh tìm kiếm trên một trang trống.

Search, Segmentation & Navigation

You need to help your customers find what they want on your website. And you need to make it as simple as possible.

Tìm kiếm, phân đoạn và điều hướng

Bạn cần phải giúp khách hàng của bạn tìm thấy những gì họ muốn trên trang web của bạn. Và bạn cần phải làm cho nó đơn giản nhất có thể.

Shop Search

Sometimes users don’t want to bother looking through your site themselves, and want you to do all the hard work. These guys and girls tend to be the most impatient, so you best cater for them! Make sure that the search bar is omnipresent no matter where they are on the webpage, and eye grabbing too. Don’t let them waste precious nanoseconds looking for it!

Tìm kiếm cửa hàng

Đôi khi người dùng không muốn bận tâm tìm kiếm thông qua trang web của bạn và muốn bạn làm tất cả công việc khó khăn. Những chàng trai và cô gái này có xu hướng thiếu kiên nhẫn nhất, vì vậy bạn nên phục vụ tốt nhất cho họ! Hãy chắc chắn rằng thanh tìm kiếm có mặt khắp nơi bất kể họ đang ở đâu trên trang web, và mắt cũng đang nắm lấy. Đừng để họ lãng phí những giây nano quý giá tìm kiếm nó!

Specialised search bar on bike website

With a slight twist on this, the bike manufacturers Specialized have a really nice function on their website. Their search bar disappears when you scroll down the page, making way for the products to take centre stage whist they client is browsing. Then, when they scroll back up – an indication that they haven’t found what they’re looking for on that webpage – the search bar and navigation options reappear.

Smart. Real smart.

Với một chút xoắn về điều này, các nhà sản xuất xe đạp chuyên ngành có một chức năng thực sự tốt đẹp trên trang web của họ. Thanh tìm kiếm của họ biến mất khi bạn cuộn xuống trang, nhường chỗ cho các sản phẩm để lấy giai đoạn trung tâm mà khách hàng của họ đang duyệt. Sau đó, khi họ cuộn lên trở lại - một dấu hiệu cho biết họ không tìm thấy những gì họ đang tìm kiếm trên trang web đó - thanh tìm kiếm và tùy chọn điều hướng xuất hiện lại.

Thông minh. Thực sự thông minh.

Segmentation & Categories

Phân đoạn & Danh mục

Don’t over-categorise your products! A 2016 study from Baymard found that one of the most severe usability issues with eCommerce UX design is over-categorisation. This is when products are set as, “mutually-exclusive category scopes when instead they should have been implemented as combineable filters.” The results of which are to:

Đừng phân loại quá mức sản phẩm của bạn! Một nghiên cứu năm 2016 từ Baymard phát hiện ra rằng một trong những vấn đề khả năng sử dụng nghiêm trọng nhất với thiết kế UX thương mại điện tử là phân loại quá mức. Đây là khi sản phẩm được đặt là “phạm vi danh mục loại trừ lẫn nhau khi thay vào đó chúng phải được triển khai dưới dạng bộ lọc kết hợp.” Kết quả là:

  • Silo users into extremely narrow categories.
  • Cause users to overlook an entire selection of products they may be interested in.
  • Prevent users from combining product types to suit their preferences.
  • Silo người dùng vào các loại cực kỳ hẹp.
  • Nguyên nhân người dùng bỏ qua toàn bộ lựa chọn sản phẩm mà họ có thể quan tâm.
  • Ngăn người dùng kết hợp các loại sản phẩm cho phù hợp với sở thích của họ.

Now, on the surface this doesn’t seem like such a big issue. And customers who come to your website won’t realise that you’ve over-categorised your products. What they will find is simply that you don’t have what they’re looking for and leave your website. Which is the worst.

Bây giờ, trên bề mặt, điều này dường như không phải là một vấn đề lớn như vậy. Và những khách hàng truy cập vào trang web của bạn sẽ không nhận ra rằng bạn đã phân loại quá mức sản phẩm của mình. Những gì họ sẽ thấy chỉ đơn giản là bạn không có những gì họ đang tìm kiếm và rời khỏi trang web của bạn. Đó là điều tồi tệ nhất.

So how does it happen?

Vậy nó xảy ra như thế nào?

A category is a mutually exclusive set of products, different from all the others you have on your website, whereas filters are used to describe product types. Over-categorisation happens when you wrongly mark a product’s attributes as a separate subcategory rather than as a filterable subsection.

Danh mục là tập hợp các sản phẩm loại trừ lẫn nhau, khác với tất cả những sản phẩm khác bạn có trên trang web của mình, trong khi các bộ lọc được sử dụng để mô tả các loại sản phẩm. Việc phân loại quá mức xảy ra khi bạn đánh dấu nhầm thuộc tính của sản phẩm dưới dạng danh mục phụ riêng biệt thay vì là một phần phụ có thể lọc.

As filters can be combined, this gives the customer greater power to customise a product list that suits their purchase requirements. However, by misusing categories, you are limiting the filters that are available to the customer in the first place.

Vì bộ lọc có thể được kết hợp, điều này mang lại cho khách hàng sức mạnh lớn hơn để tùy chỉnh danh sách sản phẩm phù hợp với yêu cầu mua hàng của họ. Tuy nhiên, bằng cách lạm dụng các danh mục, bạn đang giới hạn các bộ lọc có sẵn cho khách hàng ở nơi đầu tiên.

When Do I Categorise and When Do I Filter?

Khi nào tôi nên phân loại và khi nào tôi lọc?

Thankfully there is a fairly simple rule that will help you understand when you categorise and when you use filters.

Rất may, có một quy tắc khá đơn giản sẽ giúp bạn hiểu khi bạn phân loại và khi bạn sử dụng bộ lọc.

“If the product attributes are the same across the different product types in question, then the set of product types should (typically) be implemented as filters, because there are no scoping benefits to implementing them as categories. On the other hand, if most of the product types have unique sets of product attributes, then it is worth considering if the product types should instead be implemented as a category scope to segregate the unique filtering options within them.”

“Nếu các thuộc tính sản phẩm giống nhau trên các loại sản phẩm khác nhau được đề cập, thì tập hợp các loại sản phẩm nên (thường) được triển khai dưới dạng bộ lọc, vì không có lợi ích phạm vi để triển khai chúng dưới dạng danh mục. Mặt khác, nếu hầu hết các loại sản phẩm đều có các thuộc tính sản phẩm duy nhất, thì đáng xem xét liệu các loại sản phẩm có nên được triển khai dưới dạng phạm vi danh mục để tách riêng các tùy chọn lọc duy nhất trong chúng hay không. ”

Simply put, if your products have unique attributes, categorise them. If not, use filters. If this is all a little too confusing, make sure you have an ‘All products’ section. This shouldn’t contain every product on your store, but should have all of a product type. Let’s take a look at the PC World website.

Đơn giản chỉ cần đặt, nếu sản phẩm của bạn có thuộc tính duy nhất, phân loại chúng. Nếu không, hãy sử dụng bộ lọc. Nếu điều này hơi quá khó hiểu, hãy đảm bảo bạn có phần ‘Tất cả sản phẩm’. Điều này không nên chứa mọi sản phẩm trên cửa hàng của bạn, nhưng phải có tất cả loại sản phẩm. Hãy xem trang web PC World.

Category section from PC World website

Each category and subcategory here has its own unique set of attributes which don’t have much cross over. Also note the ‘All PCs’ link too.

Mỗi danh mục và danh mục phụ ở đây có tập hợp các thuộc tính duy nhất của riêng chúng mà không có nhiều chéo. Cũng lưu ý liên kết ‘Tất cả các máy tính’.

PC world category filters on product page

Once you are on the category page, you then have 22 filter options to choose from, each with their own sub-filters. Of course, not every eCommerce website will require this level of depth, but goods like PCs, which come with so many options and customer dependencies, massively benefit from such filtration.

Khi bạn đang ở trên trang danh mục, bạn có 22 tùy chọn bộ lọc để chọn, mỗi tùy chọn có bộ lọc phụ riêng của họ. Tất nhiên, không phải mọi trang web thương mại điện tử đều yêu cầu mức độ sâu này, nhưng hàng hóa như máy tính, có nhiều tùy chọn và phụ thuộc của khách hàng, được hưởng lợi từ việc lọc như vậy.

SALES!

BÁN HÀNG!

This is rule 1 of retailing. If you’ve got a sale on, make sure your customers know about it. Even if the price differences aren’t that great, the psychological impact of saving some money makes the customer think that they have the upper hand.

Đây là quy tắc 1 của bán lẻ. Nếu bạn đã bán hàng, hãy đảm bảo khách hàng của bạn biết về điều đó. Ngay cả khi chênh lệch giá không tuyệt vời như vậy, tác động tâm lý của việc tiết kiệm một số tiền khiến cho khách hàng nghĩ rằng họ có ưu thế.

UX Design for Sales

The eCommerce UX Design Checklist

Danh sách kiểm tra thiết kế UX thương mại điện tử

In short, here are our eCommerce UX design recommendations:

Tóm lại, đây là các khuyến nghị thiết kế UX thương mại điện tử của chúng tôi:
  • Evaluate your business and your company first before you begin any design work. Understand how you operate and how your eCommerce store can integrate with your current activities.
  • Investigate who your competition is and understand where they are winning and where you are losing. Focusing on your weaknesses will yield the best results.
  • Đánh giá doanh nghiệp của bạn và công ty bạn trước khi bạn bắt đầu bất kỳ công việc thiết kế nào. Hiểu cách bạn hoạt động và cách cửa hàng Thương mại điện tử của bạn có thể tích hợp với các hoạt động hiện tại của bạn.
  • Điều tra đối thủ cạnh tranh của bạn là ai và hiểu nơi họ chiến thắng và nơi bạn đang thua. Tập trung vào điểm yếu của bạn sẽ mang lại kết quả tốt nhất.
  • Develop client personas in order to best understand what your customers are looking for. This will inform how you design your store.
  • Your homepage needs to be simple and straight to the point. Include your value proposition and easy to use navigation tools.
  • Where relevant use qualifiers to support your business.
  • Give your users links to additional information that will help them down the buying cycle. Don’t distract them with noise.
  • Use your footer to give all relevant links that the user might need.
  • Phát triển các khách hàng để hiểu rõ nhất những gì khách hàng của bạn đang tìm kiếm. Điều này sẽ thông báo cách bạn thiết kế cửa hàng của mình.
  • Trang chủ của bạn cần đơn giản và thẳng thắn. Bao gồm đề xuất giá trị của bạn và dễ sử dụng các công cụ điều hướng.
  • Nơi các vòng loại sử dụng có liên quan để hỗ trợ doanh nghiệp của bạn.
  • Cung cấp cho người dùng của bạn liên kết đến thông tin bổ sung sẽ giúp họ giảm chu kỳ mua. Đừng làm họ xao nhãng với tiếng ồn.
  • Sử dụng chân trang của bạn để cung cấp cho tất cả các liên kết có liên quan mà người dùng có thể cần.
  • Contact options need to be prominently displayed, not only so customers can contact you, but so that they know they can contact you if necessary.
  • For your product pages, make sure you use striking but life-like imagery.
  • Give all the product specs, colour options and delivery and returns options on this page.
  • Tùy chọn liên hệ cần được hiển thị nổi bật, không chỉ để khách hàng có thể liên lạc với bạn, mà để họ biết họ có thể liên lạc với bạn nếu cần.
  • Đối với các trang sản phẩm của bạn, hãy đảm bảo bạn sử dụng hình ảnh nổi bật nhưng giống như cuộc sống.
  • Cung cấp tất cả các thông số kỹ thuật sản phẩm, tùy chọn màu sắc và tùy chọn phân phối và trả lại trên trang này.
  • Use upselling and cross-selling (depending on how your business operates) in order to boost average order value.
  • Remove any extraneous steps or fields to your eCommerce checkout process. Make sure that the user can’t be distracted from what they’re doing here.
  • Sử dụng bán thêm và bán kèm (tùy thuộc vào cách doanh nghiệp của bạn hoạt động) để tăng giá trị đơn đặt hàng trung bình.
  • Xóa mọi bước hoặc trường không liên quan đến quy trình thanh toán Thương mại điện tử của bạn. Đảm bảo rằng người dùng không thể bị phân tâm từ những gì họ đang làm ở đây.
  • Don’t announce a sudden delivery charge!
  • Make sure the search bar is omnipresent on your website.
  • Don’t over categorise your products. Use filters instead!
  • If you’re holding a sale, make sure that it’s prominently located on your website.
  • Không thông báo phí giao hàng đột ngột!
  • Đảm bảo thanh tìm kiếm có mặt khắp nơi trên trang web của bạn.
  • Đừng phân loại quá nhiều sản phẩm của bạn. Sử dụng bộ lọc thay thế!
  • Nếu bạn đang bán hàng, hãy đảm bảo rằng nó được đặt ở vị trí nổi bật trên trang web của bạn.

As we strive to create the ultimate guide to UX design for eCommerce, we will be coming back to this page to update regularly. Subscribe to our mailing list if you want to be kept up to date!

Khi chúng tôi cố gắng tạo ra hướng dẫn cuối cùng cho thiết kế UX cho Thương mại điện tử, chúng tôi sẽ quay lại trang này để cập nhật thường xuyên. Theo dõi danh sách gửi thư của chúng tôi nếu bạn muốn được cập nhật!

Please Share This With

Dictionaries : 1080 words

Click vào từ bạn chưa biết để dịch

  • Click đoạn văn để hiển thị từ điển
  • Hiển thị toàn bộ từ điển của bài viết
  • Ẩn các từ quen thuộc

ĐĂNG KÝ ĐỂ TIẾP THU KIẾN THỨC HIỆU QUẢ HƠN

ABOUT SPRINGMEBLOG

Springmeblog.com giới thiệu các bài viết về chủ đề KINH DOANH, PHÁT TRIỂN SỰ NGHIỆP, QUẢN LÝ CON TRẺ.

Các bài viết của Springmeblog được chọn lọc kỹ từ các bài viết English của các chuyên gia giỏi trên thế giới để mang lại nguồn kiến thức HỮU ÍCH nhất và THIẾT THỰC nhất có thể áp dụng ngay vào công việc và cuộc sống.

Springmeblog.com được thiết kế nhằm mang đến sự tiếp thu kiến thức một cách HIỆU QUẢ nhất. Mỗi bài viết English được giới thiệu có công cụ TỪ ĐIỂN TÍCH HỢP hỗ trợ đọc hiểu. Cùng với các công cụ LƯU BÀI VIẾT, TẠO GHI CHÚ cho mỗi bài viết, springmeblog hỗ trợ cho việc HỌC TẬP SUỐT ĐỜI qua tiêu chí ĐỌC ĐỂ LÀM và HỌC ĐỂ LÀM ĐƯỢC.

© 2018 SPRINGMEWEB. DESIGIN BY SPRINGMEWEB