Так как мобильное применение интернета делается все более распространенным, стало очень серьёзным делать упор на реакции и быстрой загрузке страниц на действия пользователя.
Одной из серьёзных разработок, которую мы используем для данной цели – 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 есть Гугл Maps. При уменьшении и увеличении масштаба, перемещениях по городу в высоты птичьего полета, мгновенная информация медлено и непрерывно предоставляется. При переходе между страницами либо обновлении содержимого в веб-приложении, реагирование на пользовательский ввод осуществляется соответствующим образом, к примеру, как форма выхода, обновленная в реальном времени происходит без перезагрузки страницы.
google_maps
При проектировании страниц с громадным числом контента, мы используем шаблон нескончаемой прокрутки AJAX, что экономит пропускную свойство браузера, показывая только данные, относящуюся к UX. На странице новостей данной компании, к примеру, статьи загружаются по мере прокручивания, дополнительная информация выводится на экран по желанию читателя. Это процесс загрузки контента по требованию разрешает отечественным визитёрам взять ровно столько новостей, сколько они желают, не ставя барьеров на пути их намерений.
Хороший UX
Получение контроля над тем, как сайт загружает контент, формирует неповторимую возможность проектирования переходов страниц, визуальных подсказок и загрузки анимации, каковые окажут помощь пользователю осознать иерархию сайта. Это кроме этого возможность для творчества с брендингом компании.
Сайт с 100% фреймворком AJAX (по причине того, что нет полной загрузки страницы) не снабжает обратную сообщение о собственном прогрессе загрузки в окне браузера, что ведет к потенциальной путанице, в случае если визитёр ожидает в течение долгого периода времени без ответа. Вот где вступают в игру индикаторы состояния загрузки, показывая, что прогресс будет достигнут в течение некоего времени ожидания.
estesparkmedical
Estes Park Medical Center в Колорадо применяет персональный AJAX загрузчик, сочетая бренд и цвета собственной организации, и придав функциональности знаку загрузки.
семь дней
На сайте Zillow, перечни всегда обновляются без применения кнопки обновления браузера, предоставляя доступ к свежей информации в любое время.
Маленькие дополнения, такие как эти, оказывают помощь создать незабываемый опыт для ваших визитёров, и этого вероятно добиться посредством AJAX.
Управление методом URL, применяя историю HTML5
Без отдельных загрузок страниц, сайт определяется наличием одного URL, в следствии чего появляются неприятности на не хорошо созданных сайтах AJAX, поскольку пользователи пробуют сделать закладки либо руководить, применяя кнопки вперед и назад на своем браузере. Помимо этого, поскольку поисковой робот Гугл не просматривал Javascript, были вопросы по поводу того, как прекрасно AJAX сайты смогут быть отысканы в поиске Гугл.
Оба эти вопроса решаются управлением методом URL, применяя API истории HTML5.
Любая страница 100% AJAX сайта и его дополнительные виды считаются своим собственным запросом; в то время, когда вы используете навигацию на сайте AJAX – кроме того в случае если это технически одна загрузка страницы – URL обновляется в браузере, дабы дать неповторимый адрес, воображающий текущее состояние просмотра. Помимо этого, мы можем проверить события трансформации истории в целях помощи кнопки назад возврата и браузера в прошлое состояние просмотра. Любой из этих неповторимых адресов всецело проиндексированы Гугл, что свидетельствует, что данный подход всецело совместим и нужен для SEO.
a9
Поиск A9 на Amazon зависит от AJAX, извлекая большие количества данных без утраты истории поиска пользователя.
Заключение
Как видите, AJAX есть неотъемлемым элементом продвижения современной веб-разработки и вытесняет последовательность низших разработок, снабжающих нехороший пользовательский опыт. Без AJAX, все содержимое страницы всецело перезагружалось практически при каждом сотрудничестве пользователя, даже в том случае, если изменилась только часть информации. Это мешало скорости, додавало дополнительную загрузку на сервере и применяло чрезмерную пропускную свойство.
Применяя 100% AJAX фреймворк, мы можем создавать сайты, каковые настроены под потребности клиентов и предоставляют дешёвую навигацию.
Случайные статьи:
- Маркетинговые каналы с самой высокой конверсией в сфере в2в
- Весенний апдейт: интеграция justclick и lpgenerator!
UI/UX для чайников. Быстрый старт от дизайн-студии #1
Подборка похожих статей:
-
Микро-контент: как повысить ux с помощью нескольких слов?
Вспоминая об улучшения пользовательского опыта (UX), мы прежде всего уделяем внимание шрифтам, цветам, дизайну станицы, контенту. Но имеется еще один…
-
Оптимизация потребительского поведения: как управлять желаниями покупателей
С развитием маркетинга жажды потребителя все чаще навязываются ему извне. Евгений Розенблат об управлении лояльностью в e-commerce. Евгений Розенблат,…
-
Как увеличить глубину просмотров с помощью релевантного контента?
Большая часть блогов и сайтов упускают настоящую возможность вовлечения читателей. Неприятность таких ресурсов, в большинстве случаев, содержится не в…
-
Как с помощью qr-кода увеличить число клиентов на 25%?
Источник изображения Сейчас мобильные разработки становятся «гвоздем программы» на всех основных мировых технологических конференциях, а также на CES…