Ответьте на 3 простых вопроса и мы подскажем что вам нужно!

1

У ВАС УЖЕ ЕСТЬ
ГОТОВЫЙ САЙТ?

2

ЗНАЕТЕ ЛИ ВЫ ЧТО ТАКОЕ
ЮЗАБИЛИТИ?

Usability testing: план тестирования юзабилити форм ввода

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

Сохранение введенных данных

Формы на сайте хранятся в таблицах SQL или в веб-формах административной панели.

Актуальность адреса получения данных

В административной панели указан актуальный адрес e-mail для обработки полученной информации.

Почему это важно. Достаточно типичная ситуация: в службе поддержки нет никакой информации от клиентов. Экспертиза сайта показала, что в админчасти указан адрес svetoch1978@yandex.ru куда и приходила вся информация от клиентов. Чей это адрес, и кто его внес в систему, никто не знает – результат предсказуем,  и дальше проводить юзабилити тест уже не было смысла.

Отправка заполненной формы

Данные из форм ввода дублируются на E-mail ответственного менеджера или администратора.

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

Навигация между полями

Для нужных полей указаны дополнительные свойства placeholder (плейсхолдеры). Они отвечают за вывод текстовых подсказок для внутренних полей формы.

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

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

 Пример правильного юзабилити: Юнипласт

Usability тестирование

Подстановка данных

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

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

Смотрим пример: Лабиринт.

Подстановка данных

Заполнение многостраничных форм

Результаты usability testing должны подтверждать правильную работу многостраничные форм по кнопкам браузера «Назад» и «Вперед».

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

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

 Пример многостраничной формы: Asos.

Заполнение многостраничных форм

Валидация введенных данных

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

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

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

Почему это важно. Например, если в атрибуте accept указан тип загружаемых фалов *.doc, то браузер для загрузки покажет только документы Word, что исключает загрузку других форматов.

Если валидация данных предусматривает регулярное выражение, то необходимо указать параметр pattern. Например, для ввода пароля только из цифр и длиной не менее пяти и не более восьми используем следующее выражение [0-9]{5,8}. Если параметр pattern указан, то форма не отправится, пока данные не будут введены правильно.

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

Инструкция по заполнению формы должна быть написана простым и понятным языком.

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

Если предусматривается регулярное выражение, не делайте из него подсказки.

Почему это важно. Какая подсказка для ввода почтового индекса будет более понятна – непонятная строка «[0-9]» или подробная подсказка «Почтовый индекс должен состоять только из цифр 0-9». Ответ очевиден – второй вариант с точки зрения юзабилити предпочтительнее.

Пример: ЛитРес.

Тестирование юзабилити сайта

В форме вводятся только нужные данные

Откройте и проверьте все формы на запрос только нужного минимума информации.

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

Пример: Сампринт

Тест юзабилити

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

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

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

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

 Пример: Мех-экспо

Автоподстановка в формах

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

Во время отправки формы изменение введенных данных невозможно. Это особенно актуально для форм содержащих технологию Ajax.

Почему это важно. Если скорость Интернет канала недостаточна, то форма, использующая Ajax, попадает на сервер не сразу и некоторое время остается в браузере. Не стоит давать пользователю возможность в этот момент скорректировать введенные данные, это приведет к значительной путанице на сервере. При этом желательно показать посетителю, что форма не изменяется. Лучшим вариантом будет использование специальных прелоадеров:   Прелоадер

Кнопка отправки формы не активируется в формах пока не активирован специальный чекбокс «Прочесть пользовательское соглашение» или «Согласиться с условиями».

Если валидация информации не прошла выводиться специальное сообщение.

 

Спасибо за внимание и хорошего всем usability testing! Запомните, тестирование юзабилити сайта является важнейшим компонентом на пути к успеху.

Читайте так-же:

Разработка юзабилити сайтов

План тестирования юзабилити веб-фильтров

Экспертная оценка сайта и его юзабилити: улучшаем форму входа на сайт