Site analysis: usability. Part 2

Site appearance – design

Bright colors can scare away the client, so you should work with the appearance and choose the right color palette. If you have a light background, then it is appropriate to use gray or black for the text. When designing on a dark background, use white text. The header should be in the same style as the entire site. These are all important usability points.

It is better to specify the height of the header at 200–350 pixels. If you make the header too large, you will have to scroll to see the content.

The footer usually contains service information, phone numbers, an email address, and much more.

Forms for sending data. When developing a website, fields are added where the user can leave a comment, register, or contact the developer, and there are rules for the convenience of filling in the fields. First, add ajax validation so that hints appear when filling out the form. For example, when the login is entered incorrectly, it is highlighted in red; when entered correctly, it is highlighted in green.

By fulfilling this condition, you will reduce the time it takes to fill in the data, and the user will make fewer mistakes, which means that the probability that he will leave will decrease.

A unique favicon. This is a small icon that is displayed in the browser tab. By creating your favicon, you will make the resource recognizable.

Text formatting

How to analyze the website interface? There are a number of tips that should be followed for the design of the text.

1. The font should not merge with the background and be too small. In the first case, it will scare away not only users, but search engines will also react negatively to this. In the second case, if you make the font size too small, it will interfere with the perception of the content. The best option is 14 pixels.

2. Lists and color blocks. People perceive text better if it has lists and colored blocks. For example, highlight important parts of a paragraph in a certain color, such as red or green.

3. Registration. Use h1 and h2 for the title and subtitle. It is necessary to avoid having the subheadings the same size as the text. The content of the title and h1 tags should be different.

4. Users are used to seeing links highlighted in blue. Therefore, it is worth adhering to this rule. It is better to arrange the side menu with links with the name and not with pictures, as they do on some sites. If the menu is created with pictures, it will be unclear what the section is about. Highlight the active menu in color. This will help you figure out which category is open faster. This option is suitable if the menu is too large.

5. Rules for the design of numbers. If you need to work with numbers in the article, for example, specifying thousands or millions, make spaces every three digits, like this: 3,524 or 3,172,731.

6. There should be an indentation between the lines in the text so that the text does not merge, but not too much.

7. All image tags must contain title and alt attributes with a value.

8. Set the date of the article. Readers usually pay attention to the date and year of publication. This is necessary to understand how outdated the information is. Since the content on the web quickly becomes outdated, most readers would like to see up-to-date material.

Recommendations for creating the appearance of an online store

How to analyze the usability of a website for an online store? There are recommendations here.

1. Logo: come up with a unique logo, create it in Photoshop, and then place it in the header. Make a link from the logo so that, when clicked, the buyer gets to the main page.

2. Add a phone number so that the client can contact the employee and ask a question. Be sure to specify the area code; if this is not done, customers from other cities will not be able to get through.

3. Make all contact information visible on all devices. Customers can log in not only from a computer but also from smartphones and tablets.

4. Sorting options should be present in the categories, i.e., it is necessary to give the buyer the opportunity to sort the goods. For example, to be able to make a selection by color (a black or white smartphone) or by price. The user will be able to find the right product, which means the chance that he will make a purchase will increase.

5. Add related products. The buyer should see additional offers. In some of them, they offer to buy several items at once at a reduced price.

6. Provide an alternative. If the product is missing, offer the buyer another option.

7. Create feedback and rating forms. Buyers should be given the opportunity to leave their opinions and evaluate the product.

8. Road map. In addition to the address of your office, it is recommended that you include a map, so it will be easier to get to the company.

Additional tips for your site

Check the functionality of all functions and correct errors. For example, a customer tries to issue a product but gets stuck at a certain step. You need to check how registration works and identify difficulties in order to eliminate them. Make a friendly interface; see how it is implemented on the sites of competitors.