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