Визуализация AJAX запросов

Использованием Ajax в веб-приложениях сейчас уже никого не удивить. Однако, неправильная подача оповещений о происходящем запросе может привести пользователей в замешательство. Вот почему важно помочь пользователям легко определять, что происходит с системой и не позволять им делать ошибок во время Ajax операций.

Держите пользователя в курсе событий

Индикаторы выполнения должны быть показаны как только начался запрос и спрятаны как только получен результат запроса. Не раз встречался с ситуациями, когда результат запроса уже пришел, а индикатор остается виден до сих пор (или еще хуже, в некоторых случаях не было вообще никаких визуальных представлений о том, что происходит).

Простые индикаторы

Простые Ajax индикаторы служат визуальным оповещением о выполняющемся запросе. Они могут быть показаны в виде простого текста или изображения, как правило, анимированного.

• Если в текстовом виде, то не забудьте указать соответствующее смысловое сообщение, например, "Отправка электронной почты ...". Сообщения типа "Ожидание ..." может запутать пользователей. Чего я жду? Что-то случилось с системой?
• Если это анимированное изображение, то обычно подразумевается какая-нибудь "крутелка" в виде GIF.

Есть один замечательный ресурс, на котором можно подобрать анимацию по своему вкусу.

Индикаторы выполнения

Если операция требует длительного времени выполнения, в таком случае следует использовать показатели прогресса. Этот тип индикаторов представляет информацию в реальном времени: сколько времени прошло и сколько осталось до конца. Индикатор прогресса может отображаться вместе с сообщением о том, что происходит в данный момент. Dropbox предоставляет графический индикатор статуса, а также текстовые сообщения о состоянии.

Расположение индикатора

Независимо от того, какой тип индикатора вы выберете, вы должны быть уверены, что он четко виден пользователю. В зависимости от их назначения, показатели могут быть размещены в том же контексте, что и элемент их вызвавший, либо возможно расположить их централизованно в одном месте для все запросов, как например на Gmail.

Отключайте элементы пользовательского интерфейса во время Ajax запроса

Во время выполнения Ajax запроса пользователь может легко начать новый, который может привести к риску повреждения данных. Например, двойным нажатием на кнопку отправки сообщения, пользователь может вызвать ошибки приложения, хотя это безусловно не его вина. Это можно легко предотвратить путем отключения элементов интерфейса пользователя во время Ajax запроса. В зависимости от конкретного случая, вы можете отключить либо один элемент (кнопку отправки сообщения), либо вы можете отключить весь интерфейс. Элементы интерфейса должны быть отключены в начале запроса и включены при завершении запроса.

Выделяйте обновленные области

После частичного обновления страницы важно выделить полученный результат. Цель этого метода заключается в привлечении внимания пользователей к обновленной области и дать им возможность легко отреагировать на обновление. Это можно сделать выделив обновление в течение одной-двух секунд, а затем вернуть область в исходное состояние.

Заключение

Чтобы сделать Ajax функциональность более понятной пользователю, вы должны предоставить информацию о состоянии системы во время запроса и после завершения запроса. В общем, это можно свести к нескольким пунктам:

• Использовать текстовые и(или) анимационные индикаторы;
• При длительных запросах использовать показатели прогресса;
• Отключать элементы интерфейса во время запроса для предотвращения возможных ошибок;
• Выделять области, обновленные Ajax;
• В некоторых случаях рекомендуется показывать сообщение с указанием статуса проведенной операции.

Перевод статьи UPD: добавил еще один ресурс ajaxload

Новый рекламный формат в наших телеграм-каналах.

Купить 500 символов за $150