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