Тестовые формы на разных устройствах и платформах

Заполнить форму можно разными способами. Люди могут использовать вашу форму на своем смартфоне, стоя в переполненном автобусе, с помощью программы чтения с экрана или со старого ноутбука. Давайте посмотрим, как можно обеспечить работу формы на разных устройствах и в разных контекстах.

Убедитесь, что ваша форма работает для пользователей клавиатуры.

Хорошей первой проверкой, чтобы убедиться, что ваша форма доступна, является ее заполнение, используя только клавиатуру. Откройте форму и попробуйте перемещаться с помощью клавиши tab . Понятно, какое поле формы сейчас активно? Чтобы помочь пользователям понять, какое поле формы активно, вы можете использовать индикаторы фокуса.

Попробуйте . Используйте клавишу tab , чтобы перейти к вводу. Видите ли вы контур, когда вход активен? Это индикатор фокуса. Вы можете добавить индикаторы фокуса, используя псевдокласс CSS :focus .

input:focus {
  outline: 4px solid #222;
}

Узнайте больше о разработке доступных индикаторов фокуса .

Помогите пользователям перемещаться по вашей форме

Еще один хороший тест на удобство использования и доступность — убедиться, что логический порядок табуляции соответствует визуальному порядку табуляции. Как проверить порядок табуляции? Полностью пройдите через форму. Замечаете ли вы какие-нибудь нелогичные переходы в навигации? Убедитесь, что порядок DOM соответствует визуальному порядку.

Узнайте больше о том, как обеспечить, чтобы визуальный порядок на странице соответствовал порядку DOM .

Помогите пользователям заполнить форму на сенсорных устройствах.

Большой! Вы убедились, что ваша форма работает с клавиатурой. Теперь давайте посмотрим, как можно обеспечить его работу и на сенсорных устройствах, таких как мобильные телефоны.

Откройте форму на сенсорном устройстве, заполните все поля и отправьте форму. Вам приходилось нажимать несколько раз, чтобы выбрать элемент управления формой? Проблема может заключаться в том, что области касания слишком малы. Убедитесь, что целевой размер кнопки составляет не менее 48 пикселей и что каждый <input> и <select> достаточно велик, чтобы на него можно было нажать. Вы также можете помочь пользователям перемещаться по форме на сенсорных устройствах, добавив достаточное пространство между элементами управления формой.

Убедитесь, что пользователи получают оптимизированную клавиатуру

В предыдущих модулях вы узнали, как активировать другую экранную клавиатуру с помощью атрибутов type или inputmode .

Откройте демо-версию на своем телефоне и коснитесь поля номера телефона. Обратите внимание, что по умолчанию на экранной клавиатуре отображаются цифры вместе с другими символами, которые могут понадобиться для номера телефона. Используйте type="tel" , чтобы оптимизировать экранную клавиатуру для ввода телефонных номеров.

Попробуйте использовать телефон и посмотрите, сможете ли вы легко ввести все символы, необходимые для заполнения телефонного номера. Если вам интересно, как экранная клавиатура работает для другого type , попробуйте type="email" в демо-версии .

Убедитесь, что кнопки формы не скрыты

Представьте, что вы заполнили длинную форму и готовы ее отправить. Но где кнопка «Отправить» ? Он может находиться за панелью инструментов браузера, расположенной в нижней части экрана. Один из способов обеспечить видимость кнопок — использовать CSS-функцию env() . Узнайте, как обеспечить, чтобы кнопки не закрывались пользовательским интерфейсом устройства .

Убедитесь, что ваша форма работает на разных платформах.

Постарайтесь протестировать свои формы на как можно большем количестве устройств. У вас есть старый ноутбук? Откройте на нем браузер по умолчанию и проверьте свою форму. У вашего друга есть планшет? Возьмите его напрокат и проверьте там свою форму.

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

BrowserStack предлагает бесплатные тестовые учетные записи для проектов с открытым исходным кодом, а Browserling предлагает бесплатную пробную версию для тестирования в различных браузерах, устройствах и операционных системах.

Помогите пользователям заполнять ваши формы в разных контекстах.

Люди не просто используют разные браузеры, устройства и операционные системы. Люди также используют ваши формы в разных контекстах. Попробуйте! Сейчас на улице светит солнце? Берите телефон и выходите на улицу. Использование формы при ярком свете — хороший способ проверить, можно ли использовать коэффициенты контрастности.

Узнайте больше о доступности цвета и контраста .

Убедитесь, что ваша форма работает при плохом подключении

Допустим, вы путешествуете куда-то на поезде. Вы открываете веб-страницу на своем телефоне. Вы удивляетесь, как загрузка сайта может занять так много времени 😕.

Вы можете моделировать медленные соединения и различные типы сетей с помощью WebPageTest или DevTools .

Узнайте больше о тестировании с низкой пропускной способностью и высокой задержкой .

Помогите пользователям использовать вашу форму, когда они в пути.

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

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

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

Обязательно поделитесь результатами теста

Документируйте все тесты и делитесь результатами со своей командой. Это поможет расставить приоритеты в действиях, чтобы все в вашей команде были осведомлены о наиболее важных задачах.

Узнайте больше о совместном использовании результатов тестирования .

Проверьте свое понимание

Проверьте свои знания о кроссплатформенном тестировании

Ресурсы

• WebPageTest : тесты производительности и оптимизации веб-сайта
• Тестирование с низкой пропускной способностью и высокой задержкой
• Обмен результатами теста