We stand for 🇺🇦 Ukraine. You can find more information and donate here
We stand for 🇺🇦 Ukraine. You can find more information and donate here
Creating a website is hard work, but making sure it’s user-friendly? That’s an entirely different challenge. It’s like a game of Jenga that never ends – you tweak one thing, and the whole website comes tumbling down. If you want to ensure your website is truly usable, look no further than this Website Usability Checklist: 210 Points Testing!
Usability testing proves that the logo should briefly inform the user about the content and topics of the eCommerce website, thereby enhancing the user experience.
According to the usability testing on conversion, for good UX the website should contain quality certificates, if any.
According to usability testing, this information is required to improve the confidence factor and user experience.
An eCommerce website must be optimized for geo-targeting: information must be presented in the appropriate language (or offer a language selection). In addition, the data must be presented in the usual metric system.
If the website involves several languages, then the language selection must be in a conspicuous place (in the header)
Usability testing shows that all text items on the website should have icons if possible. It improves UX.
According to usability testing, the website's structure (header, footer, main menu, etc.) must be the same on all website pages. An exception may be the basket page and checkout.
Entering the website, the user understands the theme of a website in 3 seconds: the slogan and the images in the header, page title, etc.
The website logo should be clickable and display on the main page, but should not update it if it is already on it.
The website's favicon must match the logo. A memorable favicon helps quickly find your site among the many open browser tabs according to usability testing.
Menu items, buttons, and links should not use obscure terms or language.
The website should have an "About Us" page with detailed information about youк company, including photos of the office inside and out, staff working with clients, production/work process.
The media (music or video) on the website must not be run without the user's knowledge. Usability testing shows that it's annoying the visitor and forces him to leave the site, which is a negative UX immediately. If you use this technique for whatever reason, make sure that the stop button of playback was in a prominent place. If the design of your website provides pop-up Windows, they must also have a visible close button (it was close, but not navigate to another page). Thus, the visitor will not waste time finding it. He will close the tab with your website.
The design of an eCommerce website should present a minimum of difficulties. The visitor is invited to execute only needed steps: a. all that can be done in software is done programmatically (for example, populated with the delivery address, based on the user's location); b. 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.
When you hover over an inactive button or link, a brief explanation should appear why the button/link is inactive.
The standard functionality of any button is to launch an action, not go to another page unless the button clearly suggests this.
A button is clickable, not the text on it. You can also make a small space close to it clickable (but not if another button is located next to it).
Buttons that cancel actions, or clear completed data, are located at a sufficient distance from the Send or Confirm buttons, and differ from them. This is necessary so that the visitor does not click on them by mistake.
The design of all links should be familiar - blue, underlined, the cursor changes to clickable (hand icon) when hovering over the link. After a click, the link changes its color (the standard is purple).
According to usability testing, all pages of an eCommerce website should include a heading that is entirely consistent with its content for good UX. That is H1, not the title, because, with many open tabs in the browser, the title is not visible.
Following usability testing, the names of menu items should be familiar to the visitor ("don't make me think") – "Contacts," "About Us," "shipping," and so on, without much creativity. This provides a good UX.
Usability testing proves that the design of the website must be familiar. For example, the search box should be in a conspicuous place – the top left or top center of the page. This provides good UX.
According to usability testing for better UX, a commercial website must provide the ability for users to leave feedback (comments) to the product, services, articles, best, without registration. In addition, the text is saved if the user incorrectly entered the captcha before sending it or accidentally close the page.
Those who would not register in a separate form will only encourage still to check in on your website.
Protects automatic and manual spam comments and input (captcha, moderator pre - or postprimary reviews, check third-party links in comments, etc.). Otherwise, words can turn into a cesspool where the visitor will find it difficult to find helpful information.
" This is relevant when using a delayed filter when the visitor activates the filter only after selecting all the parameters he needs."
The client notices that all personal data he enters in the and payment process is protected (icons of the applied security technologies, relevant explanations to the fields). At the same time, the process doesn't come into an examination, not to damage the user experience.
Optional - the design of the current page provides detailed instructions for payment, and the page of the payment system opens in a new tab. Thus, the client has not been left alone with a possibly unfamiliar payment system, which positively affects the user experience.
Question marks, exclamation points, and ellipsis are only allowed.
All images on the website are of high quality, clear, free of defects, and third-party watermarks. This contributes to a good user experience on the website.All images are informative, not just decorative, do not "overcolor" the website.
A detailed and precise description of delivery terms and conditions, which can be immediately found on the website, will help the buyer understand that the chosen product will be delivered at a specific time and for a specific price. This greatly enhances the user experience, especially when the goods are shipped only after prepayment.
Using the zoom function for photos improves product perception and UX according to usability testing.
The product card provides gallery feature
According to consumer law, the user has the right to return the goods within 14 days after purchase. Indicate this on the product page. This positively affects the user experience and increases conversion.
The category page of the eCommerce website displays 10-15 products by default.
The design of an eCommerce website should allow the user to change the number of displayed items on the page or show all items on one page. The category page should suggest a choice of presentation: advanced (showcase, table, tiles), optimal (list), and minimum (price list). The advanced option works for users who want to see as much information as possible about the product directly on the catalog page. The minimum option works for visitors who are interested in price and availability. The optimal is an average option. This contributes to a good user experience.
If the visitor can search for any product in different categories, the website design should display various categories. For example, visitors often confuse the terms "access point" and "wifi router", so you can put the same model in both categories.
"According to the results of usability testing, each product on the catalog page of an eCommerce website should contain the following information:
Optional: the category page also provides information about the main characteristics in a pop-up window when the cursor is on the product, expanding by clicking on the "show more," etc. You can provide this functionality for the extended presentation of goods in the catalog (showcase).
Optional: the category page shows the exact or approximate quantity of the product in stock.
For good UX, the price is noticeable, written in large size, or marked differently. If the website accepts multiple currencies, for good UX, the currency switch must be placed in a conspicuous place (in the header) and on the category page
If the price is not indicated, then the reason for non-pricing is reported ("The product is discontinued," "Unknown price") or a recommendation to clarify the value with the Manager. In this case, the Manager's contacts or a link to them are indicated.
An eCommerce website should provide several product photos on the product pages, from a different angle - so that a user can see all the features of the design (if it's hardware), tailoring (if its clothes), etc. Thus, it provides a good user experience.
In some cases, it makes sense to post a photo of the product in use, work, interior, etc.
Detailed video; high resolution is desirable
According to usability testing results, the same features in different products should be called and presented the same way – in the same units of measurement, metric system, etc. This will help the user compare other product models and provide a good user experience.
When hovering over the parameter name or clicking on the question mark icon next to it, the pop-up window displays all the information.
The eCommerce website should contain detailed information about the possibility of returning the product (optional).
Usability testing proves that for good UX, you must specify all items of product that come standard in the package.
This feature is optional.
According to usability testing results, the product page (item card) must not contain information and advertisements that distract the visitor from exploring the product.
For good UX, the product page should contain a clear and useful product description - reviews, social networks (not for all topics), rating the product. Rating is possible in one click. The product description, specifications, reviews, and other information are placed horizontally on the page, in tabs, so that the visitor does not have to scroll down the page.
If the product is discontinued or not available, the website should offer links to the analogs. This provides good UX.
Preview and large photos are the same for all product pages; The sizes of the preview in the catalog are the same for all catalogs/product categories
The user can view each of the product's photos in high resolution (for example, by clicking on the preview) to see all the details. In addition, an online magnifier can be used. This is especially true for images with delicate details - screenshots, etc.
This includes scaling the video, adjusting or completely mute the sound, and pausing the video.
Suppose your customer's current choice of office not only by location but by other criteria – work schedule, range, work with legal entities or individuals. In that case, a commercial website must provide a possibility for such filtering.
When a user is redirected to a page with filtered results immediately after selecting one filter, an instant filter is less preferable, because the visitor is forced to wait for the page to load and again set the next filter he needs on the page.
For good UX, the filter is not overloaded with choices. Instead, charges are standardized or, if there are too many options - combined into ranges.
The design of the selection filter displays the number of positions on the filter. The same message can be used as a button/link to use the filter.
URL of the page changes when setting the filters, so the visitor can share the page with friends or keep it in bookmarks.
The user can see that a product is added to the comparison. For example, animation of the movement of goods to contrast can show the visitor where he can see the final comparison. It is proved to be good for UX.
The link text changes after the product are added to comparison so that the visitor sees which products he has already selected for comparison. In addition, the ability to add a product to the comparison is available both on the catalog pages and on the product page, and you can remove the product from the comparison in the catalog. There is a quick button (link) to remove the product from the list on the product comparison page.
For a good UX, the link's location to compare products is conspicuous, for example, near the basket.
The design of the product comparison page is optimized for the maximum number of displayed products, in various browsers and at different display resolutions. If this amount is exceeded, the goods are not added to the comparison, and the corresponding message is issued to the visitor.
Products in categories are sorted so that the most popular, best-selling products, products with high ratings, are placed first. This helps the user make a choice when he does not know precisely what he needs and prefers to focus on the choice of the majority. And the goods discontinued are at the very end of the list of goods in the category. This improves UX.
"If necessary, the website design should provide sorting based on the needs of the target audience and the characteristics of the product. Standard options:
For good UX, the user is provided with the information of what sorting criteria are currently applied. Thus, the sorting field contains the corresponding value next to the arrow or triangle field, indicating sorting from larger to smaller or from smaller to larger.
When registering and placing an order, the number of required fields must be minimal, name, and contact: email and/or phone. The design of each additional required field explains why we need this information. If there are many fields in the registration form, they should be visually grouped and have titles.
They are marked or highlighted in the usual way for the user (asterisk).
This works for mobile devices, where many typos are made, but also suitable for PCs.
Users often do not notice the fields in the second column
Page registration (or checkout) design provides that the user sees only the application form. If you place forms for multiple options on one screen – the user may not understand that they are different and fill out all forms. The transition between the registration fields is possible using a mouse or the Tab key. When the form opens, the cursor appears in the first field; then, the filling field is visually different from other fields.
To improve user experience it is recommended to provide some instructions for filling forms and fields. Using AutoFill will also improve UX.
A website should provide a template of the correctly specified date of birth, email addresses, etc.
The previous paragraph obliges us to help the user enter a phone number.
Each field is checked for correctness, and the page does not reload. If the visitor made a mistake in entering data, he receives a notification about which field he made a mistake in (this field is also highlighted in color), why this could happen, how to fix it. The notification is located next to the error field, directly on the page, not in a separate window, where you're going to need to click the "ok" button.
If one field is filled in incorrectly, correctly filled areas are not reset. Instead, the data entered by the visitor is remembered, so if the registration or placing an order was interrupted, he does not have to re-enter the information.
In registering or placing an order, the visitor can always go back one step and correct the data.
It gives the user some benefits, and information about this should be placed next to the registration button.
We use the email address as the login by default to breed users and remove the "login" field.
In addition to the standard registration, the user is offered authorization via social networks. It is proved to be good for UX.
When registering, the visitor has the opportunity to refuse to receive the newsletter - uncheck the appropriate box. Or, which is more respectful to the client, he can check the box and subscribe to the newsletter.
Informing the user about the possibility of credit card payments improves the user experience.
Usability testing shows that if the company provides sales in different currencies, it is necessary to indicate this on the website.
"When adding goods to the basket:
The list is visible at all stages of ordering. This contributes to a good user experience.
If the user is registered, then the address, name, telephone, and other information fill out the order form automatically so that the client does not waste time on that again. In this case, the visitor can always return to the previous stages of placing an order and then continue without entering the data again.
Usability testing proves that in cases where the order is made in several stages, it should be obvious to the user how many stages are left.
After the completion of the order, the user sees thank you page and explanations for further action on both parts.
If the user is registered, all orders, including completed, are stored in his account, and he can view them at any time. This improves UX.
If the website design involves payment and delivery options, payment options should vary depending on the chosen delivery method. For example, if pickup is selected, there's no need to offer a cash-on-delivery option. Thoughtless actions adversely affect UX.
If the payment was successful, the visitor receives a message and a link to return to the website.
Usability testing shows that the delivery data for the registered user must be saved so there was no need to re-enter it during the next purchase. This has a positive effect on UX.
If the website doesn't provide such, connect the link to the calculator on the carrier's website.It is included in the total amount of the order.
According to usability testing, the sales block on an ecommerce website improves conversion rates and UX.
According to usability testing, the shares block on an eCommerce website improves the conversion rate and the rate of additional purchases, improving the user experience.
Post-purchase reviews improve engagement with the audience and provide additional product information from real users.
Warranty is required to maintain confidentiality and improve user experience.
According to the usability testing results, it should be available on any page of the website, so the user could easily find previously viewed products.
The design за the website must provide a "order in 1 click" button, callback request, etc. According to usability testing, it is good for UX.
For good UX, the catalog of the eCommerce website must include such categories as "Sale," "Promotions," "New," "Popular," etc.
The categories of an eCommerce website should include links to popular goods that don't have their own category. For example, the routers' category refers to "Routers for home," "Routers Wi-Fi," Routers TP-Link," etc.
If the product comes at a discount or is included in the categories of "New”, "Top Sales," then the product image must have a corresponding label icon.
We can help with that if the product characteristics include information about its weight and dimensions, ideally about the size of the package.
Usability testing proves that the website must contain methods of delivery, estimated cost, terms, or references to the relevant section for a good user experience.
This is an option.
If the product has accessories, nozzles, components that can be purchased separately, they are displayed in the "Related products" or "Frequently bought together.""Related products" and "Similar goods" blocks must contain actually related goods, not randomly selected.
According to usability testing, a phone number starting at 0-800 increases call conversions. In addition, calling such a number is free for the client, which means that potential buyers are more likely to use it instead of paid numbers.
It helps to find answers to popular questions.
Too many contact options may prevent a visitor from making this choice at all. This negatively affects UX.
Website design provides for the same positioning of primary contacts on all pages. This is good for UX.
Replacement with the "Contact the Director" form is possible. That won't affect UX.
If you have multiple offices, the website's design must provide information for each of them (use tabs, script loading after you select office from the list, etc.). Nobody wants to scroll through a huge list of addresses on a page (not all users are advanced enough to use Ctrl F).
The options map is particularly convenient for clients in a strange city and has no idea how one or the other street is close to their current location. But for a local, this feature is useful.
The design of the contact page has the usual arrangement because the feedback form for a question, complaint, the order is easy to find on the website. For good UX, the feedback form is available without registration. The visitor is only required to leave his contact information (email, phone). The message's text is not lost if the visitor has incorrectly entered the captcha or accidentally closed the page.
The form allows the visitor to leave a detailed message. When you enter a large text, the form design allows looking at all the entered text quickly – for example, a scrollbar appears on the right to scroll. It is proved to be good for UX.
After sending a message, the visitor receives an email stating that his message was received. The email must include information about approximate response time. For example, if the visitor left his contact phone – he gets a text message on his mobile.
It is located in the obvious area of the website for better UX. However, it does not cover the content either on desktop or mobile devices, does not interfere with the visitor's interaction.
Usability testing shows that for good user experience the website must provide the opportunity to contact their support both in working hours and after hours. Chat must be provided for that purpose.For good UX, online consultant (chat support) informs the visitor about approximate response time.
When sending a message, if the operator is offline, the visitor is suggested to leave his contact (email, social network, number of the messenger) so the company could contact him during working hours.
In chat support, the visitor sees a real photo of the operator (not the standard image from the image Bank or the company logo), his name. Scripts (automatic responses) of the online consultant are well thought to avoid any awkward answers, unpleasant experience of communicating with the bot, etc.
The basket provides an opportunity to contact managers and get help if something is unclear during the purchase.
"Based on the results of usability testing, the client is offered assistance in placing the order at all stages :
If an error occurred during payment, a possible reason for the failure is indicated, and a retry is offered.
Usability testing shows that all of the standard elements should be at the usual places (the principle of "don't make me think"): a. company logo in the upper left, b. contacts – top right, c. the search bar at the top left or top center.
Our gaze slides from left to right therefore the most significant content must be placed on the left.
A more advanced level is the location of the most important elements (USP, search bar, contacts, article headings) on the page in the letter F. This is how the user's view slides, according to usability testing. The most prominent place in the upper left corner.
We place them on the first screen so that the visitor sees that there is also something interesting below. In this case, the visitor will scroll down the page. If, for example, you place an empty strip along the edge of the first screen, the visitor will decide that there is nothing below.
According to usability testing, they can be perceived as a barrier and the user will not scroll through the website page.
They help the visitor to understand which subsection of the site he is in and how to go to the higher sections in one click.
For good UX, the main menu of an eCommerce website should include contacts, delivery, and payment, product catalog, services, or other main sections. So the visitor could find the basic required information. in 2 seconds.
Usability testing proves that the main menu of an eCommerce website must be in the header or just below it and duplicated in the footer.
This item must always be highlighted and disabled (not to reload the page when clicked).
According to usability testing, the main menu of an eCommerce website should have no more than 2 sublevels. This provides a good user experience.
The design of the menu items that have sub-levels must differ from other items.Characteristics that can be presented in a list or table should be formatted in this way. For example, using the font-size: heading 1 level is larger than running 2 levels, the heading of the last level is larger and/or fatter than the main text.
Blog articles have categories that help the visitor find content on this topic. It is proved to be good for UX.
Blog articles have tags that help the visitor find content on this topic.
For good UX, pages of products and product categories should have links to useful materials that will help the client choose goods.
The opposite case: if the article refers to a product or service that is presented on the website - it must be linked. In this case, the client does not have to spend time searching it.
If the article covers other topics, an article covering this topic in more detail must be linked.
The website should have an informative 404 error page. It informs the visitor what happened and contains links to the main sections, the search bar, and contacts: phone number, instant messengers, e-mail.
According to usability testing, website design must include a minimum number of bright colors, a big colored text, animation. This contributes to the UX.
The colors of buttons, fields are used based on their standard perception. For example, the red color of the checkout field is subconsciously perceived by the user as the error color. A gray button is likely to be perceived as inactive. Website elements and blocks alternate with empty space. Avoid piling up the design.
The website design should include sufficiently long and large buttons, links, banners so that the user does not have to “aim” for a click. At the same time, the convenient size is not exceeded for no reason.
The opportunity to buy a product/order a service/order a call back is on every page of an eCommerce website.
The call-to-action design on the pages must be visually noticeable and obvious: the buttons are large and signed, links are highlighted.
The main call to action on each page of an eCommerce website (the Buy button, the button for moving to the next stage of placing an order, etc.) is always brighter than the others and is user-friendly. This greatly enhances the user experience on the website.
The text on the button indicates the action performed when clicked. Optimally this is an infinitive verb (buy, order, download, continue registration). However, it is specific, informative, and does not allow various interpretations. Buttons with these names make UX worse:
For a good user experience, the design of the call-to-action button ("Buy," "Order," "Call me back") must contrast the primary colors of the website, be large and clickable, located on the first screen.
Optional: call-to-action button is floating, remains in view when scrolling the page. The call-to-action button changes its color and shape when hovering, and when clicked, the user sees that he pushed the button.
If SEO-optimized, a balance between ease of texts, consistency of content, and optimization is preserved. There is no "water," lengthy introductions, unnecessary information overloaded with offers. This has a positive effect on UX. The text uses simple, familiar phrases and clear words to the target audience.
They are represented by figures instead of words to facilitate perception of the text. The digits in the numbers are separated by spaces (example: 1 560 000).
All of the pages use uniform fonts. Same font for elements (headers, etc) of one level.The design and style of the website require special attention: the font color and background color must be combined. The font and the background match for a comfortable perception and reading. Preferably dark font on a light background. The color of the links is not used for plain text.
The main text on the website uses a large font size to comfortable reading it. There are several opinions, but now the standard for plain text is 12 to 18 pixels, the larger font is the modern trend. Consider that different types of fonts may look differently in various sizes.
When scaling the page in the browser, the font preserves its readability.
It makes it clear what the block of text is about. Even with a quick look at the text, the subheadings give the visitor information about the article's key points (product descriptions, news)..
Studies show that approximately 75% of users close pages that load for more than 4 seconds. About 50% of users expect a page to load in less than 2 seconds. In addition, search engines also take into account the page load speed setting.
On July 1, 2018, a website ranking mechanism was launched based on the Mobile-first design principle. This is an entirely new search algorithm from Google. In addition, the page design automatically adjusts to the resolution of the user's device. This eliminates the need to develop a new gadget on sale strategy.
A convenient design for mobile devices is not always good for the desktop version. For example, a hidden main menu, which is expanded by a button in the upper left corner: on the desktop, it forces the user to make an extra click.
At a resolution of 1024 × 768 in all standard browsers, the horizontal scroll bar does not appear on the website.
The website must have a pass-through link to the website map (the optimal location is in the footer).
The design of long pages that take up several screens should provide a floating Back to Top button, which throws the user to the first screen.
When hovering over clickable elements, the arrow icon changes to the hand icon. When hovering over non-clickable elements - the icon does not change. This contributes to the user experience.Links and buttons that are currently unavailable to the user must be inactive. However, do not hide them - this will confuse the visitor and adversely affect UX. Usability testing proves that all the contacts on the website, including the header, are text, not pictures, so that the visitor can copy them for good UX.
After adding items to the basket, the design of the "Buy" button must change - the color and the inscription (e.g., "Product already in the basket" or "Buy more"), or information that the product is added to the basket must appear next to it. The goal is that the buyer could see that the product is already added to the basket and at the same time had the opportunity to add one or several units. This provides good UX.
Option 1: after adding a product to the basket, a window pops up with two buttons (links): "Go to checkout" and "Continue shopping." This saves the user's time and provides a good user experience.
According to usability testing and to improve UX, the basket should not contain distracting elements:
"Based on the results of usability testing, the shopping basket shows::The image and product name is clickable to improve UX and lead to the product page.When you add a product to the basket the user can immediately select the number of added products rather than clicking the " buy " button several times. This provides a good user experience."
"
The website's design should include the Search bar but don't shift the navigation tasks. The search bar on an eCommerce website does not solve navigation problems. According to usability testing, users prefer to search for products on their own using sections and filters and only then use the search bar.
Don't make users think: "Why the second? Which one is more important?" and stuck at this moment. Usability testing shows that it is wrong for UX.
The search is started by pressing the button next to the query input field or Enter key. Automatic correction of types in user,” requests, spelling errors, incorrect keyboard layout (or corrections are offered). Search results are selected, including synonyms. Although the visual length of the search field is at least 30 characters, the actual length of the request is not limited. Simple editing of the request is provided (without going somewhere and additional clicks).
Usability testing shows that when the user types the query in the search field, a relevant list of results must be displayed—the list changes as the user types. If a live search does not find suitable options when completing a query, the list is not cleared, and the last relevant values remain."According to usability testing, for good user experience, the visitor should see:
If nothing is found, for good UX, we do not show the visitor "No results were found according to your request" page, instead:
The design of an eCommerce web site should provide the possibility of advanced search by selecting multiple settings.
The standard functionality of a regular link is to go to another page or open another page in a new tab but not launch any action.
If the link involves the unfolding, but not the transition to another page/reloading the existing one, it must be dotted underlined. Add a triangle icon next to it. The download link must be different from regular links. It should include the word "download,” file size, and format.
Link text must clearly state where it leads (name of the article, product), so the user knew precisely what he opens. This contributes to a better user experience on your website.
The link text must be long enough that the visitor could easily click on it (for example, a link with the anchor "here" is no good).
Browser's button "Back" should work on all pages of the eCommerce website. Item 38 b tells us there must be no such button on the website. However, the browser has it to interact with it correctly: to return the user to the previously viewed page, saving all custom settings, sorting, or filtering. This contributes to the user experience.Website usability is a complex process that requires dedication and attention to detail. Writing a comprehensive checklist can help website developers ensure they are building an effective, user-friendly website. This article has provided you with a 210-point website usability checklist to get you started. So what are you waiting for? Let’s start testing! Now, go forth and make the web more usable for everyone!
