Тестируйте свои формы¶
Узнайте, как тестировать и анализировать свои формы.
В предыдущих модулях вы узнали, как создать форму, помочь пользователям избежать повторного ввода данных и как проверить данные формы. Как теперь убедиться в том, что форма пригодна для использования? Вы можете протестировать и проанализировать форму, чтобы ответить на следующие вопросы.
Работает ли ваша форма на других устройствах?¶
Для начала необходимо убедиться, что форма работает на вашем устройстве. Однако существует множество типов устройств, которые могут использовать ваши пользователи. Как проверить, работает ли форма на других устройствах?
Сначала протестируйте форму на настольном устройстве. Затем попробуйте использовать только клавиатуру. Затем протестируйте ее на телефоне. Теперь вы протестировали свою форму на различных устройствах (клавиатура, сенсорный ввод, мышь), на экранах разных размеров, в разных браузерах и операционных системах.
Есть ли у вас еще устройства, на которых вы можете протестировать форму? Протестируйте свою форму на всех из них. Чем больше различных устройств, браузеров, версий браузеров и операционных систем вы можете протестировать, тем лучше!
Для тестирования формы на множестве различных браузеров, версий браузеров, устройств и операционных систем можно также использовать сервис тестирования. BrowserStack предлагает бесплатные тестовые учетные записи для проектов с открытым исходным кодом, позволяющие проводить тестирование на различных браузерах, устройствах и операционных системах.
Как проверить, работает ли ваша форма для других?¶
Ваша первая форма готова. Вы потратили много времени, чтобы убедиться, что она работает хорошо. Как убедиться в том, что ваша форма подходит для всех остальных? В качестве первого шага вы можете попросить своих друзей и коллег заполнить форму.
Сядьте рядом друг с другом или разделите экран. Таким образом, вы сможете увидеть, как они взаимодействуют с вашей формой. Наблюдайте за тем, как они заполняют форму. Попросите их сказать вслух, что они делают и не возникает ли у них каких-либо проблем. После того как они выполнят задание, задайте им вопросы. Было ли им понятно, что именно они должны заполнить? Были ли у них какие-либо проблемы при заполнении формы? Было ли что-то непонятно? Эти вопросы помогут вам создать еще более совершенные формы.
Вашей формой будут пользоваться люди со всего мира. Есть ли у вас в форме поле для адреса? Наберите в Google город, который вы всегда хотели посетить, и найдите там ресторан. Теперь введите адрес ресторана в поле адреса. Формат адреса может полностью отличаться от формата адреса, в котором вы живете. Чтобы убедиться, что ваша форма может работать с различными форматами, протестируйте ее на разных данных.
Как вы можете измерить эффективность вашей формы?¶
Вы подтвердили, что ваша форма пригодна для использования другими людьми. В качестве следующего шага необходимо измерить эффективность работы формы. Для этого существуют бесплатные инструменты. Давайте рассмотрим некоторые из них.
Всегда следует проводить измерения до и после изменения формы. Таким образом, можно сравнить результаты, определить влияние изменений и продемонстрировать улучшения.
PageSpeed Insights (PSI)¶
PSI измеряет производительность вашего сайта и дает подсказки, как ее улучшить.
Try it out: PageSpeed предоставляет отчет о производительности, используя лабораторные и полевые данные. Быстрый сайт - это первый признак того, что ваша форма удобна для использования. Ваш сайт еще не работает быстро? PSI показывает рекомендации по улучшению производительности.
Просмотрите еще раз отчет о вашем сайте, который вы уже тестировали с помощью PSI. Видите информацию о Core Web Vitals (CWV)? Это краткая информация о том, соответствует ли ваш сайт критериям CWV. CWV помогает понять, как пользователи воспринимают веб-страницу.
Lighthouse¶
Lighthouse помогает выявить проблемы производительности, поисковой оптимизации (SEO), лучших практик и доступности.
Использовать Lighthouse можно разными способами. Один из вариантов - запустить его непосредственно в DevTools. Откройте URL-адрес с формой в Chrome, откройте DevTools, переключитесь на вкладку Lighthouse и запустите аудит.
На экране появятся показатели производительности, полученные от PSI. Кроме того, Lighthouse проверяет сайт на соответствие требованиям SEO, передовой практики и доступности. Забыли подключить метку к элементу управления формы? Lighthouse предупреждает об этом и предлагает руководство по устранению проблемы.
Инструменты для выявления общих проблем¶
Существует множество инструментов для выявления типичных проблем. Одним из способов является использование расширения Form troubleshooter extension. Оно предупреждает об отсутствии атрибутов autocomplete, нестандартных атрибутах, отсутствующих или пустых метках и т. д.
Можно также использовать средства оценки доступности, такие как WAVE или axe. Эти инструменты сообщают о недостающих метках, отсутствии связей между метками и элементами управления формы, недостаточном цветовом контрасте и многих других проблемах доступности.
Все эти инструменты помогают найти общие проблемы, но они не способны выявить все проблемы. Всегда тестируйте свои формы вручную и на реальных людях.
Как отслеживать работу с формами?¶
Мониторинг реального пользовательского опыта работы с формами помогает быстро выявить новые проблемы. Давайте посмотрим, как можно отслеживать работу формы.
Лабораторные данные измеряются с помощью контролируемого теста в идеальных условиях. Полевые данные получают от реальных людей. При использовании полевых данных вы получаете метрики для реального использования в реальных условиях.
Люди используют различные браузеры, операционные системы, разрешения экранов и скорости подключения. Они используют различные устройства. Полевые данные позволяют собирать показатели в самых разных условиях.
Подробнее о почему лабораторные и полевые данные могут отличаться.
PSI¶
Одним из способов мониторинга опыта является повторное использование PSI. Вы можете использовать PSI API для создания собственного инструмента мониторинга: The PageSpeed Insights API объясняет, как это сделать.
PSI включает данные из набора данных Chrome User Experience Report (CrUX), если они доступны для данного URL. Таким образом, данные о полях можно также увидеть непосредственно в отчете.
Lighthouse¶
Lighthouse может использоваться как инструмент командной строки, как модуль Node или с инструментами Lighthouse CI. В статье Performance monitoring with the Lighthouse CI рассказывается о добавлении Lighthouse в систему непрерывной интеграции, например GitHub Actions.
Существует множество других инструментов для измерения и мониторинга вашего сайта. Некоторые из них доступны в виде веб-инструментов, некоторые позволяют запускать аудит в командной строке, а некоторые предлагают API для интеграции в ваши инструменты.
Как анализировать свою форму¶
Вы протестировали свою форму на реальных пользователях и узнали, как ее измерять и контролировать. Как собрать статистику о пользователях и их взаимодействии с формой? Можно использовать инструмент аналитики. Давайте рассмотрим один из них и то, как это работает.
Аналитика¶
Одним из инструментов, который можно использовать, является Google Analytics (GA). После его настройки вы получаете фрагмент JavaScript, который включаете в каждую страницу своего сайта. С этого момента вы можете узнать, как люди используют ваш сайт.
Сколько человек заходит на страницу с вашей формой? Сколько человек заполняют форму и переходят на следующую страницу? Ответы на эти вопросы можно получить с помощью инструментов аналитики.
Мониторинг реального опыта пользователей иногда называют мониторингом реальных пользователей (Real User Monitoring, RUM).
RUM собирает показатели производительности непосредственно из браузера конечного пользователя. Данные RUM показывают, как работает ваш сайт и как с ним взаимодействуют реальные пользователи.
Вы также можете настроить более сложные аналитические отчеты. Хотите отследить, сколько пользователей нажимают кнопку Submit? Вы можете определить и интегрировать events для анализа этого.
Существует широкий спектр инструментов аналитики. Некоторые из них минималистичны, другие предлагают множество возможностей для индивидуализации. Попробуйте разные инструменты, чтобы найти наиболее подходящий для ваших нужд.
Ресурсы¶
- Начало работы с измерениями Web Vitals
- Основные показатели Web Vitals
- Почему лабораторные и полевые данные могут отличаться
- Google Analytics: О событиях
Источник — Test your forms