Дизайн — статьи о сайтах
Страница тура или направления у туристического агентства почти всегда длинная: программа по дням, включённые услуги, условия оплаты, описание отеля, отзывы. Убрать это нельзя, но можно построить страницу так, чтобы посетитель не терялся и находил ответ за несколько секунд.
Почему страница тура превращается в «простыню»
Обычно страницу собирают из материалов туроператора: описание копируют целиком, программа идёт сплошным текстом, условия набраны мелким шрифтом в самом конце. Между тем человек, который сравнивает три-четыре предложения в соседних вкладках, не читает подряд. Он ищет ответы на конкретные вопросы: когда вылет, что входит в стоимость, за что придётся доплатить, что будет при отмене. Если ответ приходится искать прокруткой, он закрывает вкладку или звонит, а менеджер в десятый раз отвечает на одни и те же вопросы.
Сводка в начале: ответы на главные вопросы
Сразу под заголовком тура поставьте компактный блок фактов. Условный пример для страницы «Неделя в Черногории: отдых у моря»:
- даты и длительность: «вылет 12 июня, 8 дней / 7 ночей»;
- откуда вылет и каким рейсом или транспортом добираться;
- проживание: название отеля, тип номера, питание;
- цена «от …» с пояснением, на каких условиях она рассчитана (например, на человека при двухместном размещении);
- кнопка «Узнать наличие мест» и телефон рядом.
Это короткая версия всей страницы. Часть посетителей решит по ней, подходит ли тур, а остальные поймут, стоит ли читать дальше.
Оглавление со ссылками-якорями
Под сводкой разместите строку ссылок: «Программа · Что включено · Отель · Условия оплаты · Отзывы · Вопросы». Каждая ведёт на свой раздел по id заголовка. Такое меню можно закрепить при прокрутке, но на экране телефона или планшета оно должно занимать одну строку и не закрывать текст. В конце каждого раздела добавьте ссылку «К оглавлению». Используйте обычные якоря, а не сложные скрипты: тогда кнопка «Назад» в браузере работает привычно, а ссылкой на раздел можно поделиться.
Что свернуть, а что оставить на виду
Раскрывающиеся блоки подходят для справочных и повторяющихся деталей. Но то, от чего зависит решение о покупке, прячьте осторожно.
- Оставьте открытым: цену и то, что в неё входит, список «оплачивается отдельно», даты, краткие условия изменения и отмены.
- Можно свернуть: подробности каждого дня программы, описание номеров, полный текст условий договора.
У свёрнутого блока заголовок должен говорить сам за себя: не «День 3», а «День 3. Котор и бухта, после обеда свободное время». Добавьте ссылку «Развернуть все дни», проверьте, что страница нормально печатается с раскрытым содержимым и что при отключённом JavaScript текст не пропадает.
Оформление текста: абзацы, списки, таблицы
- Абзац — не длиннее 4–5 строк, одна мысль на абзац.
- Ширина строки 60–90 знаков, шрифт основного текста не мельче 14–16 px.
- «Включено» и «не включено» — два отдельных списка, а не одна фраза через запятую.
- Подзаголовки по смыслу: «Что оплачивается на месте» вместо «Дополнительно».
- Таблицу дат и цен делайте простой; на узком экране она должна прокручиваться по горизонтали или превращаться в список.
- Кнопку заявки и телефон повторяйте в середине и в конце страницы, чтобы не возвращаться наверх.
Проверочный список перед публикацией
- В первом экране видны даты, длительность, отель, цена «от» с условиями и кнопка заявки.
- Есть оглавление, и каждая ссылка приводит к нужному заголовку.
- Условия оплаты и отмены найти можно не более чем за два действия.
- Нет абзацев длиннее пяти строк и разделов без подзаголовка.
- Раскрывающиеся блоки работают без мыши и без скриптов, есть «развернуть все».
- Страница открыта и проверена на телефоне: текст читается без увеличения, кнопки нажимаются пальцем.
- Сведения о ценах и условиях совпадают с актуальными данными оператора, дата обновления понятна.
Проверить страницу проще всего на живом человеке: попросите знакомого, который не знает тур, найти дату вылета, список доплат и условия отмены. Если на каждый вопрос уходит больше полуминуты, структуру стоит доработать.
