It’s obvious that ecommerce businesses need to deliver help pages to customers in the most effective way possible.<\/p>\n
What steps can we take to simplify self-service so that it keeps customers satisfied and shortens the support line for our customer service teams? By researching what makes for truly excellent help pages and creating templates, themes, and layouts to be frictionless for the customer to browse.<\/p>\n
To do that, we should incorporate these seven design standards into our help pages.<\/p>\n
What is a help page design standard?<\/h2>\n
If you\u2019re not familiar with what a design standard is, they\u2019re simply a set of rules that web designers follow to align with visitors\u2019 expectations.\u00a0Design standards<\/a>\u00a0are guidelines for clarity and usability.<\/p>\n To give a clearer picture of what goes into a great example of a help page, we looked across the top 50 ecommerce retailers to find out how standard these standards really are. Using\u00a0guidelines<\/a>\u00a0from a Nielsen Group article, we use the following thresholds:<\/p>\n Note: The sites included in this research are the top retail ecommerce sites in the\u00a0\u201cShopping\u201d category on Alexa<\/a>.<\/em><\/p>\n Only 38% of top retail ecommerce sites have a well placed search bar.<\/p>\n 70% of retail businesses have easily accessible links to their frequent questions or FAQs.<\/p>\n 96% of retail businesses have short help page titles \u2013 making short tiles with main keywords a design standard.<\/p>\n 80% of retail businesses are giving clear categories and topics for their readers \u2013 this is just on the level of a standard.<\/p>\n 90% of retail businesses make it easy to request further help. We considered a \u201ccontact us\u201d button, an email address, or an icon for a live chat or messenger app as a way to request help.<\/p>\n Only 66% of retail ecommerce help pages are using white space in their formatting to help the reader\u2019s eye. White space among retail ecommerce stores is a convention and not a standard.<\/p>\n Only 24% of help pages offer navigation options that aren\u2019t too overwhelming for customers.<\/p>\n Not all design standards are standard. Three out of seven retail ecommerce help pages met criteria for design standards. Of the four remaining design standards, these fell into two conventions and two confusions.<\/p>\n Let\u2019s look at why these design standards matter and some examples of websites that use them well, and not so well.<\/p>\n Having a search bar is a design best practice, it helps your customers easily navigate to relevant help pages.<\/p>\n A help page without a search bar means your customer has to click and navigate their way around, read plenty of lists and hopefully stumble across the right page. This makes for a really high effort and frustrating customer experience.<\/p>\n Good example:<\/strong>\u00a0This search bar catches your attention as soon as you hit their help page.<\/p>\n Bad example:<\/strong>\u00a0This help page forces customers to click around to get their answer.<\/p>\n Having\u00a0a great FAQ page<\/a>\u00a0can reduce the amount of inbound support request you receive.<\/p>\n Deflecting requests for help away from your support team is the goal of all help pages.<\/p>\n Your support teams are already understaffed and have a big support queue to deal with. Having a clear section to give customers quick help is essential, especially for delivery related questions (last mile delivery<\/a>\u00a0is tricky!) If you don\u2019t, it results in frustrated customers and angry emails for your support team to handle.<\/p>\n Good example:<\/strong>\u00a0This page caters to common problems, and directs customers straight to the FAQ section.<\/p>\n Bad example:\u00a0<\/strong>By other design standards this help page is ideal, but it needs a devoted section of 5-6 FAQs if they want to help customers faster.<\/p>\n Similar to how people Google search in \u201ccaveman English\u201d, expect help page browsing to be the same.<\/p>\n According to CoSchedule, a tool that helps you write better headlines, when skimming content most readers tend to read the first and last three words of a headline.<\/p>\n If you\u2019re looking at giving customers information on your ecommerce store\u2019s return shipping costs, a headline like \u201cReturn Shipping Costs: What Charges to Expect\u201d is going to work a lot better for content scanning than \u201cWhat Is the Price of Return Shipping to Company A?\u201d<\/p>\n Good example:<\/strong>\u00a0Address the problem in the least amount of words to help customers scan titles quickly.<\/p>\n Bad example:<\/strong>\u00a0Not offering help pages is bad enough, but making the focal point of your knowledge base to increase revenue is even worse.<\/p>\n Icons or at least organized text is a great way to communicate and display the categories or topics where your customer might need help. Customers don\u2019t want to spend a lot of time trying to help themselves. They want to get in, grab their answer and go.<\/p>\n Good example:<\/strong>\u00a0These clear categories give customers the best chance of self-service success.<\/p>\n Bad example:<\/strong>\u00a0A list is better than nothing, but putting that information in a table would create effortless browsing.<\/p>\n There may come a time when a customer\u2019s need is too complicated for one help page. This is why having a phone number, email address, contact button or live chat option is essential to helping customers get their solution with the least amount of effort.<\/p>\n Offer the channel where you can provide the best help as quick as possible. If you don\u2019t man the phone, don\u2019t list a phone number. List an email address instead.<\/p>\n Good example:<\/strong>\u00a0Sets clear expectations of availability and offer multiple channels where the customer can achieve help.<\/p>\n Bad example:<\/strong>\u00a0Typically you\u2019d expect an email address or contact form right at the bottom of the page, but neither of those are listed. There\u2019s a telephone number, but what\u2019s it for \u2013 sales or customer service? Let the customer know!<\/p>\n White space is an essential part of readability on your help pages. If they\u2019re not structured clearly and readers are not able to scan pages easily, expect a lot of support requests because they just won\u2019t be bothered to look over a poorly designed page.<\/p>\n Along with headings, subheadings and bullet points, images and videos add a better dynamic to your help pages but also help break up large pieces of text.<\/p>\n Good example:<\/strong>\u00a0Personal introduction offering many ways to self-serve that the eye can easily navigate.<\/p>\n Bad example:<\/strong>\u00a0This help page is too crowded. It takes a lot of work to find the option you\u2019re looking for.<\/p>\n Your customers are there to help themselves not to browse more products. Be empathetic to your customer\u2019s needs and\u00a0keep your navigation relevant<\/a>\u00a0to what they might struggle with, instead of trying to upsell them.<\/p>\n Good example:<\/strong>\u00a0A great example of helping a customer get the kind of support they need right off the bat.<\/p>\n Bad example:<\/strong>\u00a0Will the navigation along the top help you get specialized help with a watch or will you be looking at the online catalog for new watches? Keep navigation relevant to getting answers more easily and more quickly.<\/p>\n There\u2019s a lot to analyze in design standards. While compiling this list we had to be careful that we weren\u2019t crossing over into what goes into\u00a0web design standards of a homepage.<\/a><\/p>\n What we did was use the research at the top of this article, empathize with the customer and put ourselves in their shoes. Then we simply asked ourselves, what would a help page look like if it provide a frictionless customer experience?<\/p>\n We also looked outside of the area of retail and at bigger businesses that showcase excellent\u00a0design examples of knowledge bases<\/a>\u00a0and help pages.<\/p>\n Look how easy both of these help pages from Netflix and Lynda make it easy for customers to get in and get out with an answer, just like the customer wants:<\/p>\n Retail ecommerce businesses might have specific design requirements and needs which draw them away from adhering to design standards. Some of those reasons could be due to brand standards, coding standards, and accessibility standards.<\/p>\n But with the risk of breaking web conventions, you also break the user experience of your website.<\/p>\n\n
1. Well-placed search bar?<\/h3>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-1.png\" "\\"\\"")
<\/p>\n2. One-click links to frequent questions?<\/h3>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-2.png\" "\\"\\"")
<\/p>\n3. Short titles with main keywords only?<\/h3>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-3.png\" "\\"\\"")
<\/p>\n4. Clear categories or topics?<\/h3>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-4.png\" "\\"\\"")
<\/p>\n5. Can a customer easily request further help?<\/h3>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-5.png\" "\\"\\"")
<\/p>\n6. Good use of white space?<\/h3>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-6.png\" "\\"\\"")
<\/p>\n7. Minimal navigation options?<\/h3>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-7.png\" "\\"\\"")
<\/p>\nLet\u2019s review our design standards\u2026<\/h2>\n
1. A well-placed search box or bar<\/h3>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-8.png\" "\\"\\"")
<\/p>\n![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-9.png\" "\\"\\"")
<\/p>\n2. One click-links to FAQ<\/h3>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-10.jpg\" "\\"\\"")
<\/p>\n![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-11.png\" "\\"\\"")
<\/p>\n3. Short titles with main keywords only<\/h3>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-12.png\" "\\"\\"")
<\/p>\n![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-13.jpg\" "\\"\\"")
<\/p>\n4. Clear categories or topics<\/h3>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-14.png\" "\\"\\"")
<\/p>\n![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-15.png\" "\\"\\"")
<\/p>\n5. Can a customer easily request further help?<\/h3>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-16.jpg\" "\\"\\"")
<\/p>\n![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-17.png\" "\\"\\"")
<\/p>\n6. Use of white space<\/h3>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-18.png\" "\\"\\"")
<\/p>\n![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-19.jpg\" "\\"\\"")
<\/p>\n7. Minimal navigation options<\/h3>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-20.png\" "\\"\\"")
<\/p>\n![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-21.png\" "\\"\\"")
<\/p>\nHow did we get a list of seven design standards?<\/h2>\n
![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-22.png\" "\\"\\"")
<\/p>\n![\"\"](\"http:\/\/bluecoral.vn\/wp-content\/uploads\/2022\/08\/design-standards-ecommerce-23.png\" "\\"\\"")
<\/p>\nWhy might a site not conform to design standards?<\/h2>\n