В предыдущих модулях вы узнали, как создать форму, помочь пользователям избежать повторного ввода данных и как проверить данные формы. Как теперь убедиться, что форму можно использовать? Вы можете протестировать и проанализировать свою форму, чтобы ответить на этот вопрос.
Ваша форма работает на других устройствах?
Вы начинаете с подтверждения того, что ваша форма работает на вашем устройстве. Однако существует множество типов устройств, которые могут использовать ваши пользователи. Как проверить, работает ли ваша форма с другими устройствами?
Сначала протестируйте форму на настольном устройстве. Затем попробуйте использовать только клавиатуру. Далее протестируйте его на телефоне. Теперь вы протестировали свою форму с разными способами ввода (клавиатура, сенсорный экран и мышь), разными размерами экрана, разными браузерами и разными операционными системами.
Есть ли у вас еще устройства, на которых вы можете протестировать? Проверьте свою форму на всех из них. Чем больше различных устройств, браузеров, версий браузеров и операционных систем вы сможете протестировать, тем лучше!
Вы также можете использовать службу тестирования, чтобы протестировать свою форму на множестве разных браузеров, в разных версиях браузеров, на разных устройствах и в разных операционных системах. BrowserStack предлагает бесплатные тестовые учетные записи для проектов с открытым исходным кодом, позволяющие проводить тестирование в различных браузерах, устройствах и операционных системах.
Как проверить, работает ли ваша форма для других?
Ваша первая форма готова. Вы тратите много времени, чтобы убедиться, что все работает хорошо. Как вы можете подтвердить, что вашу форму могут использовать все остальные? В качестве первого шага вы можете попросить своих друзей и коллег заполнить вашу форму.
Сядьте рядом или поделитесь экраном. Таким образом, вы сможете увидеть, как они взаимодействуют с вашей формой. Посмотрите, как они заполняют форму. Попросите их сказать вслух, что они делают и есть ли у них какие-либо проблемы. После того, как они выполнят задание, задайте им вопросы. Было ли понятно, что им следует заполнять? Были ли у них проблемы с заполнением формы? Было ли что-то неясно? Эти вопросы помогут вам создавать еще лучшие формы.
Как вы можете измерить эффективность вашей формы?
Вы подтвердили, что вашу форму могут использовать другие люди. В качестве следующего шага вам следует измерить эффективность вашей формы. Для этого есть бесплатные инструменты. Давайте посмотрим на некоторые из них.
PageSpeed Insights (PSI)
PSI измеряет производительность вашего сайта и дает советы, как его улучшить.
Попробуйте : PageSpeed предоставляет отчет о производительности на основе лабораторных и полевых данных . Быстрый сайт — это первый признак того, что вашу форму можно использовать. Ваш сайт еще не быстрый? PSI показывает рекомендации по повышению производительности.
Посмотрите еще раз на отчет вашего сайта, который вы ранее тестировали с помощью PSI. См. информацию о Core Web Vitals ? Это сводка, если ваш сайт соответствует критериям Core Web Vitals. Core Web Vitals поможет вам понять, как пользователи взаимодействуют с веб-страницей.
Маяк
Lighthouse помогает вам выявить проблемы с производительностью, поисковой оптимизацией (SEO), передовым опытом и доступностью.
Существуют разные способы использования Lighthouse . Один из вариантов — запустить его прямо в DevTools . Откройте URL-адрес вашей формы в Chrome, откройте DevTools , переключитесь на вкладку Lighthouse и запустите аудит.
Отображаются показатели производительности от PSI. Кроме того, Lighthouse проверяет ваш сайт на соответствие SEO, передовым практикам и проблемам с доступностью. Забыли подключить метку к элементу управления формой? Lighthouse предупредит вас и предоставит инструкции по устранению проблемы.
Инструменты для выявления распространенных проблем
Существует множество инструментов для выявления распространенных проблем. Один из способов — использовать расширение средства устранения неполадок формы . Он предупреждает вас об отсутствии атрибутов autocomplete , нестандартных атрибутах, отсутствующих или пустых метках и многом другом.
Вы также можете использовать инструмент оценки доступности, такой как WAVE или ax . Эти инструменты уведомляют вас об отсутствии меток, отсутствии связей между метками и элементами управления формой, недостаточных цветовых контрастах и многих других проблемах доступности.
Как вы можете отслеживать форму опыта?
Мониторинг реального взаимодействия пользователей с вашими формами помогает быстро выявлять новые проблемы. Давайте посмотрим, как можно следить за своей формой.
пси
Один из способов мониторинга опыта — снова использовать PSI. Вы можете использовать PSI API для создания собственного инструмента мониторинга: API PageSpeed Insights объясняет, как это сделать.
PSI включает данные из набора данных отчета об опыте пользователей Chrome (CrUX), если они доступны для данного URL-адреса. Таким образом, вы также можете увидеть данные полей непосредственно в отчете.
Маяк
Lighthouse можно использовать как инструмент командной строки, как модуль Node или вместе с инструментами Lighthouse CI . Мониторинг производительности с помощью Lighthouse CI объясняет добавление Lighthouse в систему непрерывной интеграции, такую как GitHub Actions.
Существует множество других инструментов для измерения и мониторинга вашего сайта. Некоторые доступны в виде веб-инструментов, некоторые позволяют запускать аудит из командной строки, а некоторые предлагают API для интеграции их в ваши инструменты.
Как проанализировать свою форму
Вы протестировали свою форму на реальных пользователях и научились ее измерять и отслеживать. Как вы можете собирать статистику о своих пользователях и о том, как они взаимодействуют с вашей формой? Вы можете использовать инструмент аналитики. Давайте посмотрим на один и как это работает.
Аналитика
Одним из инструментов, который вы можете использовать, является Google Analytics (GA). После настройки вы получаете фрагмент JavaScript, который включаете на каждую страницу вашего сайта. С этого момента вы можете узнать, как люди используют ваш сайт.
Сколько людей посещают страницу с вашей формой? Сколько человек заполняют форму и переходят на следующую страницу? Ответы на эти вопросы вы получите, используя инструменты аналитики.
Вы также можете настроить более сложные аналитические отчеты. Хотите отслеживать, сколько пользователей нажимают кнопку «Отправить» ? Вы можете определить и объединить события для анализа.
Доступен широкий спектр инструментов аналитики. Некоторые из них минималистичны, некоторые предлагают массу возможностей для индивидуализации. Попробуйте различные инструменты, чтобы найти лучшее для своих нужд.
Проверьте свое понимание
Проверьте свои знания форм тестирования
Что такое полевые данные?
RUM собирает метрики из: