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