Дизайн — статьи о сайтах
У кейтеринга почти всегда есть страница, которая разрастается: форматы обслуживания, меню, условия доставки, оборудование, персонал, порядок оплаты. Владелец хочет рассказать обо всём сразу. Посетитель же приходит с узким вопросом: подойдёт ли это для его мероприятия и что делать дальше. Ниже — решения, которые помогают ему найти ответ, не прокручивая всё подряд.
Почему длинная страница кейтеринга читается тяжело
Обычно проблема не в длине, а в том, что у текста нет опор. Типичные причины: все блоки выглядят одинаково, меню идёт сплошным списком без группировки, условия спрятаны в конце мелким шрифтом, а кнопка заявки есть только в самом низу. На телефоне это усугубляется: таблица с граммовкой не помещается в экран, а заголовки не отличаются от обычного текста.
Поэтому задача формулируется так: сделать страницу, по которой можно прыгать к нужному месту и в любой момент понимать, где ты находишься.
Какие блоки поставить вверху и в каком порядке
Расположите разделы по логике решения клиента, а не по логике внутренней кухни компании. Рабочий порядок для страницы про выездное обслуживание:
- короткое описание: для каких событий подходит формат и что входит в базовый вариант;
- оглавление с якорными ссылками: «Форматы», «Меню», «Что входит», «Условия заказа», «Вопросы»;
- меню, сгруппированное по типам подачи;
- условия: сроки заявки, доставка, аренда посуды, обслуживающий персонал;
- ответы на частые вопросы;
- форма заявки или контакты.
Оглавление после вводного абзаца даёт читателю карту. На телефоне его можно сделать горизонтальной полосой кнопок или раскрывающимся списком.
Как оформить меню, чтобы позиции не сливались
Сплошной перечень из пятидесяти блюд никто не дочитывает. Разбейте его на группы по сценарию: «Канапе и закуски», «Горячее», «Десерты», «Напитки». Каждой группе — заголовок второго или третьего уровня, чтобы работала навигация и экранные дикторы.
Единый шаблон позиции экономит внимание: название, вес или количество порций, состав одной строкой. Если у компании есть пометки вроде «вегетарианское» или «содержит орехи», пусть они выглядят везде одинаково и расшифровываются в начале раздела. Содержание пометок определяет сама компания, дело сайта — сделать их заметными и последовательными.
Для вариантов с разной вместимостью лучше использовать карточки или раскрывающиеся блоки, а не широкую таблицу: на узком экране таблица заставляет прокручивать вбок.
Условный пример: фрагмент страницы «Фуршет»
Допустим, у вымышленной компании есть страница фуршетного формата. Фрагмент можно построить так:
- Заголовок: «Фуршет для корпоративного мероприятия».
- Под ним, одной фразой: «Подходит для встреч, где гости перемещаются по залу; подача — на столах-островах».
- Навигация: Что входит · Меню · Как заказать · Вопросы.
- Блок «Что входит»: четыре-пять пунктов коротким списком — подача, персонал, посуда, сервировка, уборка после мероприятия (если это действительно так).
- Блок «Меню»: группы со своими заголовками; позиция выглядит как «Канапе с рыбой — 25 г, 1 шт.» и строка состава.
- Блок «Как заказать»: три шага — заявка, согласование меню, подтверждение. Рядом указано, за сколько дней нужно обратиться; цифру задаёт компания.
- Кнопка: «Рассчитать фуршет» — закреплена внизу экрана на телефоне.
Цены в таком фрагменте лучше показывать вместе с пояснением, от чего зависит итог: количество гостей, выбор позиций, выезд. Запись «от [сумма]» без пояснения вызывает больше вопросов, чем снимает.
Как не потерять путь к заявке
Длинная страница должна оставлять кнопку действия в поле зрения. Закреплённая панель с кнопкой «Рассчитать» или номером телефона на мобильном избавляет от возврата наверх. Повторите кнопку после меню и после условий: именно там у читателя появляется решение.
Форму сделайте короткой: дата, число гостей, контакт, комментарий. Остальное уточнит менеджер. Заранее напишите рядом, что произойдёт после отправки и как скоро ответят, если вы можете это гарантировать.
Проверочный список для владельца
- Видно ли за десять секунд, о чём страница и для какого мероприятия она подходит?
- Есть ли оглавление, ведущее к блокам, и вернуться ли из любого места к нему?
- Меню разбито на группы, а позиции описаны по одному шаблону?
- Размер основного текста на телефоне не меньше 16 px, а строка не растягивается на весь широкий экран?
- Таблицы читаются на узком экране без горизонтальной прокрутки?
- Условия заказа вынесены в отдельный заголовок, а не спрятаны в сноски?
- Кнопка заявки доступна в начале, середине и конце страницы?
- Раскрывающиеся блоки не скрывают то, без чего нельзя принять решение?
Пройдите по списку с телефона, открыв страницу так, как её увидит гость. Если на каком-то пункте приходится искать нужное дольше нескольких секунд, именно с него стоит начинать правки.
