How to make convenient ajax-sites
Despite the fact that AJAX has become the de facto standard for implementing many interface elements, still most of the developers make websites so that it is very inconvenient to use them.
Immediately I will say that there are such web applications that are devoid of the disadvantages listed below (for example, Gmail, Habrahabr). But these are happy exceptions, only confirming the rules.
First of all, the state. The one who read "The mental hospital in the hands of patients" Cooper knows what it is about. A folding knife is easy to use because it has only two states: open and complex. And in the case of the site, you have a very large number of states. And if the brain still gets used to the uncertainty in terms of links with the time - the user knows that he is on the same page, and all his actions are limited to it alone, which affects the relative ease of modeling various states across the pages - then this doesn’t happen with AYAX.
')
Pretty Gadget finally found a normal ajax site!
However, this fact does not care about the typical programmer. Because the brain of a programmer is so powerful that he can simulate all the states in his head. What does this lead to?
To the fact that the traditional borders of the page are erased, and modeling for a simple user of the site conditions becomes very heavy. I think everyone dealt with flash sites, especially some artists, and remember the inconvenience of using such a site.
The solution is to use Ajax when the user is provided with “virtual” pages, when the functionality is grouped in such a way that there are certain logical centers, from which there are many Ajax requests related by one responsibility. For example, in Gmail it is clearly visible: here is the list of letters, here is the letter page, and here is the settings page.
But this is only the tip of the iceberg. Consider more specific bugs and flaws.
This is one of the most common types of problems that no one thinks about. The following options are common.
Inability to send a friend, or add a page to your favorites. The developer did not take care to use any signs of the state in which the AYAX application is located in the URL. And in order to send a link to a friend in ICQ, you also need to write a text in the style of “click there, go here, click it”, almost remove the screencast. It is clear that if the light suddenly turned off accidentally, the user will have to perform the same actions again, which terribly enrages and greatly reduces the core of the site’s audience.
Separately, I will note the forms that do not remember the entered data, showing messages about incorrect filling. This is just tryndets, gentlemen. Remember, the main law - DRY - works for the user first. The user must do a minimum of clicks, and should not do anything twice. Plus, autosave in important forms is a must, if we are talking about admin applications.
The solution is to add some markers to the URL that return the application to the desired state, for example, ajaxsite.ru/#myStateInfoGoesHere
Since in the first paragraph we already understood that users were accustomed to thinking of pages by virtue of the work of the brain, and due to the history of the Internet, the idle back / forward buttons that so infuriated flash sites rose from the ashes after gradually dying flash in Ajax sites. Nothing is so annoying when you went to some unrealistic section of the 100,500th navigation level, and there is no button like “return to the list” on the page itself from the developer, and suddenly you discover “Back” that has saved you since the days of Netscape browser), does not work!
The "back" and "forward" buttons should work. I immediately close such a site where this rule does not work, because I don’t want to do a million clicks a second time — the next site is waiting for Google in the list (your competitor with normal, adequate programmers who test their site themselves through the eyes of users).
Recently, I went to the site of a startup that implemented my long-standing idea. And I was very unhappy - from the iPad it was loading very slowly, largely due to the fact that each of the small elements of the administrative interface was loaded by an Ajax. I click to open the list - and it loads ... If you hit a page on a million small pages, you need to know that this can often lead to its slow work. Especially if the developer did not take care to send parallel requests to the server and each trace element made an Ajax.
The number of AJAX blocks on a page should be limited to a reasonable number. . To load the next page of results into a table, when many queries to the database are performed to generate the header, menu, etc. - it is reasonable. But in the case of the configuration, when you have tabs and inside the settings tree, load each tab with an Ajax, every popup, every element of the tree (ExtJS fans first of all stand) is evil, unequivocally, gentlemen.
The bottom line of the browser in which we once wrote with the help of window.status creeping text manipulations has gone into the past. Eh, there was a time in the 2000s, when it was not called AYAX, but DHTML, and was used in moderation, and javascript.internet.com and dynamicdrive.com with tutorials knew every second, and wrote to JS, understanding, not stupidly over brakes without knowing the insides of the frameworks, as beginners writing about the virtuosic possession of JavaScript do.
But I digress :)
Only half of the sites report, like Google Docs, that they are saving or loading something there, using inscriptions or all of the boring pictures with rotating stripes. Now the situation is better, but before that you worked with the site, and suddenly the current window disappeared and IT got out, what you pressed a minute ago (hi server-side brakes).
Tell the user about the process of loading something so that it is ready for changes on the page.
Very often a trendy effect is applied. For example, loading as content scrolls instead of traditional paging. Paging has a billion benefits - and the link can be given, and it’s understandable where you are. And when you scrolled photos on VKontakte, closed it accidentally and opened shift + ctrl + T - if you please, scroll again.
Well, the most common cant - this is when the fashion effect applied to the place becomes more complicated. You know how annoying it is when you click “load more” every 10 messages, moving the mouse back and forth, instead of just scrolling. And simply because the programmer was too lazy and didn’t do the upload with the scroll.
Applying the effect, be ready to answer yourself and the user, why the heck did you apply it, besides fashion or beauty.
Also very annoying. Firstly, forms are not sent by pressing Enter (what the desktop interface teaches). Secondly, common shortcuts, such as Ctrl + left / right to navigate pages, do not work (hi Google, Yandex beauties). Suddenly a pop-up modal popup does not disappear when you press Escape.
If your users are not the Griffin heroine who walks without straightening and looking into her mobile device, do not forget about the user's habits and add keyboard support.
I think you yourself can easily find a dozen more examples. And if not, and you, like me, are a programmer and it is easy for you to work with your application, remember your real users. Try looking at apps with their eyes.
You help in science. The brain, as is known, with a weight of 1/50 of the body at the time of maximum load consumes up to 25% of the total energy of the body. Therefore, he strives to minimize his work in every possible way. That is why, but completely because of incomprehensible to psychologists who do not know biology, there is procrastination. Therefore, we are lazy and therefore we like everything simple and do not like everything that requires extra energy.
Therefore, measure the number of clicks to perform basic user stories on your site, the number of mouse movements, the number of keystrokes, and minimize these numbers in every way. Stupid and methodical. Here you can praise Google - check it out, you enter the text, and he is already starting to search and show results. Cool done.
Write in the comments your examples of annoying moments in Ajax applications and sites, and exemplary sites.
upd. from comments:
Immediately I will say that there are such web applications that are devoid of the disadvantages listed below (for example, Gmail, Habrahabr). But these are happy exceptions, only confirming the rules.
1. The difficulty of navigation
First of all, the state. The one who read "The mental hospital in the hands of patients" Cooper knows what it is about. A folding knife is easy to use because it has only two states: open and complex. And in the case of the site, you have a very large number of states. And if the brain still gets used to the uncertainty in terms of links with the time - the user knows that he is on the same page, and all his actions are limited to it alone, which affects the relative ease of modeling various states across the pages - then this doesn’t happen with AYAX.
')
Pretty Gadget finally found a normal ajax site!
However, this fact does not care about the typical programmer. Because the brain of a programmer is so powerful that he can simulate all the states in his head. What does this lead to?
To the fact that the traditional borders of the page are erased, and modeling for a simple user of the site conditions becomes very heavy. I think everyone dealt with flash sites, especially some artists, and remember the inconvenience of using such a site.
The solution is to use Ajax when the user is provided with “virtual” pages, when the functionality is grouped in such a way that there are certain logical centers, from which there are many Ajax requests related by one responsibility. For example, in Gmail it is clearly visible: here is the list of letters, here is the letter page, and here is the settings page.
But this is only the tip of the iceberg. Consider more specific bugs and flaws.
2. Reset state on close
This is one of the most common types of problems that no one thinks about. The following options are common.
Inability to send a friend, or add a page to your favorites. The developer did not take care to use any signs of the state in which the AYAX application is located in the URL. And in order to send a link to a friend in ICQ, you also need to write a text in the style of “click there, go here, click it”, almost remove the screencast. It is clear that if the light suddenly turned off accidentally, the user will have to perform the same actions again, which terribly enrages and greatly reduces the core of the site’s audience.
Separately, I will note the forms that do not remember the entered data, showing messages about incorrect filling. This is just tryndets, gentlemen. Remember, the main law - DRY - works for the user first. The user must do a minimum of clicks, and should not do anything twice. Plus, autosave in important forms is a must, if we are talking about admin applications.
The solution is to add some markers to the URL that return the application to the desired state, for example, ajaxsite.ru/#myStateInfoGoesHere
3. Non-working navigation buttons
Since in the first paragraph we already understood that users were accustomed to thinking of pages by virtue of the work of the brain, and due to the history of the Internet, the idle back / forward buttons that so infuriated flash sites rose from the ashes after gradually dying flash in Ajax sites. Nothing is so annoying when you went to some unrealistic section of the 100,500th navigation level, and there is no button like “return to the list” on the page itself from the developer, and suddenly you discover “Back” that has saved you since the days of Netscape browser), does not work!
The "back" and "forward" buttons should work. I immediately close such a site where this rule does not work, because I don’t want to do a million clicks a second time — the next site is waiting for Google in the list (your competitor with normal, adequate programmers who test their site themselves through the eyes of users).
4. Brakes
Recently, I went to the site of a startup that implemented my long-standing idea. And I was very unhappy - from the iPad it was loading very slowly, largely due to the fact that each of the small elements of the administrative interface was loaded by an Ajax. I click to open the list - and it loads ... If you hit a page on a million small pages, you need to know that this can often lead to its slow work. Especially if the developer did not take care to send parallel requests to the server and each trace element made an Ajax.
The number of AJAX blocks on a page should be limited to a reasonable number. . To load the next page of results into a table, when many queries to the database are performed to generate the header, menu, etc. - it is reasonable. But in the case of the configuration, when you have tabs and inside the settings tree, load each tab with an Ajax, every popup, every element of the tree (ExtJS fans first of all stand) is evil, unequivocally, gentlemen.
5. Not obvious what is happening on the page.
The bottom line of the browser in which we once wrote with the help of window.status creeping text manipulations has gone into the past. Eh, there was a time in the 2000s, when it was not called AYAX, but DHTML, and was used in moderation, and javascript.internet.com and dynamicdrive.com with tutorials knew every second, and wrote to JS, understanding, not stupidly over brakes without knowing the insides of the frameworks, as beginners writing about the virtuosic possession of JavaScript do.
But I digress :)
Only half of the sites report, like Google Docs, that they are saving or loading something there, using inscriptions or all of the boring pictures with rotating stripes. Now the situation is better, but before that you worked with the site, and suddenly the current window disappeared and IT got out, what you pressed a minute ago (hi server-side brakes).
Tell the user about the process of loading something so that it is ready for changes on the page.
6. Incorrect AJAX Application
Very often a trendy effect is applied. For example, loading as content scrolls instead of traditional paging. Paging has a billion benefits - and the link can be given, and it’s understandable where you are. And when you scrolled photos on VKontakte, closed it accidentally and opened shift + ctrl + T - if you please, scroll again.
Well, the most common cant - this is when the fashion effect applied to the place becomes more complicated. You know how annoying it is when you click “load more” every 10 messages, moving the mouse back and forth, instead of just scrolling. And simply because the programmer was too lazy and didn’t do the upload with the scroll.
Applying the effect, be ready to answer yourself and the user, why the heck did you apply it, besides fashion or beauty.
7. Lack of keyboard support
Also very annoying. Firstly, forms are not sent by pressing Enter (what the desktop interface teaches). Secondly, common shortcuts, such as Ctrl + left / right to navigate pages, do not work (hi Google, Yandex beauties). Suddenly a pop-up modal popup does not disappear when you press Escape.
If your users are not the Griffin heroine who walks without straightening and looking into her mobile device, do not forget about the user's habits and add keyboard support.
The general idea of ​​designing ajax applications
I think you yourself can easily find a dozen more examples. And if not, and you, like me, are a programmer and it is easy for you to work with your application, remember your real users. Try looking at apps with their eyes.
You help in science. The brain, as is known, with a weight of 1/50 of the body at the time of maximum load consumes up to 25% of the total energy of the body. Therefore, he strives to minimize his work in every possible way. That is why, but completely because of incomprehensible to psychologists who do not know biology, there is procrastination. Therefore, we are lazy and therefore we like everything simple and do not like everything that requires extra energy.
Therefore, measure the number of clicks to perform basic user stories on your site, the number of mouse movements, the number of keystrokes, and minimize these numbers in every way. Stupid and methodical. Here you can praise Google - check it out, you enter the text, and he is already starting to search and show results. Cool done.
Write in the comments your examples of annoying moments in Ajax applications and sites, and exemplary sites.
upd. from comments:
lesha_penguin 8. The inability to open the link in a separate window / tab.
For example, in the online store it is impossible to open two products at the same time for comparison / selection in two tabs. For this I want to kill.
alienator Supplement 5: report not only on the ongoing process, but also on its completion.
Also: if some information is used to build several blocks on a page, but you need to update them all. One well-known bank did not immediately add that if the user clicked the “Update balance” button in the header of a specific account, then the resulting balance does not interfere with updating in the list of accounts in the left column.
mib Even when developing an AYAX site, do not forget about indexing: If the main content (the one that changes when navigating the site menu), is loaded by the AYAX - search engines most likely will not index this content.
I use this solution: Each menu item is initially a link to a real page, i.e. / about / home / settings / news / 5 etc.
And when loading a javascript, clicks on these links are intercepted, and only Ajax-content is taken from the server, and not the whole page.
Source: https://habr.com/ru/post/169955/
All Articles