Раскрывающиеся блоки (аккордеон) на странице услуги: что прятать, а что показывать сразу

Раскрывающиеся блоки, которые в народе называют аккордеоном, выглядят аккуратно: страница короткая, вопросы и разделы свёрнуты, интересное открывается по щелчку. Дизайнеры их любят, а владельцы бизнеса часто соглашаются, не думая о последствиях. Но если спрятать не то, что нужно, посетитель не найдёт цену, не увидит условия и уйдёт, так и не оставив заявку. Эта статья о приёме оформления: как решить, что показывать сразу, а что убирать под раскрытие, и как проверить, помогает ли аккордеон вашим обращениям.

Что такое аккордеон и зачем он нужен

Аккордеон представляет собой список заголовков, под каждым из которых скрыт текст. Нажатие на заголовок раскрывает содержимое, повторное нажатие сворачивает. На странице услуги его используют для частых вопросов, этапов работы, состава услуги, условий, описания подготовки. Главное достоинство: на длинной странице легче ориентироваться, а на мобильном экране не нужно листать километры текста.

У приёма есть и обратная сторона. Скрытое содержимое требует действия, а каждое действие теряет часть посетителей. Если человек не уверен, что внутри блока что-то нужное, он не станет нажимать. Если заголовок блока расплывчатый вроде «Подробнее» или «Информация», вероятность раскрытия ещё ниже. Поэтому аккордеон нельзя считать универсальным способом сделать страницу чище: это инструмент для второстепенных деталей.

Важно и то, что для читателя со слабым вниманием раскрывающиеся блоки создают ощущение порядка. Он видит структуру страницы за секунду и сам выбирает, что читать. Но это работает только тогда, когда главное уже показано и отвечает на его основной вопрос.

Правило: цена и условия видны сразу

Главное правило такое. Всё, без чего человек не может принять решение позвонить, должно быть видно без единого нажатия. Это название услуги, для кого она, цена или диапазон цен, срок, главные условия, способ связи. Если вы прячете цену в блок «Стоимость», многие посетители уйдут, не найдя её, потому что на странице не видно, что цена вообще указана.

Приведите на первом экране краткую сводку: «Установка окон под ключ, от такой-то суммы за квадратный метр, замер бесплатно, монтаж за один день». Эти четыре факта отвечают на главные вопросы. Под ними кнопка «Позвонить» и «Оставить заявку». Всё остальное можно спрятать в блоки, потому что оно нужно только тем, кто уже заинтересован.

Условия, которые влияют на итоговую цену или на решение, тоже не прячьте. Например: «Выезд в пределах города бесплатно, за город по тарифу», «Работаем по предоплате в такой-то доле», «Сроки зависят от размера». Если важная оговорка видна только в раскрытом блоке, клиент почувствует себя обманутым, когда прочтёт её после звонка. Честная подача сразу повышает качество обращений: звонят те, кому условия подходят.

Проверочный вопрос для каждого фрагмента текста: «Если человек этого не увидит, примет ли он решение позвонить?» Если не примет, показывайте сразу. Если примет, но захочет уточнить позже, можно спрятать.

Что можно прятать в раскрывающиеся блоки

Хорошие кандидаты на раскрытие: подробные этапы работы, технические характеристики, расширенный состав услуги, подготовка к визиту, ответы на второстепенные вопросы, список документов или материалов, которые стоит взять с собой, подробности гарантии и обслуживания. Это информация, которая нужна по запросу, а не для первого решения.

Для частых вопросов аккордеон подходит почти идеально. Расположите блок ближе к концу страницы, перед формой заявки. Формулируйте вопросы так, как их задают клиенты, в живой речи: «Сколько времени занимает работа?», «Что нужно подготовить?», «Можно ли оплатить частями?», «Что если результат не устроит?». Ответ на каждый вопрос сделайте коротким, два — четыре предложения, и в конце при необходимости дайте призыв связаться.

Скрывать можно и вторую очередь цен: стоимость дополнительных услуг, редких вариантов, надбавок. Но базовая цена должна быть открытой. Если у услуги много вариантов, покажите три основных в виде карточек, а остальные оставьте в блоке «Все варианты и цены».

Не прячьте то, что убеждает: отзывы, примеры работ, фотографии, сертификаты мастеров. Эти элементы нужны, чтобы человек поверил, а скрытое доверие работает хуже открытого. Лучше сократить количество отзывов, но показать несколько лучших прямо на странице.

Что нельзя прятать

Не убирайте под раскрытие цену, срок, способ связи, адрес и часы работы, главное отличие вашей услуги, условия выезда или оплаты, предупреждения о том, чего вы не делаете. Если вы не работаете с определёнными случаями, лучше сказать об этом сразу: это сэкономит время и вам, и клиенту.

Не скрывайте первый абзац с описанием услуги. Он нужен и людям, и поисковым системам, и нейропоиску, потому что именно оттуда берутся прямые ответы на вопрос «что это и сколько стоит». Текст в закрытых блоках технически присутствует на странице, но при оценке важности он может оказаться на вторых ролях. Основной ответ должен быть открыт.

Не делайте раскрытие единственным способом увидеть контакты. Телефон и кнопка связи должны быть на экране всегда, независимо от того, что раскрыто. Ещё одна ошибка: прятать форму заявки в блок «Оставить заявку», который открывается нажатием. Форма должна быть либо открыта, либо вызываться заметной кнопкой, а не быть одним из пунктов списка.

Наконец, не создавайте аккордеон из двух-трёх коротких абзацев. Если весь текст умещается в экран, раскрытие только добавляет лишнее действие. Применяйте приём, когда скрываемого материала действительно много.

Как писать заголовки блоков

Заголовок блока решает, нажмут ли на него. Он должен обещать конкретный ответ. Плохие заголовки: «Подробнее», «Дополнительно», «Информация», «Нюансы». Хорошие заголовки: «Как проходит первый визит», «Что входит в стоимость», «Сколько ждать результата», «Что подготовить заранее», «Как мы работаем, если объект за городом». Человек читает такие строки и понимает, что внутри есть ответ на его вопрос.

Добавляйте ключевую цифру прямо в заголовок, если это уместно: «Сроки: от одного до трёх дней», «Гарантия: двенадцать месяцев на работы». Тогда часть посетителей получит ответ, даже не раскрывая блок, а остальные раскроют ради подробностей. Это называют полупрозрачным аккордеоном: заголовок уже содержит суть.

Расположение стрелки или значка плюса тоже важно. Значок должен быть заметным, находиться справа или слева в одном и том же месте у всех блоков, а область нажатия должна захватывать весь заголовок, а не только крошечный значок. На телефоне высота заголовка не менее сорока четырёх пикселей, иначе палец промахивается.

Порядок блоков отражает вопросы клиента: сначала то, что волнует больше всего, например «Что входит и сколько стоит», затем процесс, затем частые вопросы, затем гарантии. Не расставляйте блоки по алфавиту и не копируйте структуру с чужого сайта.

Какие блоки раскрывать по умолчанию

Не обязательно, чтобы все блоки были закрыты. Хорошая практика: первый блок, самый важный, раскрыт по умолчанию, остальные свёрнуты. Тогда посетитель сразу видит, что внутри находится текст, и понимает механику. Для услуг, где решение зависит от этапов, можно раскрыть блок «Как это работает» и оставить свёрнутыми технические детали.

На мобильных устройствах закрытых блоков должно быть больше, на компьютере меньше. Широкий экран позволяет показать больше текста без прокрутки, а на телефоне длинная лента утомляет. Но и на телефоне не стоит превращать всю страницу в набор закрытых заголовков: должно остаться несколько абзацев открытого текста.

Если у вас в аккордеоне много пунктов, добавьте кнопку «Раскрыть все». Она нужна людям, которые предпочитают читать подряд, и тем, кто хочет напечатать страницу или быстро пробежать глазами. Ещё полезно сохранять открытым блок, если пользователь перешёл по ссылке с якорем на конкретный вопрос, например из ответа нейропоиска или карточки в картах.

Проверьте работу без скриптов и в медленной сети. Если скрипт блока не загрузился, а текст скрыт навсегда, посетитель увидит пустоту. Надёжный вариант: блоки по умолчанию открыты в самой вёрстке и сворачиваются скриптом уже после загрузки.

Как сделать аккордеон в ХостСМС

В ХостСМС раскрывающиеся блоки удобно строить на данных, а не на ручной вёрстке в каждой странице. Заведите информационную систему «Частые вопросы» или добавьте в информационную систему услуг дополнительные свойства: этапы, условия, подготовка. Тогда в шаблоне вывода (в нём задаётся оформление элементов) вы один раз опишете разметку блока, а менеджеры будут просто вносить вопросы и ответы в административном разделе.

Для самого раскрытия подойдёт либо готовая библиотека интерфейса, подключённая к шаблону, либо небольшой скрипт на несколько строк. Элементы можно оформить через стандартный элемент разметки «подробности и заголовок», который работает без скриптов и доступен с клавиатуры. Это лучший вариант по надёжности: текст остаётся в коде страницы, читается поисковыми системами и открывается даже при сбое скриптов.

Стили блока лежат в файле стилей шаблона. Задайте крупный размер текста заголовка, достаточную высоту строки для нажатия, заметный значок и контрастные цвета. В 1С-Битрикс и ВордПресс принцип тот же: либо компонент, либо плагин, либо встроенный элемент разметки, но данные лучше хранить отдельно, чтобы тексты можно было править без вмешательства в код.

Не забудьте добавить на страницу разметку частых вопросов, если ваш шаблон умеет это делать. Она помогает поисковым системам и нейропоиску понять, где вопрос, а где ответ, и цитировать их точнее.

Учёт открытий блоков как целей в Яндекс.Метрике

Раскрывающиеся блоки легко измерить, и это одно из главных их достоинств. Каждое раскрытие можно записывать как событие и использовать для цели. Настройте в Яндекс.Метрике отправку события при открытии каждого блока: название блока и страница передаются как параметры. Затем создайте цели типа «событие на странице» для самых важных вопросов, например «открыт блок про стоимость» или «открыт блок про сроки».

Что даёт такой учёт. Во-первых, вы увидите, какие вопросы интересуют людей больше всего, и вынесете их из-под раскрытия на видное место. Если блок про цену открывают три из четырёх посетителей, значит, цена должна быть на виду. Во-вторых, вы поймёте, какие блоки никто не открывает, и сможете убрать их или переписать заголовок. В-третьих, можно построить воронку: страница услуги, открытие блока, нажатие на телефон или отправка формы.

Сравните конверсию в заявку у тех, кто раскрывал блоки, и у тех, кто не раскрывал. Обычно раскрывшие проявляют больший интерес, но если у них конверсия ниже, значит, внутри блока они не нашли того, что искали, или текст отпугивает. Это сигнал переписать ответ.

Для сквозной оценки используйте вебвизор и карту кликов: они покажут, куда нажимают, где люди бросают страницу, есть ли «слепые» блоки, которые остаются без внимания. Но решения принимайте по целям и числу заявок, а не по красоте записи сеанса.

Эксперимент: как проверить, что аккордеон помогает

Не полагайтесь на вкусы. Проведите простую проверку. Возьмите страницу услуги, зафиксируйте число посетителей, обращений и конверсию за четыре недели. Затем измените оформление: вынесите цену и условия на первый экран, оставив подробности в блоках, или наоборот раскройте всё. Подождите ещё четыре недели при схожем потоке посетителей и сравните.

Если есть возможность, используйте встроенный в Яндекс.Метрику инструмент проверки гипотез, который показывает половине посетителей один вариант страницы, а другой половине второй. Тогда случайные колебания спроса не исказят вывод. Но и обычное сравнение «до и после» даёт полезную информацию, если вы учитываете сезонность и изменения рекламы.

Оценивайте не только число заявок, но и их качество: сколько обращений дошло до сделки. Иногда после вынесения цены на видное место заявок становится меньше, но дошедших до оплаты больше, потому что случайные любопытствующие отсеиваются. Это нормальный и полезный результат: менеджеры тратят время на готовых клиентов.

Как это связано с продвижением 3 в 1

Оформление страницы услуги влияет на все три канала обращений. Первый канал: поиск. Сайт должен находиться и в обычной выдаче, и в ответах нейропоиска, а для этого прямые ответы на вопросы нужны в тексте, который легко извлечь. Поэтому главные факты о цене, сроках и условиях стоят в открытой части страницы, а ответы на частые вопросы оформлены так, чтобы вопрос и ответ были чётко связаны. Раскрывающиеся блоки при этом остаются в коде страницы и дополняют открытую часть.

Второй канал: Яндекс.Справочник, то есть карточка в Яндекс Картах и Яндекс Бизнесе. Ссылка из карточки должна вести на конкретную страницу услуги, где цена и условия видны сразу. Те же формулировки услуг и цены, которые вы указали в карточке, должны совпадать со страницей: расхождение вызывает недоверие.

Третий канал: 2ГИС. Там своя аудитория, ищущая быстро и с телефона. Ссылку из карточки лучше вести на страницу, где без раскрытия видны цена, адрес и кнопка звонка. Для каждого канала используйте отдельные метки, чтобы видеть в Яндекс.Метрике, открывают ли посетители из карт блоки с ценой и сроками.

Обращения с карт считаются наравне с заявками с сайта. Отдельные номера телефонов и статистика карточек в Яндекс Бизнесе и 2ГИС помогут увидеть полную картину: сколько человек позвонили прямо из карточки, а сколько пришли через страницу услуги и раскрыли подробности. Тогда вы поймёте, какой текст на странице реально помогает продавать.

Типичные ошибки с аккордеоном

Первая ошибка: спрятана цена. Вторая: заголовки вроде «Подробнее». Третья: все блоки закрыты и страница выглядит пустой. Четвёртая: слишком много блоков, человек теряется и не знает, где искать. Пятая: внутри блока огромный текст на двадцать абзацев без разбивки. Шестая: значок раскрытия слишком мелкий. Седьмая: блок не раскрывается на телефоне из-за ошибки скрипта. Восьмая: ключевые слова и ответы для поиска размещены только внутри скрытого содержимого.

Девятая ошибка: аккордеон используют для отзывов или портфолио, где важнее наглядность. Десятая: после раскрытия страница прыгает, и человек теряет место. Исправьте плавной анимацией и прокруткой к началу блока. Одиннадцатая: никто не измеряет открытия, и дизайн существует «на веру».

Итог и следующий шаг

Раскрывающиеся блоки полезны, когда они убирают лишнее, а не прячут нужное. Цену, срок, условия и способ связи показывайте сразу, подробности, этапы и вопросы отправляйте под раскрытие, заголовки делайте конкретными, а каждое раскрытие считайте как цель в Яндекс.Метрике. Тогда вы узнаете, что действительно интересует клиентов, и сможете постепенно перестраивать страницу под реальные обращения.

Если хотите проверить, как устроены страницы услуг на вашем сайте, лучше обратиться к специалистам компании «Сайты Профессионально». Мы бесплатно проконсультируем по структуре страницы, подскажем, какие блоки оставить открытыми, настроим учёт открытий в Яндекс.Метрике и поможем связать его с обращениями из поиска, Яндекс Бизнеса и 2ГИС.