Кнопка «В корзину» появляется только при наведении мышью? Покупатель, который управляет сайтом с клавиатуры, может до неё не добраться. В магазине детских самокатов это означает, что родителю трудно сравнить модели, узнать условия покупки или задать вопрос. Удобный сайт нужен людям с разными особенностями зрения, слуха и моторики. Он выручает и в обычных ситуациях — например, когда человек держит телефон одной рукой или читает страницу при ярком свете.
Начните с пути, который проходит покупатель
Проверять сразу весь сайт необязательно. Пройдите маршрут покупателя: главная страница, каталог, карточка самоката, корзина, форма связи. Уберите мышь и попробуйте управлять сайтом с клавиатуры: Tab переводит фокус между элементами, Enter активирует кнопки и ссылки, Shift+Tab возвращает назад. Текущий элемент должен быть хорошо заметен — например, благодаря чёткой рамке. Если фокус теряется в выпадающем меню или переходит на невидимую кнопку, дальше пройти не получится.
Затем откройте сайт на телефоне и увеличьте масштаб. Проверьте, читаются ли характеристики, цены и условия доставки, не перекрывает ли текст кнопки и не приходится ли прокручивать обычный абзац по горизонтали. Найденные проблемы записывайте с указанием страницы, действия и устройства. Формулировка «после выбора цвета кнопка заказа недоступна с клавиатуры» поможет исполнителю больше, чем «карточка работает плохо».
Сделайте текст и структуру понятными
Заголовки, ссылки и названия кнопок
Заголовки помогают быстро просмотреть страницу, а пользователям вспомогательных технологий — перейти к нужному разделу. На каждой странице нужен понятный основной заголовок; подразделы должны идти в логичном порядке. Просто увеличить и выделить текст жирным недостаточно: заголовок должен быть отмечен и в разметке. В карточке самоката, например, можно выделить разделы «Размеры и вес», «Тормоз и колёса», «Комплектация», «Уход».
По названию ссылки должно быть ясно, куда она ведёт, даже если читать её отдельно от остального текста. Вместо нескольких ссылок «Подробнее» напишите «Размерная таблица для самокатов» или «Условия возврата». Кнопкам подойдут короткие названия: «Добавить в корзину», «Отправить вопрос». Если на странице несколько моделей, уточните, к какой относится кнопка, когда иначе их легко перепутать.
Не прячьте важное в значках и изображениях
Значок грузовика не расскажет об условиях доставки, а цветная метка сама по себе не объяснит, есть ли товар. Рядом с цветовым обозначением добавьте текст «В наличии» или «Нет в наличии». Для содержательных изображений задайте короткое описание — например, укажите, что на фото виден задний тормоз самоката. Декоративным элементам оно не нужно: при озвучивании страницы они будут только мешать.
Не оставляйте важные характеристики только на фотографии упаковки. Ростовка, высота руля, допустимая нагрузка, тип тормоза и число колёс должны быть доступны обычным текстом, без увеличения картинки. Возрастная маркировка не заменяет проверки размеров и навыков ребёнка. А для катания всё равно нужны подходящая защитная экипировка и присмотр взрослого — даже если описание модели на сайте очень подробное.
Проверьте контраст и удобство управления
Светло-серые подписи на белом фоне могут выглядеть аккуратно, но читать их трудно. Особенно важно, чтобы были хорошо видны цена, размеры, наличие товара, сообщения об ошибках и надписи на кнопках. Проверьте цвета инструментом оценки контраста, затем посмотрите страницу при увеличенном масштабе и на обычном телефоне. На глаз слабый контраст легко пропустить.
- Размер элементов. Ссылки, переключатели цвета и кнопки должны быть достаточно крупными, чтобы в них удобно было попасть пальцем. Между соседними действиями оставьте расстояние.
- Состояния элементов. Наведение мыши, фокус клавиатуры, выбранный вариант и недоступное действие должны различаться не только цветом.
- Читаемый текст. Не размещайте важные условия покупки мелким шрифтом поверх фотографии. Проверьте межстрочный интервал и то, что происходит с текстом при увеличении.
- Предсказуемость. Выбор цвета или размера не должен неожиданно открывать другую страницу или сбрасывать введённые данные.
Если в каталоге есть фильтры, каждому переключателю нужна понятная подпись. После применения фильтра покажите, сколько товаров осталось, и дайте возможность легко снять выбранное условие. Выпадающий список не должен требовать точного попадания мышью в узкую область: его нужно открывать и использовать и с клавиатуры.
Формы и ошибки: помогайте исправить, а не угадывать
У поля «Телефон» в форме заказа должна быть видимая подпись. Пример номера внутри поля её не заменит: как только человек начнёт вводить данные, пример исчезнет. Обязательные поля отмечайте текстом, а формат ввода объясняйте там, где это необходимо. Автозаполнение имени, телефона и адреса сэкономит усилия, особенно на телефоне.
Сообщение «Ошибка» не подсказывает, что исправить. Лучше написать рядом с полем: «Укажите номер телефона» или «Проверьте адрес электронной почты». После отправки формы сообщите понятным текстом, что произошло. Если заявка не ушла, по возможности сохраните введённые ответы. Не ставьте короткий таймер, после которого корзина неожиданно очищается: покупателю может понадобиться больше времени, чтобы прочитать условия и заполнить поля.
Если с сайта можно скачать инструкцию или таблицу размеров, укажите тип файла. Важные сведения из PDF продублируйте на обычной странице: читать такой документ на телефоне бывает неудобно.
Видео, движения и всплывающие окна
Если в видео о складывании самоката есть речь, добавьте субтитры. Важный шаг, показанный без слов, кратко опишите рядом с роликом. Не включайте звук автоматически. Анимация вращения товара не должна мешать чтению характеристик; если движение запускается само и длится долго, предусмотрите кнопку остановки.
Окно с предложением подписаться или выбрать город должно закрываться заметной кнопкой и клавишей Escape. После закрытия верните фокус клавиатуры туда, где он был до открытия окна. Не перекрывайте таким окном цену, предупреждение о совместимости деталей или кнопку возврата к каталогу.
Как расставить задачи для исправления
Сперва исправьте то, что мешает завершить покупку или отправить вопрос: недоступную с клавиатуры корзину, поля заказа без подписей, непонятные ошибки. Затем переходите к проблемам, усложняющим выбор: слабому контрасту характеристик, неясным ссылкам, отсутствующим описаниям важных изображений. Косметические недочёты подождут. В каждой задаче укажите, как воспроизвести проблему и какой результат ожидается.
После изменения шаблона проверьте разные состояния сайта: карточку товара в наличии и распроданного самоката, выбор цвета, пустую корзину и форму с ошибкой. Автоматическая проверка найдёт часть проблем в разметке, но не определит, понятна ли кнопка «Выбрать», когда таких кнопок на странице десять. Дополните её ручной проверкой с клавиатуры, увеличением текста и, если есть возможность, тестированием с людьми, которые пользуются вспомогательными технологиями.
Для первой проверки откройте карточку самого популярного самоката и уберите мышь. Клавишей Tab пройдите от названия модели к выбору варианта, кнопке покупки и информации о доставке. Запишите, на каком шаге пропал фокус или стало неясно, какой элемент выбран: с этого и начните исправления.
