Дизайн — статьи о сайтах
У сайта разработчика программного обеспечения обычно три разные аудитории. Руководитель выбирает решение, технический специалист оценивает совместимость и документацию, действующий клиент ищет обновления и поддержку. Если все они пользуются одним меню, оно часто работает хорошо только для сотрудников компании. Проверить это можно без больших бюджетов.
Какие задачи должна решать навигация
Начните со списка задач посетителя, а не со списка разделов. Для сайта ПО он обычно такой: понять, что делает продукт; узнать, как купить или запросить расчёт; проверить интеграции и требования к системе; найти документацию; войти в личный кабинет; обратиться в поддержку. Если для какой-то задачи нужно больше двух-трёх кликов или она требует догадок, у навигации есть проблема.
Условный пример: меню, которое сбивает с толку
Представим сайт вымышленной системы складского учёта. В шапке пункты: «Решения», «Продукты», «Технологии», «Ресурсы», «О компании», «Контакты».
- Разница между «Решениями» и «Продуктами» понятна только команде разработки. Посетитель не знает, куда нажать, чтобы увидеть сам программный продукт.
- Документация спрятана в «Ресурсах» вместе с блогом и вебинарами. Технический специалист тратит время на поиск.
- Входа для клиентов нет. Они пишут в форму «Контакты», и вопросы поддержки попадают в отдел продаж.
- Цены или способа запросить расчёт в меню нет.
Более понятный вариант: «Возможности», «Интеграции», «Тарифы», «Документация», «Поддержка», справа ссылка «Войти» и заметная кнопка «Запросить демо». Каждое название отвечает на конкретный вопрос, и пункты не пересекаются по смыслу.
Как проверить меню на реальных людях
Найдите 5–7 человек, не участвовавших в создании сайта: знакомых из смежных отраслей, новых сотрудников, нескольких клиентов. Дайте каждому по одной задаче и не подсказывайте. Примеры формулировок:
- «Узнайте, как получить расчёт стоимости для компании на 50 рабочих мест».
- «Выясните, работает ли программа с 1С».
- «Найдите описание API».
- «Скачайте последнюю версию установщика».
Фиксируйте, куда человек нажал первым, сколько времени потратил и вернулся ли назад. Если первый клик чаще всего ведёт не туда, проблема в названии пункта или его положении. Не спрашивайте «удобно ли вам?». Наблюдайте за действиями.
Что покажет аналитика
Если на сайте установлена Яндекс.Метрика, откройте карту кликов и вебвизор по главной странице и разделу документации. Обратите внимание на клики по неактивным элементам и на то, как часто посетители открывают внутренний поиск. Частые запросы вроде «цена», «скачать» или «API» говорят о том, что меню не привело к этим разделам. Проверьте и обращения: если в отдел продаж приходят вопросы по настройке, а в поддержку попадают вопросы о цене, пользователи не различают эти пути. Проверьте также, настроены ли цели на заявку на демо, скачивание и вход, иначе оценить изменения меню будет нечем.
Технические проверки навигации
- Пройдите по меню клавишей Tab: фокус должен быть виден, а подменю доступны без мыши.
- Откройте сайт на телефоне. Меню, которое раскрывается при наведении, на сенсорном экране часто не работает.
- Проверьте хлебные крошки в документации и их соответствие реальной вложенности.
- Убедитесь, что страницы устаревших версий продукта помечены, а ссылки на актуальную версию заметны.
- Пройдите по ссылкам из футера и сравните их с шапкой. Нет ли расхождений в названиях?
- Откройте несколько старых адресов и посмотрите, куда ведёт страница ошибки 404: на главную или на поиск и основные разделы.
Короткий чек-лист для владельца
- Названия пунктов понятны человеку вне компании, без внутренних терминов.
- Продукт, цены или расчёт, документация, поддержка и вход доступны из шапки.
- Разделы не дублируют друг друга по смыслу.
- Меню содержит не больше 6–7 основных пунктов.
- Главное действие («Запросить демо» или «Попробовать») выделено и не повторяет обычный пункт меню.
- Пять тестовых участников выполнили ключевые задачи без подсказок.
- Мобильное меню и навигация с клавиатуры проверены.
- В аналитике настроены цели, по ним можно сравнить результаты до и после правок.
Если проверка выявила проблемы, начните с малого: переименуйте пункты и вынесите вход и документацию в шапку. Затем повторите тест с теми же задачами и сравните результаты.
