Так как мобильное использование интернета становится все более распространенным, стало как никогда важным делать акцент на быстрой загрузке страниц и реакции на действия пользователя.
Одной из важных технологий, которую мы используем для этой цели – AJAX, то есть асинхронный JavaScript и XML. AJAX позволяет обновлять части одной веб-страницы без постоянной реализации DOM (HTML архитектура страницы) – устраняя необходимость загрузки всей страницы и способствуя более быстрому отклику на действия пользователя. Создание сайтов на 100% AJAX фреймворке – это метод, который открывает новые возможности в веб-разработке.
Мы начали создавать сайты 100% AJAX почти десять лет назад, и с тех пор узнали многое о том, как эффективно использовать его так, чтобы он улучшил пользовательский опыт. В этой статье мы рассмотрим ряд конкретных преимуществ и некоторые ограничения в этой технике.
Быстрый отклик
Ключевым элементом эффективного UX является быстрое реагирование на действия пользователя, но на стандартном веб-сайте, пользователи ждут взаимодействия, которое случается, когда запросы помещаются через HTTP (или HTTPS) на сервер, в результате чего произойдет полная загрузка страницы при каждом изменении. Этот процесс происходит с каждым щелчком мыши, запрашивая новую страницу, дополнительную информацию или увеличивая изображение; DOM перезагружается в вашем браузере – это зачастую пустая трата времени, потому что, как правило, страницы на одном и том же сайте имеют похожее содержание.
kayak
Поиск Kayak при помощи AJAX предлагает результат, как только вы начинаете печатать.
Одним из основных преимуществ AJAX является постоянный поток информации, которому не мешает загрузка и разгрузка DOM, в результате чего улучшается контроль над опытом и вниманием посетителей. С помощью AJAX веб-приложения могут отправлять данные на сервер и с сервера асинхронно, не мешая отображению существующей страницы.
Ключевое различие между стандартной реализацией AJAX и построенном на 100% AJAX сайтом в том, что в последнем основной DOM загружается при начальном посещении сайта, как правило, на главной странице; все остальное, что происходит – просто манипуляция этой первичной загрузки.
Ярким примером работы AJAX является Google Maps. При увеличении и уменьшении масштаба, перемещениях по городу в высоты птичьего полета, мгновенная информация плавно и непрерывно предоставляется. При переходе между страницами или обновлении содержимого в веб-приложении, реагирование на пользовательский ввод осуществляется соответствующим образом, например, как форма выхода, обновленная в режиме реального времени происходит без перезагрузки страницы.
google_maps
При проектировании страниц с большим количеством контента, мы используем шаблон бесконечной прокрутки AJAX, который экономит пропускную способность браузера, показывая лишь информацию, относящуюся к UX. На странице новостей этой компании, например, статьи загружаются по мере прокручивания, дополнительная информация выводится на экран по желанию читателя. Это процесс загрузки контента по требованию позволяет нашим посетителям получить ровно столько новостей, сколько они хотят, не ставя барьеров на пути их намерений.
Хороший UX
Получение контроля над тем, как веб-сайт загружает контент, создает уникальную возможность проектирования переходов страниц, загрузки анимации и визуальных подсказок, которые помогут пользователю понять иерархию сайта. Это также возможность для творчества с брендингом компании.
Веб-сайт с 100% фреймворком AJAX (потому что нет полной загрузки страницы) не обеспечивает обратную связь о своем прогрессе загрузки в окне браузера, что приводит к потенциальной путанице, если посетитель ждет в течение длительного периода времени без ответа. Вот где вступают в игру индикаторы состояния загрузки, показывая, что прогресс будет достигнут в течение некоторого времени ожидания.
estesparkmedical
Estes Park Medical Center в Колорадо использует персональный AJAX загрузчик, сочетая цвета и бренд своей организации, а также придав функциональности символу загрузки.
zillow
На сайте Zillow, списки постоянно обновляются без использования кнопки обновления браузера, предоставляя доступ к свежей информации в любое время.
Небольшие дополнения, такие как эти, помогают создать незабываемый опыт для ваших посетителей, и этого возможно добиться с помощью AJAX.
Управление путем URL, используя историю HTML5
Без отдельных загрузок страниц, сайт определяется наличием одного URL, в результате чего появляются проблемы на плохо созданных сайтах AJAX, так как пользователи пытаются сделать закладки или управлять, используя кнопки вперед и назад на своем браузере. Кроме того, так как поисковой робот Google не читал Javascript, были вопросы по поводу того, насколько хорошо AJAX сайты могут быть найдены в поиске Google.
Оба эти вопроса решаются управлением путем URL, используя API истории HTML5.
Каждая страница 100% AJAX сайта и его дополнительные виды считаются своим собственным запросом; когда вы используете навигацию на сайте AJAX – даже если это технически одна загрузка страницы – URL обновляется в браузере, чтобы предоставить уникальный адрес, представляющий текущее состояние просмотра. Кроме того, мы можем проверить события изменения истории в целях поддержки кнопки назад браузера и возврата в предыдущее состояние просмотра. Каждый из этих уникальных адресов полностью проиндексированы Google, что означает, что этот подход полностью совместим и полезен для SEO.
a9
Поиск A9 на Amazon зависит от AJAX, извлекая значительные объемы данных без потери истории поиска пользователя.
Заключение
Как видите, AJAX является неотъемлемой частью продвижения современной веб-разработки и вытесняет ряд низших технологий, обеспечивающих плохой пользовательский опыт. Без AJAX, все содержимое страницы полностью перезагружалось почти при каждом взаимодействии пользователя, даже если изменилась лишь часть информации. Это препятствовало скорости, добавляло дополнительную загрузку на сервере и использовало чрезмерную пропускную способность.
Используя 100% AJAX фреймворк, мы можем создавать сайты, которые настроены под потребности клиентов и предоставляют доступную навигацию.
