Improve usability resources and improve. "Back to Top" navigation button. Break large, complex tasks into smaller operations
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 directs the user to various parts screen:
The second transition is softer. It clearly demonstrates the process of transition between sections, helping users understand what is happening and see the connections 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 3D 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. The implementation of animation is also of great importance. 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 understand what is happening (especially if the movement is happening very quickly). Therefore, it is very important to implement animation correctly.
It's 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 different effects and choose the one that suits all your criteria best.
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. Soon after release 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 that animations be minimized.
Additionally, you should conduct usability testing to ensure that all users, including those with visual impairments, 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 is more 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. Lack of testing for 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 animation (especially complex ones) is running on 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-designed 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.
- 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 moments formation of attractiveness network project is the 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 mobile version became the main one. And this dictates its requirements for font size, because the screens of smartphones and tablets are much smaller than regular 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 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 general terms, in clear 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 customary 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 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 get used to it very quickly appearance and behavioral characteristics standard elements interface 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 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. A good example is two-factor Google authentication: 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 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”
For example, binding bank card or providing 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 doesn’t open new page, and modal. This allows you to explore 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 logical separation 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 it was so 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 blurred. 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
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, perhaps, with the definition of the usability concepts(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 potential clients or, as previously mentioned, to increase 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 website 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? different groups 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, once you answer a number of these questions, you can be sure that you are still competitive and can make 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 the keywords that users are searching for 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. This technique is also 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 into publications 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 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. What I mean by this 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 right product or material at all.
13 ) Be sure to add it to the site 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 search query “buy a dress” and clicked on the first one advertisement to the site and what do I see in the title? Mondigo.ru. Yes, I agree good welcome so that the user remembers the site, but he is 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 refusing this method collecting email addresses, because this will only worsen yours.
19 ) Know your limits when monetizing your site. Too many ads can scare you away or prevent you from finding them at all required material to the reader.
20 ) Remove or make it possible to log in through various social media. 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 everything 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.
Today we bring to your attention a set of optimization tips, the effectiveness of which is supported by real and very reliable cases.
You are probably already familiar with the results of some studies, but we will try to look at them from a slightly different angle.
1. Forget the “three-click rule”
In his book Taking Your Talent to the Web(2001) Jeffrey Zeldman, a well-known figure in the world of web design, put forward the idea that “the three-click rule helps create websites that have an intuitive and logical hierarchical structure.” That is, if a user needs to make more than three clicks to access the piece of content they are looking for, they begin to experience frustration because it requires a lot of effort and is perceived as a waste of time.
However, in reality, most users who are truly motivated to complete a targeted action will not think to stop just because they have already made three clicks without achieving the goal. If you look at the main reasons for user frustration, you will find that excessive clicks do not play a big role.
And then the question arises: does the three-click rule have any scientific or empirical basis at all? In other words, are there any studies that indicate that users become frustrated after three clicks?
According to a study conducted by British web designer Joshua Porter, users who don't find the content they're looking for after three clicks are less likely to stop searching. Moreover, during the course of the study, some subjects made up to 25 clicks.
The relationship between the number of clicks and the percentage of completed tasks in cases of success (blue) and failure (red)
Ultimately, the main role is not the number of clicks, but the convenience of the interface. If it is simple and clear, a person will be pleased to use it, even if it takes 15 clicks to achieve the goal. And if a website follows the three-click rule, but is poorly designed and implemented, a person may not want to use it at all.
2. Remember the F-pattern
Jakob Nielsen conducted a study in which eye-tracking (oculography) was carried out on more than 230 Internet users as they viewed various web pages. As a result, it turned out that during a cursory viewing, users’ gaze moves along an F-shaped path.
Heat map of website page views by Jakob Nielsen
Eyetools, together with two marketing companies, Did-It and Enquiro, conducted a similar study. 50 subjects took part in it, each of whom was asked to familiarize himself with the results Google search. As a result, the gaze of all 50 subjects was more often concentrated on the upper left corner, and heat map had an F-shape.
Google results page view heat map
Designers and copywriters should take this data into account when creating and laying out content. So, the key content of the web page should be placed closer to the left side of the layout. If you pay attention, you will see that on the most popular resources, following the title there is a list of points or a set of short paragraphs that have the same F-shape. This definitely makes the text more readable when skimming quickly.
3. Loading speed matters
Nobody likes to wait. Internet users, that is, all of us, are extremely impatient people, so you shouldn’t make them wait unnecessarily. When working on your website or landing page, pay attention to page loading speed, and you won’t regret it.
So, several years ago experts Microsoft conducted a study using their Bing search engine. The purpose of the study was to identify the relationship, if any, between page load speed and a number of metrics such as user satisfaction, average revenue per visitor, and click-through data.
The study found the following correlation: a 2-second increase in page load latency resulted in a 3.8% drop in user satisfaction and an approximately 4.3% decrease in revenue. At the same time, the total number of clicks made by users decreased by 4.4%. A 4.3% decline in profit may seem like a small loss, but when we're talking about about multi-million and multi-billion dollar corporations, each percentage results in huge sums that no one wants to lose.
The relationship between the delay in loading a page in ms and changes in the following indicators (from left to right): 1) the number of unique requests per 1 user (%); 2) number of query modifications (%); 3) profit per 1 user (%); 4) total number of clicks (%); 5) user satisfaction (%); 6) time to complete a click (ms).
This example demonstrates that users are truly impatient and willing to abandon a resource that makes them wait too long. You should also be concerned about the loading speed of your site because Google has recently taken this factor into account when ranking search results.
Luckily, there are many tools available to help improve page loading and performance speeds, such as Page Speed from Google or YSlow from Yahoo.
4. Make the text more readable
Well-known usability specialist Jakob Nielsen conducted a study in which he studied the peculiarities of text perception by visitors to his website, and it turned out that people rarely read online content that is in front of them. Visitors to the average web page (approx. 593 words) read 20-28% of the text. With a further increase in the volume of text, this figure gradually decreases down to 10%.
The relationship between the number of words on a page and the maximum percentage of that number that a user can read (at a reading speed of 250 words per minute)
There are a number of techniques that can help you attract more user attention to your site's content. They boil down to increasing the readability of the text. This is, in particular, the selection keywords, using lists and frequent subheadings, and breaking up text into simple, short paragraphs.
5. Don't focus on the "fold line"
