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