Длинные страницы на сайте аптеки неизбежны: полная инструкция к препарату, условия доставки, правила бронирования, описание программы лояльности. Посетитель приходит с конкретной задачей: проверить наличие, понять, как забрать заказ, найти нужный раздел. Если ответ спрятан в сплошном тексте, он уйдёт или позвонит в аптеку. Ниже собраны приёмы, которые меняют структуру и оформление страницы, но не затрагивают смысл содержимого.
Что должно быть на первом экране карточки препарата
Возьмём условный пример: страница лекарственного средства с полной инструкцией на несколько экранов. Частая ошибка: сверху название и фото, сразу за ними плотный текст, а цена, наличие и кнопка «Забронировать» остаются далеко выше по странице. Лучше собрать на первом экране всё, что нужно для решения: название и форму выпуска, цену, наличие в выбранной аптеке, главную кнопку. Под ними разместите ссылки на разделы инструкции. Тогда человек сразу видит, что страница нужная, и понимает, где что лежит.
Оглавление со ссылками-якорями вместо долгой прокрутки
Для длинной страницы добавьте короткое оглавление: «Состав», «Способ применения», «Противопоказания», «Хранение», «Наличие в аптеках». На телефоне его удобно сделать горизонтальной полосой или кнопкой «Перейти к разделу». Два технических момента часто упускают. Во-первых, названия в оглавлении должны совпадать с заголовками в тексте. Во-вторых, при переходе по якорю заголовок не должен прятаться под закреплённой шапкой сайта. Это проверяется на реальном устройстве, а не только в окне браузера на компьютере.
Как разбить текст, не изменив его смысл
Тексты инструкций и другие нормативные формулировки нельзя сокращать или «упрощать» ради читаемости. Это вопрос ответственности аптеки и источника текста, а не веб-студии. Менять можно оформление:
- короткие абзацы и заметные подзаголовки;
- маркированные списки там, где в оригинале стоит перечисление;
- отдельный выделенный блок для предупреждений, в который текст переносится дословно;
- размер шрифта на телефоне не меньше 16 px, межстрочный интервал около 1,5, длина строки примерно 60–80 знаков;
- достаточный контраст текста и фона: часть посетителей читает мелкий шрифт с трудом.
Когда сворачиваемые блоки помогают, а когда мешают
Аккордеоны уместны для второстепенных разделов: способы оплаты, возврат, график работы точек. Основные разделы инструкции лучше не прятать. Люди ищут нужное слово встроенным поиском по странице, а в свёрнутом блоке он срабатывает не всегда. Свёрнутый текст неудобно и распечатывать. Разумный компромисс: ключевые блоки раскрыты по умолчанию, есть кнопка «Развернуть всё», а переход по якорю сам раскрывает нужный раздел. Аккордеоны должны управляться и с клавиатуры.
Пример: страница «Как получить заказ»
Представим, что у аптеки есть страница про получение заказа, написанная одним полотном. Её можно перестроить так:
- вверху блок «Коротко» из трёх строк: способы получения, где оформить, куда обратиться с вопросом;
- ниже таблица со столбцами «Способ», «Как оформить», «Что понадобится»; условия и сроки подставляет владелец из своих правил;
- затем разделы с вопросами в заголовках: «Как забрать заказ в аптеке?», «Как работает доставка?», «Что делать, если заказ не подтвердили?»;
- в конце контакты и кнопка «Позвонить» или «Написать», закреплённая на мобильном.
Заголовки-вопросы удобны тем, что повторяют формулировку, с которой человек пришёл на страницу.
Проверочный список перед публикацией
- Цена, наличие и главная кнопка видны без прокрутки на телефоне.
- Есть оглавление, все его ссылки работают, заголовки не уходят под шапку.
- Абзацы короткие, перечисления оформлены списками.
- Предупреждения выделены, а их текст совпадает с исходным.
- Ключевые разделы не спрятаны в аккордеоны.
- Таблицы читаются на узком экране без горизонтальной прокрутки.
- Шрифт и контраст проверены на реальном устройстве.
- Текст инструкций согласован с ответственным сотрудником аптеки.
Лучшая проверка проста: дайте сотруднику, не знакомому со страницей, задачу вроде «найдите, где забрать заказ». Если он справился за несколько секунд, структура работает.
