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