Usability Checklist: 200 Must-know Tips

image description

Usability Checklist: 200 Must-know Tips

The presence of large amounts of content in a network made of a user is very demanding to the quality of content and its flow. This is especially true of commercial sites. The potential buyer will not look into your great copy if he or she is busy with find turning off the annoying background music on your site, or trying to read crappy font. Users will not spend the time to understand where you have contacts and how to order. The customer simply goes to the next tab, where the competitor's site easier and more accessible. Therefore, the usability of the resource is the most important factor. It directly affects your sales and feedback.

We collected a full checklist with 200 tips on the usability of the site. Just take, use, and share.

Basics of usability

1. Page load. The website loaded quickly (1-2 seconds). If your page is loading for more than 3 seconds, 40% of visitors are likely to leave, without waiting.

2. The ability to adapt to the targeted location. The site is optimized for performance in the region for which it is intended: the information contained in the appropriate language (choice of language), data is presented with familiar metric system

3. Intuitive language switcher. If the site has a language selection, the toggle just reloads the page where the user is now, not throws him to the main page of the site.

4. The presence of adaptive layout. The website needs to be optimized:

  • for correct display on mobile devices;
  • for correct display in different browsers, on devices with different screen resolution.

5. Think about devices. What is convenient on mobile devices is not always justified for the desktop version – for example, a hidden main menu that unfolds on the button in the upper left corner. On the desktop, a user should make an extra click.

6. Take the screen resolution into account. On the website at a resolution of 1024×768 in all standard browsers horizontal scrolling line doesn't appear.

7. Quick access to CTA buttons. The opportunity to buy a product, book a service or request a call back is on an easy-to-reach section on every page of a website.

8. The presence of intuitive icons. Wherever appropriate and feasible, paragraphs text combined with icons.

9. The uniformity of the interface. Site structure – header, footer, main menu, etc. – same on all pages, except maybe the shopping cart page and checkout.

10. Clarity. Whatever page a user opens, he or she should be able to understand the name of the brand and the subject of the page in 3 seconds. To make it easier, put the slogan and the images in the header, page title, etc.

11. Predictable location of key elements. All of the standard elements, the visitor finds in the usual places ("don't make me think” approach):

  • company logo in the upper left
  • contacts at the top right section of the page
  • the search bar at the top left or top center of the page.

12. No more than 3-5 options of contacts. Too many choices could lead to the hesitation whether to make the choice at all.

13. Easy interaction with the logo of the website. The logo is clickable and leads to the main page, and most importantly – not reloads the page.

14. Sitemap. On the website, there is a link to a sitemap, and it is easy-to-find (the generally accepted position is in the footer).

15. Unique favicon. The site has a favicon, preferably corresponding to your logo. With its memorable favicon, a user can easily find the tab with your website among the many open tabs of your browser.

16. Noticeable CTA. All calls to action on the page are visible and obvious: the buttons are large and clearly signed, links are highlighted.

17. Main CTA is the most visible one. The main call to action on every page (click "Buy" button to go to the next stage of checkout, etc.) is always highlighted in brighter, more noticeable than others and is the most user-friendly way.

18. Clear terminology. Sometimes copywriters and business owners want to be creative and name menu buttons originally. Better avoid this approach and use understandable names: Main page, About Us, Contacts etc.

19. The opportunity to see the faces of the company. On the website, there is a page "About us" with detailed information about you, preferably with a photo of the office inside and out, with photos of staff working with clients with photos of the production/working process.

20. Elaborate the functionality of the 404 page. The site has an informative page with a 404 error. It tells the visitor what happened, and includes links to the main sections of the site, on the search bar and contacts: phone, messengers, and email.

21. "The principle of non-violence".

  • No media content (music or video) that runs without the user's knowledge. In the vast majority of cases, it irritates the visitor and forces him to immediately leave the site. If you for some reason use this, make sure that the stop button playback was in a prominent place.
  • If you use pop-ups (pop-up), they have a noticeable button for closure (just closing and not navigate to another page). The visitor will not waste time in finding her is exasperated by the fact of appearance of Windows, it just will close the tab your site.

22. Instant scrolling. No long pages that take up several screens, provided by a floating back to top button "In the beginning", which throws the user to the first screen.

23. The minimal difficulty for the user. The visitor is invited to perform only do the necessary actions:

  • what can be done automatically, shouldn’t be done manually (for example, substitutes the city of delivery, based on user location);

  • the action queries of the visitor and choices change dynamically depending on the parameters of the product, the visitor data, etc. for Example, if the dress is only available in one color, the user is not forced to choose the color. If he lives in Arizona, he was not offered the option of delivery within Washington.

Design and site elements - usability rules

24. Moderation. Bright colors, a big colored text, animation – are used minimally or not used.
25. The peculiarities of color perception. The color of the buttons, fill the fields are given their default perception. For example, the red color filing checkout fields unconsciously perceived by the user as a color of an error. The gray button is likely to be perceived as inactive.

26. The lack of extra animations. Flash should be used minimally - it might not work properly with any browser. 

27. The lack of clutter items. The elements and their blocks interleaved with blank space; no sense of clutter, diversity in the pages.

28. The optimal size of clickable elements. All buttons, links, banners, sufficiently long and large so you don't have to "aim" to click.

29. Adjust the cursor under the "clickable/reclinable". When you hover over the clickable elements, the cursor icon arrow icon changes to a "hand". When you hover over reclinable elements, the cursor does not change.

30. Deactivating the unnecessary elements. Links and buttons, which for some reason is now not available to the user become inactive. Don’t pile up trashy links on your page.

31. Explanations for deactivated elements. When you hover over an inactive button or link, you receive a brief explanation of why the button/link is inactive.

32. Adjusting for patterns of scanning. The most important content is placed on the left, as our eyes drift from left to right.

33. Compliance F-pattern scanning. More advanced level – the location of the most important elements of the site (TSS, search, contacts, sub-headings articles) on the page according to the scheme in the form of the letter F. The most prominent place is the upper left corner of the page.

34. Strategically placed blocks. One block should lead to another, making a user wanting to scroll the page.

35. Avoid unnecessary stripes, banners, or any elements that could block user’s view of the page.

Buttons and usability factors

36. "Honest" button. The text on the button should clearly describe an action linked to that button, not lead to an unconnected page or window.

37. Convenience a click of the button.Clickable the button itself, not the title. You can also make clickable a small space close to her (but not in the case, if there is another button).

38. Clear CTA. The text on the button tells about the action done when clicking. Optimum is a verb in the infinitive form (to buy, order, download, further processing). It is precise, informative and not open to interpretation. Bad – buttons with the names:

  • "Continue" (What is meant by "Continue"? What will happen if user risks to push that damn button).
  • "Back" (Where? The user may not remember what was on the previous page).
  • "Next," "Finish"

39. Watch the distance between buttons. Button, cancel actions, or cleansing the data filled in, are located at a sufficient distance from the submit buttons, or confirmation that is different from them. Just imagine the amount of frustration if you wanted to click “Subscribe” but because of poor user interface mistakenly clicked cancel. Pff, everything is gone.

Links

40. "Honest" links. The standard functionality of a conventional link – go to another page or open another page in a new tab - no surprises.

41. Use the language of color. As much as you want to be creative, there are some standards to follow. Links should be colored blue, buttons - have traditional shape and pattern.

42. Notable differences of "special" references. If the link involves the unfolding of latent content, and not the transition to another page/reloading the existing one, it is framed with a dotted underline, optionally, next, you can add a triangle icon. Download link file also differs from a normal link – it has the word "download"; indicates the size of the downloaded file and its format.

43. When you make anchors, meet users’ expectations. In the link text clearly indicates the object to which the link leads(name of the article, product). Everything is transparent and clear.

44. The convenience of clicking on the link. The link text is long enough that the visitor could easily click on it (for example, a link with the anchor "here" is not too comfortable).

Navigation and search

45. Search on the website. Search is truly helpful but only if you set it right. Don’t expect a searching bar to solve all navigation problems. Users often prefer to search for the product using the partitions and filters - so make sure the procedure is flexible.

46. Clickable "breadcrumbs". Thanks to them, the visitor understands, in what subsection of the site it is in and can in one click go to higher sections.

47. Clear and relevant H1. All pages have a header, which is fully consistent with its content. This refers to the H1 heading and not a title, as with many open tabs in the browser title is just not visible.

48. Return button. On all pages of the site, there is a "Back" button on your browser. No matter, where the user goes, this button should be his or her compass, showing the road back.

49. The recently-watched category. Available on any page of the site so that the user can easily find the previously viewed product.

50. A sophisticated network of internal links. All pages on the website have links to other pages – none of them should be "dead-end".

Main menu - how to make it right

51. Through the main menu of the website. Sections with contact, delivery, and payment information should be located on the main menu panel. Wherever the user goes, it’s essential to have a short path to such information.

52. Accessibility of the main menu. The main menu is in the header or right under it, and also duplicated in the footer.

53. Standardization. Menu items are named as usual for the visitor to read (again, the principle of "don't make me think") – "Contacts", "About us", "shipping", etc., without much creativity.

54. Make it clear what page a user visits right now. An item or a section is always selected and inactive (not reloads the page when clicked).

55. The simple structure of the main menu. In the main menu, no more than two sublevels.

56. The visibility of the sublevels. Menu sections that have sub-levels, visually different from the rest of the points.

Search

57. Standardization. The search box is where it used to see the user on such sites – usually top left or top center of the page.

58. The only search field. Don't make the user think: "Why the second? Which one is more important?" and get stuck for a while.

59. Easy interactions with a search bar. It starts with a click of a button next to the input field request and press Enter. In queries, the user has automatically corrected typos, spelling mistakes, wrong keyboard layout (or proposed fixes), the search results are selected synonyms. The visual length of the search field is at least 30 characters long, the actual length of the request is not limited. You can easily edit the query in the search box (without having to go somewhere and the extra clicks).

60. Use "live" search. As you type a query in the search box, below it is given a relevant list of results. The list changes dynamically as you type.

61. Detailed information about search results. The visitor can see:

  • the number of found results;
  • as was sorted the search results (with the possibility to change the sorting);
  • basic summary information about each product/article.

62. Give a way out. In that case, if nothing is found, we don't show the visitor not so comforting blank page "On your request, nothing has been found". Main rules here are:

  • the client has several immediate to request variants of products or pages that might have what he is looking for;
  • the client is advised how to edit the request so it is more relevant;
  • a possibility to use the advanced search.

63. Advanced searching (optional). Additionally, there is an advanced search selection with filters to improve results.

Communication with the client on the website, contacts, feedback

64. Text formatting. All contacts on the website, including the header, are text, not pictures, so the visitor can copy.

65. The lack of copy protection. If the site exists, it does not apply to copy the contacts.

66. Securing places for contacts. Phones and other primary contacts are located in the same place on all pages of the website.

67. The feedback form. The feedback form is a comfortable way to collect information about leads but it doesn’t substitute the contact section.

68. The ability to make a quick order ("ordering 1-click", callback request, etc.)

Contact page usability requirements

69. Structure the page. If you have many offices in different locations, the information about each should be separated so a user clearly understands what contacts fit for which address. Nobody wants to scroll through a huge list of addresses on a page (not all users have skills advanced enough to use Ctrl+F).

70. Point selection from the list and on the map. The option is not particularly convenient for those clients who are in another city and have no idea how one or the other street close to their current location. However, for locals, the feature is extremely useful.

71. Advanced filter.72. Full information about each location. It includes:

73. Make an easy-printing feature. The contact page or map/directions should be easily transformed to PDF and printed - preferably in 1-2 clicks.

74. Contacts of individuals. Sometimes a user wants to contact a specific employee - the one he or she has already worked with or a person responsible for a particular department, Make sure you have all the contact information of employees on “About us” or “Our team” page.

Reviews and comments

75. Easy feedback. The text is saved, if the user incorrectly enters the captcha, or accidentally closes the page.

76. Authorization through social networks. If you want the commenting to be active, provide the possibility to register with social media credentials - it’s fast, trust-worthy, and spam-protective.

77. Spam protection. Provides protection from automatic and manual spam comments and input (captcha,  check third-party links in comments, etc.). Otherwise, comments will turn into a cesspool where an actual visitor couldn’t be able to find anything useful..

Feedback form

78. Standardization. The feedback form for a question, complaint, order in the free format on the website easy to find (the usual location is on the contact page).

79. Convenience. A feedback form is available without registration by a visitor. A user is only required to leave contact information (email, phone) to answer the request. The text of the message is not lost if the visitor has incorrectly entered the captcha or accidentally close the page.

80. Requests. The form allows the visitor to leave a detailed message. When you enter a large amount of text form allows you to quickly look at all the entered text – for example, appears on the right scrollbar to scroll.

81. Feedback. After sending a message to the email of the visitor receive a letter stating that his message was received, provides information about the approximate time of waiting for a response. If the visitor left the contact phone – he gets the same SMS.

Online consultant (chat support)

82. The convenient location. The window is located at the prominent location of the site but doesn't cover the content neither on desktop nor on mobile devices. Also, it doesn’t interfere with the visitor who interacts with the page.

83. Reception of questions. Write a question to the chat support in working hours and after hours.

84. Information about the waiting time for the answer. The functionality of the online consultant (chat support) provides information to the visitor – how about the time he needs to wait for a response.

85. Feedback. When sending a message, if the operator is not online, the visitor is invited to leave a contact (email, social network, number of the messenger) so the company could contact them during working hours.

86. Real employee. The visitor sees a real photo of the operator (and not the standard image from the image Bank or the company logo) and name. Be careful while considering bots - interactions with robots make customer experience quite unpleasant.

Category page products (directory partitions)

87. The optimal number of displayed items. By default, the category page displays 10-15 products.

88. The convenience of presentation. The user can change the number of displayed items on the page, and choose show all items at once, on one page. Also on the category page has a selection of presentation methods: advanced (showcase, table, tiles), the optimal (list) minimum (list price).

89. Focus on a real (not formal) situation. If the visitor can search for any type of product in different categories, added the ability to display it in different categories. For example, visitors often confuse the terms "access point" and "wifi router", so you can put the same model in both categories.

90. Show special offers. Add to the catalog such categories as "Sale", "Shares", "New", "Popular", etc.

91. Additional category. Pages directory partitions there are links to the types series of goods, which your buyers are looking for most often, but which are not allocated a separate section. For example, in the category routers, there are references to "Routers for home", "Routers with Wi-Fi, Routers TP-Link", etc.

92. No empty sections. If at this point there is no items in a section, it shouldn’t be displayed. Show only things you can offer.

93. Full information about the product. Each product on the catalog page minimally contains the following information:

  • photo
  • name
  • price
  • label promotions, sales, new products, hit sales, etc. – if it is included in these categories
  • the "buy" button.

94. Extended list of characteristics. Optional: on the categories page also provides information about the main characteristics. If a user wants to see more, he can click a “Show more” button.

95. The availability and the actual quantity of goods. Optional: on the category page show the exact or approximate quantity of the goods in the warehouse.

Filters

96. The conditional filter. Don’t re-adapt the results right after one filter was set. Make sure a user did all the adjustments, and only then apply settings to search results.

97. Put a confirmation button. The changes set by filters will be applied only after clicking that button.

98. The minimum time for the synchronization of dependent filters. Synchronization occurs without reloading the page. If this requires considerable time, there appears some message or a progress bar that informs the user about waiting.

99. The absence of "empty" results.

100. The required minimum values. The filter is not overloaded with choices. For this value of unified or United in bands, if there were too many options.

101. The search setting process is not too complicated. Don’t bore users with too many choices and options. The more complicated is the process, the bigger is the chance it won’t be complete.

102. Ready URL for the filter results. URL of the page changes dynamically when you select the filter parameters – in this case, the visitor can share the page with friends or keep it in bookmarks.

103. The filter is easy-to-cancel. After resetting the filter page the catalog fully returns to its original state.

Compare products

104. Visualization. The differences between products are easily comparable and noticeable. You can use animation showing the items one by one.

105. Dynamism. A visitor clearly sees what products are compared, the selected and viewed items. It’s easy to remove an object from the list or add a new one.

106. Noticeability. Link to the comparison of goods is located in the prominent location of the site, for example, near the shopping cart.

107. Adaptability. Test the page with a comparison of different devices, with various items, and variations. Make sure every element works the way it should under any circumstances.

Sorting of goods

108. Focus on popular products. By default, the most popular products come in search results first, then the less popular. It helps to promote your “starts” and makes it easier for a visitor to make a choice.

109. Custom sorting. If necessary, has its own sorting options based on the needs of the target audience and product features; standard options:

  • from cheap to expensive
  • from expensive to cheap
  • alphabetically
  • rated
  • the availability of discounts
  • on stock availability.

110. The selection of the applied filters. Make sure you clearly display what filters are applied and give users a possibility to change settings or remove them in a few clicks.

The product page (product card)

Price

111. The visibility of the price tag. The price is clearly visible, written in large size or otherwise highlighted.

112. Specify the currency.

113. The reasons for the lack of prices. If the price is not specified, report the reason for the lack of prices ("Product discontinued", "Price is still unknown") or recommend to clarify the cost with the Manager. In this case, there is also a contact information which allows reaching a manager, or a link to them.

Photo and video

114. Different camera angles. On the pages with a product, there are several photos of product with a different angle so that you can see all the design features (if equipped), tailoring (if clothing), etc.

115. Examples of application/usage/serving. For some types of products will be useful in applying, in operation, in the interior, etc.

116. Label with an interesting proposal. If the item is discounted, or it is included in the category "New" "Top sales", etc, it’s shown on its pictures.

117. Video unpacking/review. The more you show the better; preferably in high resolution.

Characteristics

118. Lists and tables. All the characteristics that can be represented by a list or table, should be made that way.

119. Uniformity. The same features in different products are called and presented the same way – in the same units of measurement, metric system, etc. This will help the user to compare different models of the product.

120. Ease of calculation the cost of delivery. We can help with the user if the characteristics of the goods will be information about its weight and dimensions, ideally about the size of the package.

121. Clues to non-obvious characteristics/terminology etc. In the pop-up window when you hover over the parameter name or by clicking on the icon of a question mark next to it.

122. Information about the warranty period for the product. Detailed information about the possibility to return the product (optional).

123. The information about the configuration of the product.

124. Information on the country of product origin.

Some additional tips about usability

125. No unnecessary information. Don’t distract visitors from looking at your products.

126. Visible CTA button. The call to action buttons ("Buy", "Order", "Call me back") are highlighted in contrasting the main colors of the site color and are clickable, is on the first screen.

127. Dynamic CTA button. Optional: button call-to-action floating, remains always in view when scrolling page by the user. Button call-to-action changes its color and shape when you hover, and when clicked, the user sees that he pushed the button.

128. Additional information. On the product page, in addition to its characteristics, there is a description – clear and useful characteristics and customer reviews, social media buttons (always useful), rating (assessment).

129. Viewing blocks of information. Item descriptions, features, reviews and other information posted on the page compactly - no need to make the user scroll that page, right?

130. Similar offer. If the product is discontinued or is missing, offer references to analogs of this model.

131. Information about delivery and payment. Methods, the approximate cost, and terms, or reference to the relevant section.

132. «Wishlist». Create a possibility to add products to a wish list for those who are “just browsing”.

133. Related products. If the product is provided for accessories, nozzles, components that can be purchased separately, they are displayed in the "Related products" or "buy this item»

134. No artificiality! Blocks "Related products" and "Similar goods" are actually filled with suitable goods and not ruthless randomized. You might want to use keywords for that.

135. The signal that the product is in the shopping cart. After adding a product to the cart the "Buy" button changes color and a label (for example "Product already in cart" or "Buy more"), or appears next to it information that the product is added to cart. The goal is that the buyer could see that the product is already added to the cart and at the same time had the opportunity to add one or several units.

136. Easy transition to the checkout.

  • Option 1: after adding the product to cart pop-up window appears with two buttons (links) select "Go to checkout" and "Continue shopping". This saves the user from having to search the shopping cart
  • Option 2: on the "Buy" button or next to it after adding a product to the cart a link appears on the order.
  • Option 3: reference to the order appears on the icon of the mini-shopping cart (which in itself is quite remarkable), after it is added to the product.

Registration on the website, order processing, shopping cart

General principles for filling in the registration forms and order

137. The minimal amount of required fields. Ideally, shorten the number of forms to a name and contact email and/or phone. Each additional required field explanation provided – why do we need this information.

138. Passwords characters are visible. Typing passwords on mobile devices without a possibility to see characters is not the greatest joy of life. Be kind to your visitors and add a possibility to see the password while entering it.

139. Mark the required fields. This way you show users that you care about them and their time spent on the registration.

140. One column of fields. If there are two columns, eyes have to move in an uncomfortable direction. Better fit everything in one line.

141. Ease of filling out forms. If there are choices which form to fill with different types of order or registration, give to a user only the right variant, not all of them. The less confusion, the better.

142. Add an autocomplete function. Examples:

  • all fields have not only name but also a clear description;
  • show an example of correct filling of the form
  • automate the process as much as you can (if a user enters an email address, autocomplete the name or mobile phone connected to it);
  • possibility to choose from a list (country, city, town, school, age, dates etc)
  • fields that can cause difficulties when filling are supplied with detailed hints, if relevant graphic (e.g., chart shows where on the map is CVV code and what to do if there is not).

143. Simple validation of input data. Accepted pattern correctly specified date of birth, email addresses, etc.

144. No check whether the input is a valid phone number. SMS and phone calls are very uncomfortable. In addition, it requires users to have mobile phones nearby which is not always possible.

145. Assistance with filling in the phone field. While entering a mobile number, some mistakes could easily be made (like missing a number or typing more numbers that allowed). What can you do to simplify the process?

  • providing selecting from lists of tips with country, code, region;
  • letting users enter unusual numbers which don’t correspond standards.

146. Instant check. Each field is checked for the correctness of the immediately following data entry, the page is not reloaded.

147. Guiding a user through the process. A correctly filled field is highlighted, for example, green.

148. Error message. If a visitor made a mistake when entering data, he or she receives an informative message about exactly which field he made a mistake (this field can also be selected by color), why this could happen, how to fix it. The message is next to the field in which the error occurred directly on the page, not in a separate window - no need to do any additional clicks.

149. If the error is made, a user only has to correct one field, the one where a mistake was made. In case of incorrect filling of one field, the data entered by the visitor are stored, so he or she did not have to enter everything again.

150. Easy-to-correct. A visitor can go to the previous field and correct the entered data.

Registration and usability

151. A user receives some benefits and knows about them. A visitor is motivated and knows the opportunities the registration gives. All the information is displayed next to the registration button.

152. Fewer fields, the better. Don’t create a separate login field. Instead of a specific information, you’ll be using visitor’s email. Less data for a user to memorize.

153. Make the registration as simple as possible. A possibility to log in with social media credentials is very handy, make sure you have it on your site.

154. Subscription to the newsletter. You don’t subscribe a visitor to your newsletter automatically without complete awareness. There should be a possibility to refuse the “news-receiving” option.

155. Automatic registration. Use the information you received while processing the order (name, email address), generate the password automatically. Of course, later there is a possibility to change or update the credentials.

156. Registration confirmation. After registration, the visitor receives an e-mail with the data of the registration.

Shopping cart

157. The standard algorithm of sending to the shopping cart. When you add to cart:

  • the user receives a pop-up message about adding product to cart
  • the user sees an animation of dispatch of the goods in the shopping cart (the second positive effect of this – the user now knows where the shopping cart is, if he didn't notice her
  • the icon of the cart is showing the number of products in it and their total price.

158. No unnecessary information. In the shopping cart there are no distractions such as:

  • product catalog, showcase
  • advertising, animation
  • news or links to blog articles.

159. Instant communication with managers. Right on the shopping cart tab a visitor can contact managers and get help if something was not clear during the purchase:

  • a tab with support managers' messages;
  • list and contacts of managers;
  • a form for a callback.

160. Full information about the assembled order. In the shopping cart are displayed:

  • the images of added products
  • the name of the product
  • optional – a brief description of the product
  • the number of items of each product
  • the total price of goods
  • the total cost including delivery (optional).

161. Clickability. Image and product name are clickable and lead to the product page.

162. Comfort when purchasing wholesale. A user can enter the quantity of the products, not manually click the “Buy” button for numerous times.

163. Performing all the necessary actions in shopping cart tab.

  • Increasing or decreasing item quantity, or remove a product.
  • Removing the item from your cart and the page is not reloading, the total amount of items is re-calculated automatically.
  • Adding or ordering other products at any stage of the order.

164.Simple, understandable and clear cancellation of all actions.

  • After removing all items from the cart a user gets a message that a cart is empty.
  • After the completion of processing of the goods, the cart is cleared.

Ordering and processing

165. Be helpful. At all stages of placing an order, the customer can use store assistance. You can offer to contact the team using the following ways:

  • a window with a clear caption like "Need help ordering?»
  • prominently located contact the Manager and offer to call/contact for assistance.

166. Pinned list of goods. The list is visible at all stages of ordering.

167. Minimal action required. If the user is registered, the address, name, phone number and other information inserted into the order form from the registration. The visitor can always return to previous stages to change something, and most importantly, don’t have to enter data again.

168. Visualization. If the order is made in several stages, the user immediately sees how many order stages are provided, and which of them it is.

169. The ability to log out as well as login. If the user started to enter data without registration, but in the process decided to sign up – don't make him enter everything again. All entered data is stored – phone, the city of delivery, etc, and pulling in the same field after registration.

170. Order confirmation. After completion of the order, the user:

  • sees the thank you page of and explanations for further actions
  • gets a reference to the page where he can track the status of the order, or redirects to it.
  • retrieves the order information in an SMS, an email, a message in messenger. It allows the client to be 100% certain in the order from all available sources.

171. Personal account. If the user is registered, all orders, including completed, stored in his personal account and he can view them at any time.

Payment

172. Privacy. The customer is clearly notified that all personal data that he enters in the payment process is secure (provide explanations for each field).

173. Adapt to clients’ needs. If there is a connection of variants of payment and delivery, payment options vary depending on what shipping method the buyer chose.

174. Inform your customers.

  • Warn customers about any commissions right away before accepting the payment.
  • Before the payment processing, the user is informed about what is going to happen – for example, he will be redirected to the payment page, where you will need to enter the data of payment card, and after he will be able to return to the main page.

175. Put target ‘blank’ to use new tabs. Detailed instructions on payment on one page, payment processing - on another. Thus, the client is not left alone with perhaps an unfamiliar payment system.

176. Payment confirmation. If the payment went successfully, the visitor receives a message and a link to return to the site.

177. Help with an error. If during payment there was an error – indicate a possible reason for the failure and offer to try again.

Usability and delivery settings

178. Low fields. Enable the Geo IP tool – it will determine the user's location, and the site will automatically fill in the corresponding field.

179. A minimum of user interaction. Data delivery for the registered user are saved and the next purchase he doesn’t need to enter them again.

180. Calculate the cost of delivery. If on the website there is no such, there should be a link to a calculator on any other website.

181. Automatic calculation of the amount of delivery. It is included in the total amount of the order.

Text on site

182. Readable text. If you are using SEO, then in the texts is a balance between the lightness of the text, consistency of content and optimization.

183. Concise and short texts. There is no "water", long introductions, unnecessary information overloaded with offers.

184. Focus on the target audience. The text uses simple, familiar and understandable to your target audience. phrases and words.

185. The simplicity of representing numbers. They are mainly represented by numerals, not words, to make text easier-to-understand. The digits in the numbers are separated by spaces (example: 1 560 000).

186. Pay attention to the formatting. The following techniques:

Font rules

187. Uniformity. On all of the pages use uniform fonts. For elements (headers, etc) one level – the same font.

188. Standardization of colors. The font color and background color combination, font and background are mutually matched for a comfortable perception and reading. Preferably, dark font on a light background. The color of the links is not used for plain text.

189. The optimal point size. For the main text on the website uses a large font size that the user was comfortable to read it. There are many opinions on this, now standard for plain text are considered to be sizes 12 to 16 pixels, and the modern trend – a larger font. Consider that for different types of the font of the same size may give a different result.

190. Proper selection of the font. When you scale the page in the browser, the font doesn't lose its readability.

Headings and subheadings

191. Informational value. Headline explains the main point of the text under it. Even a brief view of the text on the page headings give the visitor information about the key points of the article (product description, news).

192. Visual hierarchy of headings. For example, using the values font: heading 1 level is larger than heading 2 level, the subtitle of the last level are larger and/or bolder than the main text.

193. Don’t use periods. Sometimes the question mark is allowed.

Images and videos on the website

194. Image quality. All images on the website – high quality, clear, free of defects and third-party watermarks.

195. The justification for the use of images. All images are or confirm any information that is not intended "just for looks" and not give the impression of tiring variegation on the website.

196. Sizing. The sizes of the thumbs and a large photo of the product, respectively the same for each product page; the size of the preview photo of the item in the catalog is the same for all directories/categories.

197. The ability to scale the photo. A user can look at images in high resolution (for example, by clicking on the thumbnails) to see all the details. This is especially true of images with products, software or text screenshots.

198. The ability to customize the video display. Here is the video scaling, the ability to adjust or completely turn off the sound, put the video on pause.

Blog

199. Articles are precisely divided into categories.

200. Tags. Blog articles have tags, using which a visitor can find more materials on a particular topic.

201. Make an article section. Add links to useful materials on the product pages and product categories. It will help your client to find answers to questions or choose a product.

202. Block with links to the products. Reverse case: if the course of the article says about a product or service that is on the website – added link to a page of this product/service. In this case, the client will not have to waste time searching.

203. Use the heading "see also". If during the casual article touches on other topics – link to blog article where this topic is covered in more detail.

Continuous improvement of usability

Most of the items on this checklist are universal. But some of the tips may not be applicable or partially applicable because of the peculiarities of subjects of the particular site and the needs of your target audience. Therefore, an integral part of the work on the usability of the site is its constant improvement.

So, a few of the latest recommendations:

Print this checklist and share it on social media. If you analyze each tip and actually make changes, it will 100% improve your customers'satisfaction.

.Analyzed through web analytic systems help users navigate the site, their operation, looking for places that cause users difficulty.

  • Analyzed the user search queries, the feedback from staff who work directly with clients, and based on them create filters, sorting, links to the most requested category of products in the catalog and sections.
  • When optimizing navigation and usability, pay attention not only to the home page but "doorway pages" – those pages on which the main traffic.
  • Look at Analytics, through which popular browsers customers come less often what is most "bounce", less time spent on the site, and carefully check the correct displaying of the site in these browsers.

Print this checklist and share it on social media. If you analyze each tip and actually make changes, it will 100% improve your customers'satisfaction.

Leave Comment