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.
Quality marks and Certifications
According to the usability testing on conversion, for good UX the website should contain quality certificates, if any.
Information about the eCommerce website and the history of the brand
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.
Choosing a language on the website
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.
eCommerce Website Interface uniformity
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.
Uniqueness and clarity of the eCommerce website design
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.
Ease of interaction with ecommerce website logo
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.
Ability to see a company representative
The website should have an "About Us" page with detailed information about your company, including photos of the office inside and out, staff working with clients, production/work process.
The principle of nonviolence
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 immediately, which is a negative UX . If you use this technique for whatever reason, make sure that the stop button of playback is 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.
The explanation for deactivated items
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).
Thought-out delete buttons and clean forms
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.
Standardization of interaction
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).
Clear and relevant H1
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.
Convenient posting search
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.
The ability to quickly and easily interact
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.
Authorization using social networks
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.
No empty sections in the website design
For a good UX, if there are currently no products in the category, it is temporarily hidden.
Noticeable Apply button
" 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.
Opening in a new tab
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.
No points in title and content
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.
Reason for the use of images
All images are informative, not just decorative, do not "overcolor" the website.
Check the usability of the product page
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.
Product Image Gallery
The product card provides gallery feature
Return information on the product page for a better user experience
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 optimal amount of goods
The category page of the eCommerce website displays 10-15 products by default.
Ease of presentation
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.
Focus on the real situation
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.
Full product information
"According to the results of usability testing, each product on the catalog page of an eCommerce website should contain the following information:
promo, sale, new product, bestseller, etc. label - if it is included in these categories;
An extended list of characteristics
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).
Actual quantity of goods
Optional: the category page shows the exact or approximate quantity of the product in stock.
Noticeable price tag
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
Explanation of non-pricing
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.
Examples of application/usage/serving
In some cases, it makes sense to post a photo of the product in use, work, interior, etc.
Video unpacking / inspection
Detailed video; high resolution is desirable
The relative uniformity of characteristics
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.
Clues to non-obvious characteristics/terms, etc.
When hovering over the parameter name or clicking on the question mark icon next to it, the pop-up window displays all the information.
Information about the warranty period for the product
The eCommerce website should contain detailed information about the possibility of returning the product (optional).
Information about the item package
Usability testing proves that for good UX, you must specify all items of product that come standard in the package.
Information on the country of manufacturer
This feature is optional.
Important data only
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.
Viewing blocks of information
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.
Uniform image galleries
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
Ability to scale photos
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.
Ability to customize the video
This includes scaling the video, adjusting or completely mute the sound, and pausing the video.
Product filtering is an important influence on usability
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.
The minimum time to synchronize dependent filters
Synchronization starts without reloading the page. If this requires some time, a message or a progress bar informing the user is displayed.
The required minimum values
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 number of filtered items
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.
Ready URL for results
URL of the page changes when setting the filters, so the visitor can share the page with friends or keep it in bookmarks.
Quick filter cleaning
For good UX, after resetting the filter, the catalog page returns to the initial state.
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.
Focus on popular products
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:
from cheap to expensive;
from expensive to cheap;
the availability of discounts;
availability on stock.
The selection of the applied filters
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.
Minimum of fields
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.
Required visibility to fill in the fields
They are marked or highlighted in the usual way for the user (asterisk).
The ability to see the password when entering
This works for mobile devices, where many typos are made, but also suitable for PCs.
One fields column
Users often do not notice the fields in the second column
Easy form filling
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.
Use of benefits and autocomplete
To improve user experience it is recommended to provide some instructions for filling forms and fields. Using AutoFill will also improve UX.
Simple validation of input data
A website should provide a template of the correctly specified date of birth, email addresses, etc.
Help when entering the phone number
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.
A correctly filled field is highlighted, for example, in green.
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.
Minimum of trouble in case of error
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.
Convenient information correction
In registering or placing an order, the visitor can always go back one step and correct the data.
Conviction to sign up
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.
Registration process simplification
In addition to the standard registration, the user is offered authorization via social networks. It is proved to be good for UX.
Subscription to newsletter
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.
It is offered automatically. The client does not need to fill out anything for it: the data from the order (name, email) is used, and the password is generated automatically.
After registration is completed, the visitor receives a letter with registration data. This also applies to “background” registration.
Usability analysis of the buying process
Informing the user about the possibility of credit card payments improves the user experience.
Choice of currency
Usability testing shows that if the company provides sales in different currencies, it is necessary to indicate this on the website.
The standard algorithm of sending to trash
"When adding goods to the basket:
the user receives a pop-up notification about adding the product to the basket;
the user sees the animation of sending the goods to the basket (plus he understands where the basket is if he has not noticed it before);
the basket icon changes visually, showing the number of items in it and the total amount.
Fixed list of goods on the eCommerce website
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.
Ability to order with our without registration
Suppose the user started entering data without registration but then decided to register – no need to force him to enter it all over again. Instead, entered data is stored, including phone, city of delivery, and pulled up to the appropriate field after registration.
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.
Dynamic modules of purchase
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.
Proof of payment
If the payment was successful, the visitor receives a message and a link to return to the website.
Minimum of actions
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.
Calculate the delivery cost
If the website doesn't provide such, connect the link to the calculator on the carrier's website.
Automatic calculation of the delivery cost
It is included in the total amount of the order.
Additional elements that affect sales
Sales block on the website
According to usability testing, the sales block on an ecommerce website improves conversion rates and UX.
Shares block on the website
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 review incentive functionality
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.
Section “Recently Viewed” on the website
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 ability to make a quick order
The design the website must provide an "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.
Additional categories provided in the website design
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.
Label with interesting offers
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.
Ease of calculation of the cost of delivery
We can help with that if the product characteristics include information about its weight and dimensions, ideally about the size of the package.
Information about delivery and payment
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.
The first touch of a potential customer
State Toll-Free Number
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.
Separate display of contacts for each point
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).
Point selection from both the list and the map
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.
Feedback Form Standardization
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.
Ease of use
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.
Accessible location of consultant icon on the eCommerce website
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.
Available 24 hours a day
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.
Response Timeout Information
For good UX, online consultant (chat support) informs the visitor about approximate response time.
Feedback if no operator
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.
Instant interaction with managers
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 :
title chat support/online consultant changes its caption, for example, ""Need help with placing an order?"";
Obvious location of the Manager's contacts and offer to call/contact for help.
Help when error
If an error occurred during payment, a possible reason for the failure is indicated, and a retry is offered.
Website structure as part of usability
The standard layout of the key elements
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.
Tuning F Scanning Patterns
Our gaze slides from left to right therefore the most significant content must be placed on the left.
Compliance with the F-scan pattern
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.
Thoughtful arrangement of blocks on an eCommerce website
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.
No wide horizontal scrolls
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.
Well-thought-out internal link network
To ensure a good user experience, all the pages of your website should have links to other pages – none of them should be "dead-end."
End-to-end website menu
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.
Main Menu Availability
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.
Highlight the item on the website where the user is right now
This item must always be highlighted and disabled (not to reload the page when clicked).
User-friendly main menu of the eCommerce website
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.
Lists and tables
Characteristics that can be presented in a list or table should be formatted in this way.
Visual hierarchy of headings
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.
Categorization of articles according to topic
Blog articles have categories that help the visitor find content on this topic. It is proved to be good for UX.
Placing thematic tags
Blog articles have tags that help the visitor find content on this topic.
Block on the website with links to articles
For good UX, pages of products and product categories should have links to useful materials that will help the client choose goods.
Block on the website with links to the products
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.
Use "see also"
If the article covers other topics, an article covering this topic in more detail must be linked.
Other usability design tips
Well-designed functionality of the 404 error page
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.
Considering the features of color perception when creating a website design
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.
No extra animation in website design
Flash is minimally or not used at all.
No accumulation of elements
Website elements and blocks alternate with empty space. Avoid piling up the design.
The optimal size of clickable elements
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.
Call to action is not an integral part of usability
Quick access to the CTA buttons on the website
The opportunity to buy a product/order a service/order a call back is on every page of an eCommerce website.
High converting CTA
The call-to-action design on the pages must be visually noticeable and obvious: the buttons are large and signed, links are highlighted.
High converting main CTA
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.
Clear, unambiguous CTA on an eCommerce 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:
Continue (What does it mean? What will happen when the button is pressed?);
"Back" (Where to? The user may no longer remember what was on the previous page);
"Continue," "Finish," and so on."
Noticeable CTA button
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.
Dynamic CTA button
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.
Usability analysis of content
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.
Focus on the target audience
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.
Optimal typographic unit size
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)..
A well-designed website is important for usability
Page speed site
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.
Responsive Web design
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.
Usability testing for each device
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.
Hide unwanted scroll bars
At a resolution of 1024 × 768 in all standard browsers, the horizontal scroll bar does not appear on the website.
Ecommerce Website Map
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.
Setting the cursor under “clickable / non-clickable”
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.
Deactivate redundant items
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.
No copy protection
If an eCommerce website has such, it does not apply to copy the contacts.
Analysis of the basket in the online store
Notification that the product is already in the basket
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.
Easy transition to checkout
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.
No extra information
According to usability testing and to improve UX, the basket should not contain distracting elements:
catalog, shop windows;
news or links to blog articles.
Full information on the order
"Based on the results of usability testing, the shopping basket shows::
a large image of products that the user understood what it is
the name of the goods;
optional – brief description of the goods;
the number of items of each item;
the total amount of the goods;
the total amount including delivery (optional).""
Click-through rate of the items
The image and product name is clickable to improve UX and lead to the product page.
Easy wholesale purchasing
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.
Easy operation in the basket
Basket allows you to increase or decrease the quantity of the item and remove an item;
When you remove the item from your cart page is not reloaded, but the order total is automatically recalculated;
The visitor has the opportunity to add other goods at any stage of your order, with already filled fields are not cleared. This contributes to a good UX.
Easy trash empty
After removing all items from the basket, the user is notified that the basket is empty. This provides a good UX;
After the completion of processing of the goods, the basket is emptied.
Search on the website
Search on the eCommerce website
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.
Single search field
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.
Convenient search interaction
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).
Using Live Search
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.
Detailed Search Results
"According to usability testing, for good user experience, the visitor should see:
number of results found;
sorting of search results (with the ability to change this sorting);
basic brief information about each product/article found.
Help with no results
If nothing is found, for good UX, we do not show the visitor "No results were found according to your request" page, instead:
the client is offered several options for products or sections of the site closest to his request, where, perhaps, there is what he is looking for;
the client is advised how to edit the request so that it is more relevant;
optional: it is suggested to use the advanced search.
Advanced Search (optional)
The design of an eCommerce web site should provide the possibility of advanced search by selecting multiple settings.
Internal linking on the website
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.
Noticeable differences in “special” links on an eCommerce website
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.
Anchor or human-friendly link
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).
Return button on the website
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!