• Translation
• Tutorial

You are greeted by your clothes and escorted by your mind. This old saying speaks, among other things, about the importance of first impressions. This is true not only for people, but also for software products- websites and mobile applications. One of the most important aspects of creating the attractiveness of a network project is its ease of use - usability. And when a person first gets acquainted with a site or application, his first impressions often determine whether he will return to this product again and again. In other words, usability is one of the key properties of a website that creates (or destroys) an audience. Let's look at some common and often overlooked user behavior scenarios and ways to improve usability at the most important stages of your website or mobile app experience.

Clear and informed communication

1. Choose font sizes

People are increasingly surfing the web using mobile devices, and for some sites the mobile version has become the main one. And this dictates its requirements for font size, because the screens of smartphones and tablets are much smaller than conventional monitors and laptops. Spreading adaptive design played a big role in drawing attention to the problem of fonts.

Often, website creators focus on the ease of use of buttons, icons, tabs and other clickable objects. But few remember the convenience of clicking on text hyperlinks. Therefore, always conduct “live” tests of the comfort of clicking on hyperlinks with your fingers.

2. Write informative error messages

Many people neglect the selection of wording for error messages, considering them something secondary. Developers usually know how to avoid wrong actions in their products, and therefore rarely encounter such messages.

But real users cannot boast of this.

If the user does not understand well what to do after an error message appears, then he may abandon your product altogether. Therefore, the message text can be playful, but at a minimum it should help users quickly figure out the reason and avoid failures in the future.

Try to avoid specialized terms, write messages in common, understandable language. There is no need to dump information on the user that he cannot use. If desired, even validation errors can be rephrased to make them sound friendlier. Compare two versions of the same screen from one popular operating system:

Convenience of input forms

3. Simplify your password requirements

Today it is common to require users to create complex passwords. But this needs to be done positively, with encouragement, and not as an insurmountable harsh condition. Many input forms look very nice, but are completely inconvenient. Although the convenience of this interface element can have a decisive impact on the success of the entire product. Bad decisions may alienate users already at the stage of entering their login and password, or during checkout. Therefore, it is necessary to pay close attention to the ease of use of forms.

For example, historically, select fields ( select box) are difficult to style. In most cases, developers try to hide standard objects and clone them into more suitable DOM elements. In this case, data from the “clones” is transferred to the input of the original elements.

You need to spend a lot of time just to be able to control the design of a regular drop-down menu. But is the game worth the candle? We must not forget that mobile users get used to it very quickly appearance and behavioral characteristics standard elements interface used in their operating systems.

For example, Windows users Mobile expects that when you select a drop-down menu, the list of options opens in full screen, separate from the field itself. While Android users expect to see modal window. And if, for the sake of your design ideas, you do not meet such expectations, then users may not appreciate your solutions at all. They will likely have a harder time using your product, which will negatively impact their experience. In other words, by changing the design of standard elements you will create more problems than you decide.

4. Use the correct input forms

Many people advise using data formatting in input fields. For example, if you add input, input , then the layout automatically switches as you type. However, this looks strange and does not help at all, but interferes with filling out the form.

If you have several input fields, it is better to assign one data type to them. It is much easier for the user when the same layout is used when entering, and jumping from letters to numbers and back only adds additional confusion.

Use different types input in HTML 5 is only advisable when there are as few fields on the screen as possible. Good example - two-factor authentication Google: There is only one field in which you can only enter numbers. It will be very appropriate here automatic switching to a digital layout.

But more complex forms Such “helpfulness” and “initiative” of the keyboard can be annoying, since it forces the user to mentally switch and increases the cognitive load. Especially when switching from letters to numbers, and vice versa:

5. Create a vivid and memorable first-time experience

If a newcomer is disappointed with your site or application from the first seconds, then this is akin to the rudeness of the owner when meeting guests. No matter how delicious the treats are, the meeting will be hopelessly ruined.

A developer can easily lose sight of some scenarios for the primary use of his product. For example, it’s hard to call a screen overflowing with icons or sections intuitive. You can soften the first use experience, for example, with helpful hints and warning messages, which can be easily turned off.

6. The devil is in the details

All sorts of little things can go a long way in making your product easier to learn. For example, the familiar standard cursor in the first input field will allow you to quickly and painlessly dive into the interface. Ideally, the user should navigate the site or application on autopilot.

New users' lack of experience with your product means that some functions may cause serious difficulties. Remember Paperclip from Microsoft Office, who suddenly got out and offered her help, which was more annoying.

Directing a successful first user experience is like walking on a tightrope - it's very difficult to get everything right, but if you succeed, it is more than rewarded with user recognition. For example, the Stumbleupon project is very successful in teaching beginners its basic capabilities.

A good solution may be to integrate the training process into the normal procedure of using the product. For example, when archiving letters in mail application you can display the message “Did you know that you can start archiving from using Ctrl+ K? This approach allows for a much gentler training experience compared to traditional “whole application overview” style lessons.

7. Microcopying should not be used as an afterthought.

“Microcopying” refers to all the little instructions and confirmations used in applications.

• "Don't worry, we won't let your mailing address leak"
• “You don’t need a bank card for payment”

Microcopies are the ideal tool for alignment trust relationships and improving the user experience. They can also be very effective in training users who are not very confident with your product.

For example, binding bank card or providing Email For many users this is a rather controversial issue. And unless you represent a time-tested, reputable brand, people will always be wary of providing you with such information. Microcopies can help resolve user doubts

8. Always provide context

Users hate the lack of context. Considering how information flow they constantly have to cope, people try to abstract themselves from everything unnecessary on the screen and focus on specific things. When did it come into fashion endless scrolling, many sites encountered one problem: as soon as the user clicked somewhere by mistake, the current position was reset. This is especially unpleasant in cases where a person has scrolled very far down the contents of the site. After just five scrolling screens, an accidental click can become a source of irritation.

Most sites today solve this problem using modals and other schemes typical of single-page applications. For example, on Pinterest, when you click on a tile, it doesn’t open new page, and modal. This allows you to examine the details of a particular post without losing your current position or waiting for a new page to load.

On mobile Facebook app The same approach is used: if you click on a photo in the album, it will load in a full-screen modal. It looks almost as if a new page had opened, but when you press the back button you are gently brought back to context.

Users, especially mobile users, do not like it when the screen content changes unexpectedly. This should only be done in response to explicit user actions. For example, news feeds on Twitter and Facebook are updated forcibly. Otherwise, you would get an unpleasant situation when you are reading a message, and at the same time background process refreshes the feed and dumps you with a bunch of new messages that bury what you read before. It's like a gust of wind ripping a newspaper out of your hands.

Fortunately, Twitter delicately informs the user when new messages appear and waits for the user to give the download command. That is, a person has complete control over changing the contents of the screen and is not confused.

15. Break large, complex tasks into smaller operations

Nobody likes filling out a full page form. Therefore, all kinds of settings sections, registration forms and profiles will only benefit from a logical division into smaller blocks. Use cards, sections, tabs, side panels. It will be easier for a person to perceive the need for numerous fillings, even if there are several logical blocks on one page.

Dividing into logical blocks subjectively simplifies the task of setting up and filling out numerous fields and prevents the feeling of unpleasant work. This is especially important for mobile applications and website versions.

For example, Facebook has spent several years honing its grouping of privacy settings to make them easier to configure. But once upon a time this was such a non-trivial task that many simply did not touch these settings. By dividing them into sections, the percentage of users who engage with these pages rather than avoid them has increased.

Another good example breaking a large task into logical blocks - the ordering process. For many web applications, this procedure becomes a critical point, an indicator of the success of the project. When placing an order is divided into stages, then as they go through them, users get a feeling of progress, progress, even if not everything goes smoothly.

Also, dividing into logical blocks makes it easier to detect and solve emerging problems. After all, no one wants to deal with a message like “Could you please correct the following four points?”

If you force the user to fill out all the fields or configure settings on one, complexly organized page, then you are putting your eggs in one basket. Any error will prevent all other data from being sent.

The same can be said about forms of donation, especially in mobile projects. You probably want the user to think: “Wow, how simple it is” instead of “Yeah, this takes time.” Improving the usability of forms directly affects the profitability of the project.

Most of the above points are quite simple when considered individually. But if you work with this every day, your eyes often become blurry. Therefore, it is important to be able to step back, abstract and look at your brainchild through the eyes of a “new user”.

Tags:

• interface usability
• website usability

Add tags

Today, many designers consider animation as something that makes a design more beautiful and vibrant, and rarely use it to improve usability. To improve the usability of the landing page, the animation should be functional element, and not just decoration. If you want to learn how to use animation to make a design both attractive and convenient, then this article is for you.

1. Create a concept

Every designer is a storyteller. When he creates a website, he tells a story to his visitors. By using animation we can make this story even more interesting.

Animation breathes life into content, making it more attractive and memorable. A good example of such animation can be found on the Ikonet website. Animation captivates the user from the first second of being on the page.

Animation can also act as a guide, explaining to the user how to interact with the interface or site. Thereby drawing the user’s attention to important things. For example, if you need to emphasize some information or action, make it slip out from somewhere and be quite noticeable. Take a look at Preston Zeller's example below. Elements appear on pages one at a time, thereby drawing users' attention to certain areas on the page.

2. Provide feedback

Human-computer interaction is based on two main principles: user input and system input. Feedback. All interactive objects must respond to user input with appropriate visual or sound signal. Thus providing feedback.

Below is a custom checkbox effect created using the Slides framework. The subtle bouncing animation that the user sees when using the switch enhances the sense of interactivity.

With slides, you can create sweet animations that activate on hover, thereby encouraging users to interact with objects. Take a look at Berry Visual. When you hover over "Send Message" or the menu on the right top corner, a nice animated effect appears. This creates a sense of interactivity among the elements.

Buf Antwerp is another great example of how animated feedback can improve user experience. When visitors hover over a tile, a semi-transparent overlay appears with text that provides Additional information about the object.

3. Make a connection

A great place to add animation to your landing page is at transition points. Often times transitions seem abrupt, such as when users click on a link and a new window appears. Such changes usually lead to a loss of context, the brain needs to scan the new page to understand how it relates to the previous one, so users may find such transitions difficult to perceive.

Let's look at an example of a sharp transition:

Compare this to the following example, in which a smooth animated transition guides the user to different parts of the screen:

The second transition is softer. It clearly demonstrates the process of transition between sections, helping users understand what is happening and see the connection between them.

It is also used when creating transitions between stages. The smooth transitions between slides in the example below create a sense of consistency so that the information doesn't look cohesive.

4. Make boring tasks interesting

It may be difficult to imagine how you can add playful elements to your daily routine. But by adding a little surprise to the animation, we can turn a familiar interaction into something fun and memorable.

If you open the Tympanus’ 3D Room Exhibition website, at first glance it will seem like it is no different from other web galleries. But your impression will change immediately after interacting with the page. If you move your cursor, you will see the page move, and this effect will create a feeling of 3D space. This feeling intensifies as you move from one page to another. It's like you're traveling from one room to another in three-dimensional space.

Now let's talk about something more familiar than 3D effects - about shapes. Who loves filling out forms? Probably no one. However, filling out forms is one of the most common tasks on the Internet. How can you make this activity fun?

Look at the picture below, the yeti closes its eyes as the user begins to enter their password. This animated effect is surprising and uplifting, especially if you see it for the first time.

Last but not least, you can make scrolling not only visually interesting, but also useful for readers. Below is , an interactive journey in which the route on the map is animated according to the content on the page. Coherence of the idea visual effects and location allows users to read information and see their movements on the map.

Determining the place on the page where animation will be most useful is only half the story. Great importance also has animation implementation. In this section you will learn how to properly animate objects at a professional level.

1. Don't animate multiple objects at once

When multiple objects move at the same time, it is difficult for the user to concentrate. Because a person's eyes will move from one object to another, and the brain will need extra time to figure out what is happening (especially if the movement happens very quickly). Therefore, it is very important to implement animation correctly.

It is critical to understand the concept of transition choreography, which is a sequence of movements that maintain focus as the interface changes. Minimize the number of simultaneously moving elements. Use no more than two or three moving parts at a time. If you want to set more than three objects in motion, group them and animate them as a whole, rather than individual elements.

Slides are extremely useful in web design because they allow you to use less movement. Every animated effect present in the slides has been carefully designed to effectively present the content.

2. Animation should not conflict with the individual characteristics of the landing page

Every time you add animation to a design, you make it more expressive. Its appearance will largely depend on the animated effect you choose.

When people interact with a product, they have certain expectations. Imagine that when creating a landing page for a banking service, you decide to use a bouncing animation for your data collection form. Many users will be afraid to provide their details because the form does not look serious enough.

Slides framework provides 10 animated styles such as Stack, Zen, Film, Cards and Zoom. Experiment with various effects and choose the one that best suits all the criteria.

3. Set your timing

When it comes to creating animation, timing is everything. He literally decides the fate of animation. When you're working on animation, you typically spend a third of your time finding the right animated effects, and the rest of the time choosing the timing to make the animation look graceful.

The optimal UI animation speed is between 200 and 500 milliseconds. An animation that lasts less than 1 second is considered instantaneous, while an animation that lasts more than 5 seconds can feel drawn out.

When it comes to creating an animated effect, timing has a direct impact on how the animation is perceived. It helps designers make animation more natural and natural.

4. Don't forget about accessibility

Animation is a double-edged sword. It can improve usability for one group of users while creating problems for another group. Release Apple iOS 7 became an example of what not to do. Shortly after the release of the operating system, iPhone users reported that animated transitions caused dizziness and eye strain.

You have to target the masses and take into account disabilities such as vision problems and so on. Always check that your design follows WCAG guidelines. Track user requests and comments.

A special CSS media feature, “prefers-reduced-motion,” helps track situations where the user requests to minimize the number of animations.

Additionally, you should conduct usability testing to verify that all users, including those with visual impairments, will have no problem interacting with your design.

5. Test your design solutions

Here are some tips to keep in mind when testing:

• Test on different equipment.

Many hardware specifications such as screen size, screen density, performance GPU and so on, can significantly affect animation performance. As a result, the owner of a higher quality screen will see a different picture than the owner of an older device. Consider these factors and optimize your animation so that it looks great on all devices.

• Test on a mobile phone.

Most websites are created and tested on a PC. Not testing on mobile devices can create a lot of problems for users as some animated techniques work great on PC but not on mobile devices. To prevent users from having a negative experience, make sure your design works great on both desktop and mobile devices.

• Watch the animation at slow speed

It's hard to notice flaws when an animation (especially a complex one) is running at full speed. But when you slow down the animation (say, one-tenth the speed), such imperfections become obvious. You can also make a slow-mo video and show it to your friends to get their opinion.

6. Animation should be developed at the beginning

Many designers consider animation unnecessary function, because it overloads the user interface and complicates it. In most cases this happens, but only because designers add animation at the end of the design process. Random movement without any purpose will not benefit visitors and will most likely be distracting and annoying.

To make animation useful and practical, spend time on it early in your design. Determining where the animation will look logical and natural is very important.

Conclusion

Well thought out and high-quality animation makes the landing page not only more attractive, but also more user-friendly. When done right, animation can turn your landing page interaction into a memorable and engaging experience.

Good day, dear friends! Today we will talk to you about such an important thing as Usability (usability) of the site, on how to improve this factor, knowing its basic principles and rules. Well, in conclusion, we will learn how to do an independent and free audit (analysis) of your project to determine its attractiveness to its audience. So, let's start with the definition of the very concept of usability.

What is Usability and what are its principles?

Usability - from translation means a measure of convenience, quality, ease of use of something. In our case, we mean the site itself, since it directly interacts with Internet users. The level of usability of a particular project will directly determine its CTR (percentage) of sales, position in search engines and naturally the amount of traffic (visitors). If you manage to improve this factor, then you will kill several birds with one stone, which can increase your earnings by 2-3 times! This is what you get in case high level usability:

— Increasing such a very important thing as site conversion (percentage of sales), and therefore the profit of the site owner.

— Increasing the position of the site, which will ultimately lead to an increase in potential customers or, as previously mentioned, to increased profits.

— Reducing the budget (expenses) for contextual and other advertising to attract visitors. Why pay for them if they already find you well through search?

— Attracting a core customer base. If a visitor really likes your site and the product you sell, then be sure that in the future, when he wants to make a purchase again, he will certainly look at you first, and then at his competitors.

— Reducing the number of employees who need to be paid. As you know, every self-respecting service should have online support clients. So, if your visitor can find answers to his questions on his own without any help, then he is unlikely to bother your consultant.

As you can see, you can very smartly increase your , but to do this you need to make sure that your visitors or clients literally fall in love with your site. When entering it, they should not feel awkward, tense, or sense any trick on your part, that they are about to be deceived. These unpleasant feelings are most often caused by overly inflated prices, unclear navigation and the entire site as a whole. Simple user He might even be offended if you don’t speak his language!

Many, in pursuit of clients, try to stand out among the crowd of competitors, showing their “coolness” and wealth, so to speak. Most often, this can be seen in texts that use complex terms for perception that can only be understood by a very narrow layer of society. But let’s not deceive ourselves, because most often our clients are ordinary grandparents and even sometimes schoolchildren who, so to speak, cannot “get it”, what kind of thing this is and why should I buy it here, if I don’t even have a description of it? can I understand?

And this is only a small drop of what needs to be taken into account when developing a website so that it is as attractive as possible for the user. When creating your project, you must initially ask yourself precise questions about usability and answer them as accurately as possible, without any “I think, I guess, etc.,” so that later you won’t be surprised why there are a lot of visitors, but no sales.

So, here are a number of questions that need to be taken into account when designing a website:

— How convenient is the site, can the user find what he wants using it (here we mean how clear and easy its structure and navigation is).

— How useful and easy to read the content (articles, videos) is for perception by different groups of people according to age and cultural characteristics.

— How easily the user can remember and find your site (this means a beautiful unique design, a short and clear site address, its name, phone number, etc.).

— Will the visitor be satisfied after the purchase? What if the delivery is late or the goods arrive broken, but you’re like everyone else? cash they don't return.

— And finally, how complete is your project in every sense? You know, this is probably the worst thing that can happen when a client, visiting your site, finds some error in the site itself or somewhere else. Because of this, you will lose trust in you, which will ultimately reduce sales.

So, as soon as you answer a number of these questions, you can be sure that you still have competitive ways and can do successful sales. But if you still don’t have enough arguments for this, then I recommend that you familiarize yourself with my list below for improving the usability of the site.

Basic rules for improving the usability of website content (articles).

1 ) Divide your articles into small paragraphs, each consisting of approximately 5-7 sentences. Nowadays, users no longer read posts on websites like some kind of book, but simply scan them and determine whether it is worth reading it in full or not. So, if you write long articles, like me, then the user may simply get scared when he sees one huge text with no end in sight. I think you would also hardly have read this article if it had not been divided into paragraphs.

3 ) In the very first sentence of your article, always highlight keywords by which users are searching for you in bold. This operation will let the user know that he found what he was looking for, because as I wrote above, users do not even read half of the text, they simply scan it for its relevance (the extent to which the article answers the question).

In other words, if the necessary keywords are missing at the very beginning of the article, then the user is likely to leave immediately. Also this technique is one of the basics of optimizing articles for search engines. If anything, Google still likes it when the keys are highlighted bold text, for Yandex this no longer matters.

4 ) Explain unclear terms, because not everyone is as advanced as some. As you have probably already noticed, there are quite a lot of unclear definitions in this article, which I always explain in parentheses, which I recommend that you do too.

5 ) Insert high-quality pictures or . This helps improve the usability of the article, because no one wants to read one boring text. This, by the way, has become very relevant in our time, when more and more more people began to buy small comics than once kilogram books.

6 ) If you are describing any instructions, then divide it into small steps and number them so that the user does not get confused and can always understand the sequence of actions that need to be performed.

7 ) Speak to your visitors in their language. If your potential audience is young or, on the contrary, older people, then you need to use this type colloquial speech which is characteristic of them.

How to improve the usability of the site itself?

8 ) Before creating a website, you need to analyze the market, your audience, what is familiar to them and what is alien, and understand their train of thought. Most often, in 90% of cases, site usability work begins when it has already been created, which ultimately makes the site owner despondent, as he begins to realize that he will have to spend so much time big row innovations, that the easiest thing would be to completely demolish the entire site and do it all over again.

In the remaining 10% of cases, website usability is most often handled by designers or programmers who do not understand anything about it. They, as a rule, rely on their own intuition, experience, opinion, which has nothing in common with the opinion of visitors.

9 ) Don't make an alien website that only you can navigate well. My point is that no matter how much you want to stand out from your competitors, the interface and navigation of your project should be similar to most sites so that the user can easily navigate through it.

10 ) Make a page. You, of course, may be surprised: how can it affect sales? That's how. A long time ago, one company did a sneaky thing where they wrote a message on their 404 page that they simply couldn't process the item and asked them to repeat the purchasing process again. In this way they increased their profits by $380 per month.

11 ) Do it on the website. If your publications or product descriptions are large enough, the user may simply get tired of scrolling up for a long time after reading.

12 ) Don’t make many subcategories, no matter how big your site is (two are enough). A large number of subcategories can easily confuse your reader, and in most cases will not allow him to find the desired product or material at all.

13 ) Be sure to add contact information (phone, email) or at least . Also on the site there should be a page about the organization or author of this creation. Remember, the absence of any of this data greatly undermines the credibility of you and the site as a whole.

14 ) Make the title and description of your site human-readable so that the user understands at first glance what the site is and what its purpose is. Many, in my opinion, make the same gross mistake: inserting a company name (especially in English) into the description of their site, from which the user cannot understand anything. For example, I just entered the query “buy a dress” into the search, followed the first advertisement to the site, and what do I see in the title? Mondigo.ru. Yes, I agree, it’s a good trick to make the user remember the site, but he’s unlikely to use it.

15 ) Attach a search to your site, preferably in a place familiar to everyone - in the upper right corner. If you have less than 100 pages, then you don’t have to worry about this for now, since you can get by with a simple one, but as you get more pages, be sure to add a search. This, by the way, also applies to affiliate program. Just recently I was looking for an online store that would have an affiliate program for the product I needed.

I found one, registered, and spent an hour wondering how I could find it. affiliate link specifically for this product, and not for the site as a whole. The whole point was that the store had several thousand products, but there was no search for them, so I had to write to the site’s support.

16 ) Since we, by our culture, read posts from left to right, the site itself should be designed in such a way that all text should start on the left, and not from the center, for example, where the site has two columns on both sides. Also, the background must be white, and the text must be black, at least 12px.

It will be very difficult for the user to read material where, for example, the background is black and the text is white, and it is also so small that it will have to be examined under a magnifying glass. In addition, I do not recommend that you use more than four shades of colors on your site, since many colors do not combine with each other and scare away the user (or rather, his eyes).

17 ) Do it on the website if you just have an informational website. If you have an online store, then it is better to remove it so that the user does not get lost on your site and gets to where you need to go, thereby increasing conversion.

18 ) Remove the pop-up subscription form, which, in addition to being very annoying, also slows down the site 10 times. Also, for a long time on many sites I saw such a terrible charm, when when you clicked on the cross of the site, a terrible subscription form appeared with a stupid question: are you sure you want to leave this site? I recommend that you abandon this method of collecting email addresses, because this will only worsen your results.

19 ) Know your limits when monetizing your site. Too many advertisements can discourage or prevent the reader from finding the material they need.

20 ) Remove or make it possible to log in through various social networks. Also, if you have an online store, remove unnecessary fields to fill out. Believe me, no one wants to write a whole biography about themselves in such points as: how you found us, your hobbies, etc.

21 ) If possible, do not use java scripts and flash animations in the site menu, since your visitor may simply have them disabled in their browser settings. As a result, the user will not be able to use the menu, and therefore, place an order.

22 ) Make sure that your site displays properly on mobile devices. To do this, you need to check it for and clean the site code if any errors are found.

23) Use clear navigation. The user must find what he needs within three clicks. To do this, you can make or attach navigation from .

24 ) Remove the player from your site, the visitor came to find the material he needed, and not to listen to classics or rock and roll. I also recommend removing all unnecessary elements on the site such as: calendar, top commentators, etc.

25 ) And lastly, be friendly and positive towards your audience, because everyone already has enough negativity in their lives.

How to do a high-quality audit (analysis) of a website for free?

To begin with, install any attendance counter, by which you can find out what kind of people visit you: their age, gender, where they came from (countries), etc. I recommend installing a counter from Yandex, since it has such a cool feature as a “webvisor” through which you can see how each user behaved on your site. At this stage, you can find a bunch of bugs (errors), as well as various shortcomings in the design of the site. You will also be able to see on a heat map where your users click most often, which can be very helpful when placing ads.

In addition, in order to evaluate the usability of your site, it will be enough to call all your relatives and friends where, everyone will evaluate it individually. By the way, here it is better to say in advance that the site is not yours, since in this way you will not receive an adequate assessment, because they will sympathize with you in advance. Before testing, you need to install a camera in front of the monitor in order to see not only how a person behaves on the site, but also to see his facial expressions and emotions, which is also very important. At the end, ask them to write down on a piece of paper what they liked and didn’t like about the site and where they experienced any difficulties.

You can also simply do a survey or vote on the site, where users themselves will provide you with all the information for free. Well, this concludes my article on improving the usability of a website, I hope it was useful to you. If, nevertheless, this was not enough for you and you want to become, so to speak, a great expert in this field, then you can read a couple of books on this topic, since in the future, with the growth of the Internet, this specialization may become very popular.

• Translation
• Tutorial

You are greeted by your clothes and escorted by your mind. This old saying speaks, among other things, about the importance of first impressions. This is true not only for people, but also for software products - websites and mobile applications. One of the most important aspects of creating the attractiveness of a network project is its ease of use - usability. And when a person first gets acquainted with a site or application, his first impressions often determine whether he will return to this product again and again. In other words, usability is one of the key properties of a website that creates (or destroys) an audience. Let's look at some common and often overlooked user behavior scenarios and ways to improve usability at the most important stages of your website or mobile app experience.

Clear and informed communication

1. Choose font sizes

People are increasingly surfing the web using mobile devices, and for some sites the mobile version has become the main one. And this dictates its requirements for font size, because the screens of smartphones and tablets are much smaller than conventional monitors and laptops. The rise of responsive design has played a big role in bringing attention to the font issue.

Often, website creators focus on the ease of use of buttons, icons, tabs and other clickable objects. But few remember the convenience of clicking on text hyperlinks. Therefore, always conduct “live” tests of the comfort of clicking on hyperlinks with your fingers.

2. Write informative error messages

Many people neglect the selection of wording for error messages, considering them something secondary. Developers usually know how to avoid incorrect behavior in their products and therefore rarely encounter such messages.

But real users cannot boast of this.

If the user does not understand well what to do after an error message appears, then he may abandon your product altogether. Therefore, the message text can be playful, but at a minimum it should help users quickly figure out the reason and avoid failures in the future.

Try to avoid specialized terms, write messages in common, understandable language. There is no need to dump information on the user that he cannot use. If desired, even validation errors can be rephrased to make them sound friendlier. Compare two versions of the same screen from the same popular operating system:

Convenience of input forms

3. Simplify your password requirements

Today it is common to require users to create complex passwords. But this needs to be done positively, with encouragement, and not as an insurmountable harsh condition. Many input forms look very nice, but are completely inconvenient. Although the convenience of this interface element can have a decisive impact on the success of the entire product. Unsuccessful solutions can alienate users already at the stage of entering their login and password, or during checkout. Therefore, it is necessary to pay close attention to the ease of use of forms.

For example, historically, select boxes have been difficult to style. In most cases, developers try to hide standard objects and clone them as more suitable DOM elements. In this case, data from the “clones” is transferred to the input of the original elements.

You need to spend a lot of time just to be able to control the design of a regular drop-down menu. But is the game worth the candle? We must not forget that mobile users very quickly get used to the appearance and behavior of standard interface elements used in their operating systems.

For example, users Windows Mobile They expect that when you select a drop-down menu, the list of options opens in full screen, separate from the field itself. While Android users expect to see a modal window. And if, for the sake of your design ideas, you do not meet such expectations, then users may not appreciate your solutions at all. They will likely have a harder time using your product, which will negatively impact their experience. In other words, by changing the design of standard elements you will create more problems than you solve.

4. Use the correct input forms

Many people advise using data formatting in input fields. For example, if you add input, input , then the layout automatically switches as you type. However, this looks strange and does not help at all, but interferes with filling out the form.

If you have several input fields, it is better to assign one data type to them. It is much easier for the user when the same layout is used when entering, and jumping from letters to numbers and back only adds additional confusion.

It makes sense to use different input types in HTML 5 only when there are as few fields on the screen as possible. A good example is Google's two-factor authentication: there is only one field in which you can only enter numbers. Automatic switching to a digital layout would be very appropriate here.

But in more complex forms, such “helpfulness” and “initiative” of the keyboard can be annoying, since it forces the user to mentally switch and increases the cognitive load. Especially when switching from letters to numbers, and vice versa:

5. Create a vivid and memorable first-time experience

If a newcomer is disappointed with your site or application from the first seconds, then this is akin to the rudeness of the owner when meeting guests. No matter how delicious the treats are, the meeting will be hopelessly ruined.

A developer can easily lose sight of some scenarios for the primary use of his product. For example, it’s hard to call a screen overflowing with icons or sections intuitive. You can soften the first use experience, for example, with helpful hints and warning messages, which can be easily turned off.

6. The devil is in the details

All sorts of little things can go a long way in making your product easier to learn. For example, the familiar standard cursor in the first input field will allow you to quickly and painlessly dive into the interface. Ideally, the user should navigate the site or application on autopilot.

New users' lack of experience with your product means that some functions may cause serious difficulties. Remember Paperclip from Microsoft Office, which suddenly came out and offered its help, which was more annoying.

Directing a successful first user experience is like walking on a tightrope - it's very difficult to get everything right, but if you succeed, it is more than rewarded with user recognition. For example, the Stumbleupon project is very successful in teaching beginners its basic capabilities.

A good solution may be to integrate the training process into the normal procedure of using the product. Let's say that when archiving letters in a mail application, you can display the message “Did you know that you can start archiving using Ctrl + K?” This approach allows for a much gentler training experience compared to traditional “whole application overview” style lessons.

7. Microcopying should not be used as an afterthought.

“Microcopying” refers to all the little instructions and confirmations used in applications.

• "Don't worry, we won't let your mailing address leak"
• “You don’t need a bank card for payment”

Microcopy is an ideal tool for building trust and improving the user experience. They can also be very effective in training users who are not very confident with your product.

For example, linking a bank card or providing an email is quite controversial for many users. And unless you represent a time-tested, reputable brand, people will always be wary of providing you with such information. Microcopies can help resolve user doubts

8. Always provide context

Users hate the lack of context. Considering the information flow they constantly have to cope with, people try to abstract from everything unnecessary on the screen and focus on specific things. When infinite scrolling came into fashion, many sites faced one problem: as soon as the user clicked somewhere by mistake, the current position was reset. This is especially unpleasant in cases where a person has scrolled very far down the contents of the site. After just five scrolling screens, an accidental click can become a source of irritation.

Most sites today solve this problem using modals and other schemes typical of single-page applications. For example, on Pinterest, when you click on a tile, it opens not a new page, but a modal. This allows you to examine the details of a particular post without losing your current position or waiting for a new page to load.

The Facebook mobile app uses the same approach: if you click on a photo in an album, it will load in a full-screen modal. It looks almost as if a new page had opened, but when you press the back button you are gently brought back to context.

Users, especially mobile users, do not like it when the screen content changes unexpectedly. This should only be done in response to explicit user actions. For example, news feeds on Twitter and Facebook are forced to update. Otherwise, you would get an unpleasant situation when you are reading a message, and at this time a background process updates the feed and dumps a bunch of new messages at you, which bury what you read before. It's like a gust of wind ripping a newspaper out of your hands.

Fortunately, Twitter delicately informs the user when new messages appear and waits for the user to give the download command. That is, a person has complete control over changing the contents of the screen and is not confused.

15. Break large, complex tasks into smaller operations

Nobody likes filling out a full page form. Therefore, all kinds of settings sections, registration forms and profiles will only benefit from a logical division into smaller blocks. Use cards, sections, tabs, sidebars for this. It will be easier for a person to perceive the need for numerous fillings, even if there are several logical blocks on one page.

Dividing into logical blocks subjectively simplifies the task of setting up and filling out numerous fields and prevents the feeling of unpleasant work. This is especially important for mobile applications and website versions.

For example, Facebook has spent several years honing its grouping of privacy settings to make them easier to configure. But once upon a time this was such a non-trivial task that many simply did not touch these settings. By dividing them into sections, the percentage of users who engage with these pages rather than avoid them has increased.

Another good example of breaking a large task into logical blocks is the ordering process. For many web applications, this procedure becomes a critical point, an indicator of the success of the project. When placing an order is divided into stages, then as they go through them, users get a feeling of progress, progress, even if not everything goes smoothly.

Also, dividing into logical blocks makes it easier to detect and solve emerging problems. After all, no one wants to deal with a message like “Could you please correct the following four points?”

If you force the user to fill out all the fields or configure settings on one, complexly organized page, then you are putting your eggs in one basket. Any error will prevent all other data from being sent.

The same can be said about forms of donation, especially in mobile projects. You probably want the user to think: “Wow, how simple it is” instead of “Yeah, this takes time.” Improving the usability of forms directly affects the profitability of the project.

Most of the above points are quite simple when considered individually. But if you work with this every day, your eyes often become blurry. Therefore, it is important to be able to step back, abstract and look at your brainchild through the eyes of a “new user”.

Tags: Add tags

How can you improve the usability of a website and make it more convenient and enjoyable for all your visitors and readers? Probably every webmaster and blogger asks himself this question when looking at his SDL. I admit, I also puzzled over this more than once. So I decided to think about it again and write down, if not all, then the most important tips and points to improve the quality of sites for people. Here I will touch on ways to improve content quality, site speed, navigation, web design, as well as many other points.

Unfortunately, improving the usability of a website can take a considerable amount of time. There's a lot here technical points that need to be thought through and. However, this matter is worth your time. Therefore, if you want to retain your visitors for as long as possible and reduce the bounce rate, then think about increasing the convenience for your visitors from the very beginning of the project.

This is never a bad idea, as it allows you to determine in advance how visitors will interact with your site and how long they will stay on it. In this material I want to give you several useful tips, which will greatly help you increase the dwell time and user experience on your website. I also recommend you read. They will be very useful to you!

Content quality

No matter where you look, content will always be king key feature. It doesn't matter whether it's SEO promotion, usability or some advertising campaigns. The quality of published material has always been, is and will be the main tool of your site. Therefore, try to publish material that would not cause any negative emotions from the visitor. In reality, to improve the quality of your content, there are a number of basic points you need to follow:

• interesting, useful and unique material- this is one of the important points in increasing the quality of your materials. If you publish content that no one needs and is useless, then you can immediately forget about further development your resource. No one will visit it, since there will be nothing useful in it. Therefore, try to give useful and interesting tips for your readers!
• without water and long sheets— long text canvases are not in fashion now! Write only on the topic and not too much. It will be difficult for the user to master the first time great amount text. However, this does not mean that you should not think about revealing the topic. If you see that the topic is quite extensive for one post, then break it up into several posts. This will not only benefit the convenience of the reader, but also promote the site. Also, don't try to write too small posts. This has a very bad effect on uniqueness. If possible, add your thoughts, observations, or anything else useful. The optimal text is 500 - 1000 words. The maximum ceiling is 1500 - 2000 words. So focus on these numbers!
• beautiful post design- this is also a lot important point to improve the quality of their materials. Always dilute the text with pictures. They are very good at improving the comprehension of the material and giving a break when reading. You should also use subheadings in your test whenever possible. They are very good at helping you navigate large amounts of information. The possibility of introducing bulleted lists, tables and various audio and video materials. This can greatly improve the quality of the content.

• highlight text- this will help focus the user’s attention on some very important points. More important words highlight in bold. Submit the necessary proposals to beautiful blocks. For example, create a text block " Attention" or " Quote". However, do not under any circumstances overdo it. Select only the essentials.
• linking- a very important point not only in website promotion, but also in its usability. By offering your users additional articles on a topic, you not only increase the time a person spends on the site, but also offer him additional tips on similar topics. Also make sure that all links are easily visible and do not blend into the general background. Be sure to check availability broken links. It’s unpleasant when the user receives an error when navigating. Another good option would be to withdraw similar posts in the form of miniatures. It will be very attractive!
• write without errors- this will improve the quality of the content. Few people like to read text with big amount gross mistakes. Therefore, always check for errors not only in new, but also in old entries. For example, the text can be checked for errors in the same . I am now slowly correcting my old entries myself.

Website loading speed

Fast loading of your website pages also affects the usability of this project. Nobody likes to wait a long time for the necessary material to download. If your site loads very slowly, then visitors to such a site will definitely not stay for long and will go to look for information elsewhere. Therefore, always try to monitor the speed of your website.

You can check the speed of sites in various services. For example, I like to use the Pingdom service. Try to ensure that your project loads no longer than 3 seconds. There are many ways to reduce website loading speed:

• installing and configuring the caching plugin- this will significantly help you speed up your site, as well as reduce the load on your server. Try to use all types of caching.
• image optimization— reduce the size of photos without losing quality and crop unnecessary areas of the picture. This will reduce the page size and, consequently, its loading time.
• include only necessary functions — stop using unnecessary plugins, modules and scripts. If possible, disable unnecessary functionality in the site itself and do not chase too sophisticated templates for the site. As a rule, such themes contain a lot of unnecessary code, which affects the site’s loading speed.
• database optimization— don’t forget to clear out a lot of unnecessary junk in your database. If you have a multisite, then take care of creating an advanced database. This way you can significantly reduce the load on your server. If your site is managed by , then I recommend that you take a look.
• switching to a more expensive hosting plan- choose not only good hosting, but also the most suitable tariffs in it. If, after the above optimization, you are still not completely satisfied with the loading speed of your site, then try forking out for a more powerful and expensive plan. You may need a dedicated server for your capabilities.

In general, such moments in website optimization should not be missed either. A person should easily navigate to the pages of your site. However, it’s also not worth it too much. This can have bad consequences for users.

Convenient navigation:

Menu

A convenient website simply must have user-friendly navigation. However, in the pursuit of convenience, the main thing is not to overdo it. This is especially true for drop-down menus. On some sites it is made so varied that navigating through it can cause some kind of negativity. There are a lot of categories of 2-4 levels (picture below). You point at a certain category, and behind it another, and another, and another is revealed. All you have to do is accidentally pull the mouse and the entire menu collapses. Thus, it turns out to be some kind of accordion.

This button accordion is quite difficult to navigate, so be careful when creating a pop-up menu. Don't make categories more than second level. Among the large number of such sections, it will be more difficult for the user to navigate the site. The ideal option would be to create first-level categories. However, this does not always work out. If your topic is very broad, you may sometimes need to use second-level rubrics (subcategories). They share the theme of the site very well. This way you don't have to lump everything into one category.

Tell me, why can’t we create new categories? Yes, you can create it, but such categories will take up additional space. And subheadings can specifically separate topics, and besides, such sections can be hidden in the main heading. This saves a lot of space. Therefore, if you plan to use a considerable number of headings, then it may be worth dividing some headings into subheadings. Just don’t use categories higher than the second level, otherwise it will turn out to be a bastard.

In general, you need to thoroughly think through the navigation on the site. If your site has a lot of space, then the categories themselves can also be grouped into various widgets. That is, according to the topic, all sections are divided into several widgets. This navigation you can see it on my blog. Now it is used there. There are also hidden subcategories.

Another good option would be to use graphics in navigation. People perceive graphics faster and better than simple text. Therefore, if you have the opportunity to display various explanatory icons next to the headings, then under no circumstances refuse this. This will only be a plus for you!

Also, in the posts themselves, you need to display a link to the categories in which these posts are published. This way the user will know which category the material belongs to and can then easily navigate to that category. If you use tags, then you also need to display them in your posts. This will give you one more additional navigation. For rubrics, I would recommend you to use bread crumbs.

Site Map

The main tool for convenient navigation is a site map for visitors. This is a kind of site content in the form separate page. It contains links to all project records. Everything in one place so to speak! This is very convenient for visitors. They will be able to quickly and clearly view all the posts on your site. There is not even a book that does not include content for convenient search. So why burden your project with this matter. Therefore, be sure to make such a site map for yourself.

Also, don’t lump everything into one pile in your sitemap. Group all content into sections of specific topics. All these sections highlight it in a different color to make it easier for the user to navigate among a large number of links. Also, as I already said, it would not be superfluous to attach separate graphic icons to each section. If you have a very broad topic, you can make several child maps for each subtopic. Just don't do too much!

This way the user can quickly select the subtopic he needs and then browse through it necessary materials. This is very relevant when you have several hundred posts published on your site. Thus, the user will not need to flip through the pages several times to find only the appropriate subtopic and sections for it. In the future, I also plan to create such an advanced site map.

Page navigation

It is also worth taking care of page navigation. On the site, such navigation is simply necessary. It should be installed on home page site. There are also people who specifically refuse such navigation. I think this is wrong! Even if a menu and site map are available, page navigation is still necessary. This way, users can easily go to second-level pages and view announcements of various posts there. Such navigation can be used in the form of numbers or in the form of text.

If your site has a very large number of comments, then be sure to provide page navigation for comments as well. This will make it more convenient for the user to navigate big flow messages. Display no more than 50 - 60 messages per page.

Also, you should not make a site map in the form of one huge text canvas. If the number of posts on your website or blog is not small, then be sure to include page-by-page navigation on the site map. This will be very convenient for users as no one likes those endless scrolling pages. Also make sure that your site has a site search form.

Web design

- this is the face of your site. If such a face scares the visitor or imparts some kind of negative character, then the person will simply run away from such a site and is unlikely to return to it. Therefore, you should also take care of clothing for your project. I want to tell you that a lot depends on the theme of the site. The main thing here is related to this site in a certain topic. Of course, you are not required to create any masterpieces. However, try to select templates that would best suit your topic and your readers.

If in doubt, the Internet is full of templates. They are divided into separate categories of topics. Choose your direction and view suitable templates. In general, it depends on the topic of the project. If for simple blog quite simple and easy free template, then for a large portal you need the most sophisticated template. Maybe even in . For commercial websites, you shouldn’t use simple templates either. You need to look for something beautiful and attractive to attract more visitors.

For commercial websites, I would recommend buying premium templates or ordering a template from scratch. All your sales can largely depend on. Therefore, do not spare money on a good and quality web design. However, in pursuit of quality and beauty, you should not go too far. All this excess can play a cruel joke on you. Templates that are too colorful and stuffed with various types of blocks can scare off visitors. Therefore, know when to stop! Use only those features that are really needed. There shouldn't be anything superfluous!

Availability is also an important point mobile version and applications for your website. Nowadays, with the rapid development of the network and technology, more and more people prefer to use Mobile Internet. It's fast and convenient! Therefore, you definitely need to take care responsive design website and possibly installing mobile applications. So you have a guarantee that when you log in with mobile device to your website, the user will feel comfortable in it.

For quick access all navigation elements will be in the appropriate part of the page, all buttons will be the appropriate size for the device, and browsing the content will be much more convenient. In general, take care of at least the mobile version of the site so as not to lose most of the traffic in the future and improve the usability of the site on mobile devices.

The font itself on the site is of great importance. Inconvenient and bad font will only rape the user. Therefore, do not try to run after beauty. Use only standard ones in your posts. simple fonts. In addition, they are supported by all browsers. I would recommend using the Verdana font in your posts. Font size is also important. Text that is too small is very difficult to read. Therefore, I recommend using a font size of 13 - 14 point.

Be careful with the quantity and quality of advertising on the site. As a rule, this WordPress engine. A large number of different ads, as well as terrible pictures in the blocks, will quickly scare away the visitor and leave only a negative response about your site. So think about what you are putting on your site.

Give Opportunities convenient function commenting on the site. You need to disable the captcha and find other ways to combat spam. If there are huge discussions on a project, then it is better to make tree-like comments and page-by-page navigation to them. Each message should display the commentator's gravatar. Some people hide it on purpose. You can't do that! It turns out that it is not clear who answers to whom. And it’s very convenient for communication. Therefore, such gravatars are always needed and preferably the most optimal size. Images that are too large or too small are unnecessary.

Well, be sure to provide the most beautiful and high-quality subscription. This should include a subscription to Recent Entries site, for new comments on a specific topic, as well as subscription to social networks. This entire process should be clear to the user and easy to use. And for bloggers, I would recommend sticking with . This is also very important!

Conclusion

That's all! Or not? If you know any other ways to improve website usability and reduce bounce rates, be sure to write below in the comments. And so, as you can see, there are quite a lot of ways to improve the quality of the site. In theory, this post should have been divided into several articles. It turned out to be too voluminous. However, the topic is very important. In the second part of the topic about I talk about the importance of content, links and user direction.