To begin with, usability - this is the convenience of the site. This indicator is responsible for how many users understand and enjoy using your web resource. With a significant increase in competition, you should understand that most visitors will not wait long until the page is loaded, they will not understand how to place an order or where to find contacts, if this is not clear the first time. They will simply leave this page and go to competitors.
Therefore, it is periodically necessary analyze the construction and content of your site, It is especially important to audit the usability of online stores and other commercial web projects so as not to lose potential buyers.
We have prepared a detailed checklist, to understand the requirements to the usability of the site.
- Basic requirements for site usability
- Visual Perception Assessment
- Analysis of the site's usability on navigation tools and search
- Text block usability analysis sheet
- The usability of pictures and videos
- Analysis of usability of feedback and communication with customers on the site
- Analysis of the usability of the categories of goods of the online store
- Checking usability filters
- Checklist for auditing usability of a product card
- Checking the usability of registration forms and baskets
Basic requirements for site usability
- Pages should fast boot. The site download speed indicator can be checked using the services we previously wrote about in separate article.
- Correct display in various browsers and with different screen widths (cross-browser layout).
- Website adapted for mobile devices - One of the most important indicators in assessing the usability of the site. Not only the conversion of the site depends on it, but also on its position in search engines. Firstly, now more and more people are looking for information from the phone, and not from the computer. And if your site is not adapted, it can make it worse behavioral factors. Secondly, after the release of mobile first index, Google search robots first analyze how the site looks on a mobile device, and after that the desktop version.
- Used single style interface for the entire site (cap, futter, menu, etc.).
- If the site is multilingual, when choosing a language the page should just reboot, not transfer to the main page.
- Company logo located at the top of the left side. It is clickable on all pages except the main one. When clicked, throws to the main page.
- Each page is structured and filled so that the user on the first screen (without the need to scroll) understood the subject of web resource (using a slogan, pictures, headlines, etc.).
- The cap and the futter of the site should be company contacts indicated.
- Present memorable favicon, which will be displayed in the browser tab and in the issuance of Yandex.
- Pop-ups must easy to close, so as not to annoy users.
- Do not use the automatically switched on music background, which most often pushes users away.
- Add “Up” button for instant scrolling.
- When conducting an audit, the site’s usability also check if it is configured page 404 errors. If the user incorrectly entered the address or switched to a non-existent page, he will be shown information about the error and how to solve it (go to the Main, from other sections of the site, etc.)
Visual Perception Assessment
When you audit the usability of the site interface and its design, pay attention to the following points:
- Rate general impression of the site. Design should not cause rejection.
- Do not use in abundance bright screaming colors.
- Pages must be not cluttered elements, but not empty.
- The blocks must be correctly displayed, located on the same level relative to each other, do not move out and do not go beyond main screen.
- Between blocks should not be too much empty space, especially from below. Otherwise, the user might think that the page is blank further and does not scroll.
- Buttons and other blocks must be optimal size (not too big and not small).
- It is better not to use animation (or in the minimum quantity).
- Plate the most important information in the upper left corner of the page. Based on numerous studies, a person’s gaze slides along a trajectory that resembles the letter “F”. The most attention is concentrated on the upper left corner.
Analysis of the site's usability on navigation tools and search
Checklist for the analysis of usability of buttons and links
- When hovering for active elements it is modified (from “arrow” to “hand”).
- The buttons are clickable and correspond to their description.
- Button Description Must Be as simple and understandable as possible (buy / order, etc.).
- Cancel Button Location and cleaning forms should not be close to the order or confirmation buttons so as not to click them erroneously.
- The user must be it’s clear where the link leads or at the expense of anchora (text description of the link), either due to the parcel text.
- The link should be the optimal length for the convenience of the click.
- Used familiar kind of links (the blue hue, when you hover over, changes its appearance, after clicking the color of the link, usually becomes purple).
How to check the usability of the site by navigation
- The menu is present on each page. site in the same place. It should be affordable and convenient.
- In an adapted version for mobile devices, they are most often made hidden menu, which is displayed when you click on the corresponding button.
- The user sees, which page is it on and how to return to a level higher by “Bread crumbs. The last link of the chain is inactive.
- Important pages of the site, such as: “Payout”, “Delivery”, “Contacts”, etc. readily available.
- Menu Partition Names must be familiar, not too long, start with the capital letter.
- After reading the H1 title, the user understands what the page is dedicated to.
- Thoughtful internal skipping. There should be no dead ends, on each page you need links leading to other pages.
Checking usability and correct search work
- Must be only one search field.
- It is in its usual place.
- When you click inside, the cursor is displayed, the field becomes active.
- Usability (activation both when you click on the “Search” button and on the Enter key; automatic correction of errors in the query text, etc.).
- Application “live search. When the requested information is initially entered, a list of relevant results appears under it.
- Details search results (the number of pages found, by what signs are sorted, brief information on each result).
- If no search results, the user is offered several query options for the upcoming topic, it is recommended to edit the query or use an advanced search.
- Availability advanced search, if necessary.
Text block usability analysis sheet
- Text structured and easy to read. It is divided into small paragraphs, there are subheadings, labeled lists, tables, pictures that are important in the meaning of the word are highlighted in bold.
- Optimally selected shade of font and background - they should be contrasting and not merging with each other.
- Only the necessary information, without excess water. Not just SEO text, but useful and informative for users.
- For ease of reading, do not write numbers in words, and divide large numbers by spaces (1 202,700).
- Headings are informative and display the essence of the page.
- If the blog theme is diverse, the articles should be divided by topic.
- Present block with similar articles, that may interest the user.
- The text is used links to other pages the same site (articles or goods).
- For all pages, one font is used.
- The choice of the most comfortable size of the keg (12-16 pixels).
- With increasing page size, the font remains readable.
The usability of pictures and videos
- Only quality photos.
- Images must be informative and appropriate, consistent with the contents of the page.
- Single style. For example, photographs for all goods of the same size, taken from the same angles, against the same background.
- Can I see the image in an enlarged format, if there is a need to consider the details.
- If there are videos on the site, it is possible to turn them on, pause, turn off the sound, etc.
Analysis of usability of feedback and communication with customers on the site
- Contact information should be in text format, not in the form of a picture, for the convenience of copying.
- There should also be no copy protection on the contact page.
- Contact information visible on all pages (in the site’s cap and in the futter).
- There are quick connection (online consultant, callback order, sending messages to messengers).
During the audit of the site usability, check if there is a contact page following information:
- The exact address with the city;
- Phone numbers (preferably different operator options);
- Links to social networks;
- Feedback form;
- Location on the map;
- If your office, usually, is not immediately found, you can add a map of the passage by car and public transport, as well as a photo of the entrance to the building.
Checking usability feedback form
- Feedback form located in a familiar place, on the contact information page.
- To fill out the form no registration needed, only an e-mail or phone number for an answer. If you mistaken or accidentally close the page, the text written in the form is saved.
- To phone and / or email notifications come that the user message has been delivered and the approximate response time.
- The online chat icon is located so that it is visible to the user, but did not obscure the content.
- You can ask an online consultant at any time, and whether it is indicated online or offline consultant.
- If employees are not available online, the user is invited to write his question and leave contacts (e-mail, tel.) To communicate with him during business hours.
- In online chat, the visitor sees real consultant photo.
Commenting and reviews
- For usability, it is better that there is an opportunity without registering, easy to leave comments under articles, reviews under products and services. When the page is mistaken or closed, the previously entered undirected recall text is saved.
- Opportunity socialization or mail.
Analysis of the usability of the categories of goods of the online store
- Optimal number of products on the page, approximately 15-20.
- There is an opportunity on your own select the desired amount products displayed on one page.
- Sections with promotional, popular, new products etc.
- Mandatory Product Data (photo, name, cost, sales icon, if provided, etc., CTA button “Buy”).
Checking usability filters
- User is given the opportunity select multiple filtering options and only after that show the result.
- The noticeable location of the “Show” or “Apply” filtering conditions button.
- Sync interdependent filters for the minimum time without rebooting.
- When choosing filters do not allow zero result (filters after which no results are available should be inactive for choice).
- The user is visible number of results from applied filters.
- The page address dynamically changes when choosing filters.
- Must be filter quick reset button and return the page to its original form.
- At the beginning are “Sales Hits”, and goods that are not available at the very end of the list.
- There is an opportunity create individual sorting (for example, from the cheapest, in popularity, etc.).
- The user must see what sort method he is using now.
Checklist for auditing usability of a product card
- Cost of goods immediately noticeable to the user.
- Indicated currency.
- If the value on the product is not indicated, there must be an explanation of why (there is no goods, the price is calculated individually, etc.).
Photos and videos
- The presence of photographs showing products from different angles and with the ability to consider details (for example, bringing the picture closer).
- Some products require photos in work or in a certain interior.
- If the product is included in any special. category (sale, popular, etc.) a special icon is established.
- Video reviews are welcome.
- For ease of perception, you must use lists and tables.
- Data for all products are displayed in a single style.
- Product specifications and equipment described in as much detail.
- There is information on the weight and dimensions of the goods, for the ability to calculate the cost of delivery, if necessary.
- Information on warranties for goods and their exchange / return.
- Call to Action Buttons should be noticeable and attract attention. When pointing at them, they will change the hue or a contour appears around.
- There is an opportunity rate, write feedback, read comments about the goods of other buyers.
- Related products offered, for example, in the block “They also buy with this product”. This displays truly relevant products, not random ones.
- If no goods available, about this should be clearly and noticeably written. The most similar similar products are offered.
- When adding goods to the basket should notification will appear about the commission of this action. After which the client can easily continue shopping or place an order.
Checking the usability of registration forms and baskets
Convenience of order forms
- Small fields to fill out.
- They are placed in one column (row), not in several.
- Lines, required, stand out.
- The visibility of characters entered in the password field is available. This is especially convenient for mobile devices where the probability of making a mistake is higher.
- Filling convenience (the ability to switch to other lines with both the cursor and the keys; the filled field is outwardly different from the rest).
- All fields are clearly described., have prompts for correct filling, if necessary.
- Is being implemented verification of entered data. If any error occurs (the required field is not filled, the wrong format is entered, etc.), the user will be provided with information in which of the fields it occurred and for what reason.
- If such an error occurs, the data in the remaining completed lines not deleted.
- When filling out a form, the user can edit any line.
Usability registration form
- Information should be displayed on, why the visitor needs to register, what are the pros.
- Instead of login, it is better to automatically use the email address.
- It is possible to log in through social networks.
- User can easily unsubscribe from e-mail.
- It is possible to register automatically when placing an order without entering the same information twice.
- Mail notification comes on confirmation of registration and order processing.
Base Usability Assessment
- Basket icon is noticeable and is in a place familiar to users - in the upper right corner.
- When adding goods to the basket, the icon changes, it should be displayed, how many goods are there.
- There is no distracting unnecessary information on the basket page.
- Product Data Indicated: name, photo, brief description, number of units, cost of each item and total amount to be paid.
- Name of products of the clickable, the user can go from the basket to the product description page.
- If the client wants to order several units of one product, he can enter data in the quantity field, rather than piece by piece.
- Available product removal / addition function, while the cost should be calculated again without rebooting the page.
- After placing the order, the basket becomes empty for the next purchases.
Analysis of the usability of the online store when placing an order
- At each stage of placing an order, the client is provided convenient way to communicate with managers and / or online chat, if he has any questions.
- If the client has registered on the site, his data will automatically catch up.
- If the purchase process occurs in several steps, the client can see what step he is at and how many of them are.
- The user can place an order regardless of whether he has registered or not.
- After placing the order, appears thanks page, where further actions by the company and on its part are indicated.
- For registered buyers, information about all orders, including those completed, is stored in the personal account.
- If payment methods depend on the selected delivery method, when making a purchase relevant methods should be offered.. For example, there is no need to provide a payment method “false payment” when choosing “self-export”.
How to improve site usability
Many of these items on the check sheet may seem obvious to you. But very often it happens that the owners of the sites, working with the web resource every day, do not notice such simple things. In order to understand how convenient the site is, you need look at it through the eyes of users, completely go through all the steps they take. To do this, you can use analytics and services for creating heat cards, about which we wrote earlier.
Work constantly on improving the usability of your web resource and you will certainly see the result. Share in the comments, do you audit the usability of your site and by what criteria do you evaluate it?