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