Дизайн — статьи о сайтах
Родитель редко выбирает товар в тишине: рядом ребёнок, одна рука занята телефоном, внимание постоянно отвлекается. В такой ситуации подпись «Выбрать» или «Подробнее» превращается в загадку, и человек просто закрывает вкладку. Проверить, насколько понятны кнопки и ссылки, можно силами команды магазина, без сложных исследований.
Какую кнопку считать непонятной
Элемент непонятен, если посетитель не может заранее предсказать результат нажатия. Для детского магазина типичные примеры такие:
- «Выбрать» — это выбор размера, цвета или добавление в корзину?
- «Оформить» — покупка сразу или резерв в магазине?
- «Сертификат» — подарочный или документ на товар?
- «Для малышей» и «0–3 года» в меню — это один раздел или разные?
- «Уточнить» — откроется форма, чат или начнётся звонок?
Условный пример: карточка коляски
Представим карточку детской коляски. Под фото стоят кнопка «Выбрать», ссылка «Подробнее» и кнопка «Уточнить». Покупатель, который хочет узнать, есть ли модель в ближайшем магазине, вынужден гадать, какая из трёх подойдёт.
Исправленный вариант может выглядеть так:
- «Добавить в корзину» — главное действие, заметнее остальных;
- «Характеристики и комплектация» — ссылка, ведущая к нужному блоку на этой же странице;
- «Узнать о наличии в магазинах» — открывает список точек, а не форму обратной связи.
Важно и то, что происходит после нажатия. Если кнопка просто меняет цифру у значка корзины, ответ легко не заметить. Лучше показать сообщение «Коляска в корзине» с вариантами «Перейти в корзину» и «Продолжить выбор».
Как провести проверку на пяти людях
Не спрашивайте «Вам понятно?». Дайте задачи, в которых нужно найти нужную кнопку:
- найдите зимний комбинезон на рост 86 и положите в корзину;
- выясните, можно ли забрать заказ сегодня;
- найдите условия возврата не подошедшей обуви.
Пригласите людей не из команды: родителей, бабушек и дедушек, которые покупают подарки. Достаточно четырёх-пяти человек: повторяющиеся затруднения обычно заметны уже на такой группе. Во время теста не подсказывайте. Записывайте, где человек замешкался, на что нажал по ошибке и что ожидал увидеть. Фраза «я думал, здесь откроется таблица размеров» ценнее любой оценки по шкале.
Тест «только подписи»
Выпишите в таблицу все подписи кнопок и ссылок со страницы без картинок и окружающего текста. Покажите список коллеге из другого отдела и попросите объяснить, что произойдёт после каждого нажатия. Заодно вы увидите повторы: двадцать ссылок «Подробнее» в каталоге ничем не различаются для человека, который слушает страницу через программу экранного чтения, и плохо работают в списке ссылок. Подпись «Подробнее о комбинезоне Зима-22» (условное название) говорит больше.
То же относится к меню. Решите, как покупатель ищет товар: по возрасту, росту, поводу или типу вещи. Если в меню смешаны «Новорождённые», «Игрушки» и «Для мам», проверьте, не ищут ли люди одно и то же в разных местах.
Состояния кнопок и ответ сайта
Отдельно проверьте нестандартные ситуации:
- размер не выбран — кнопка «В корзину» неактивна без объяснения или появляется понятная подсказка рядом с выбором размера;
- товара нет в наличии — вместо серой кнопки есть действие «Сообщить о поступлении» или ссылка на похожие модели;
- на телефоне кнопки «−» и «+» у количества не слипаются, а нужные действия достижимы большим пальцем одной руки;
- ссылка в тексте выглядит как ссылка, а не как обычное выделение.
Проверочный список
- Подпись начинается с глагола и называет результат: «Добавить в корзину», «Выбрать размер».
- На экране одно главное действие, второстепенные оформлены спокойнее.
- Одинаковые подписи не ведут в разные места, а разные — в одно.
- Ссылки «Подробнее» заменены на названия разделов или товаров.
- После нажатия есть видимый ответ: сообщение, переход, изменение состояния.
- Неактивные кнопки объясняют причину.
- Пять человек выполнили три задачи без подсказок; места сомнений записаны.
После правок повторите тест на новых участниках и настройте в системе аналитики цели на ключевые клики: так вы сравните поведение до и после изменений, не полагаясь только на ощущения.
