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