Дизайн — статьи о сайтах
Владелец клуба обычно хочет уместить на главной всё сразу: акции, тренеров, залы, цены, отзывы. Но первый экран, то есть то, что видно без прокрутки, решает одну задачу. Он должен быстро подсказать человеку, что это за клуб, где он находится и что делать дальше. Остальное можно разместить ниже.
С какими вопросами человек приходит на сайт клуба
Чаще всего посетитель заходит с телефона, из поиска, с карты или из соцсетей. У него в голове несколько вопросов: удобно ли добираться от дома или работы, есть ли нужное направление (тренажёрный зал, групповые занятия, бассейн, детские секции), до скольки открыто и как попробовать. Если ответов на экране нет, человек открывает сайт другого клуба, а в городе их обычно несколько. Поэтому на первом экране нужны ответы хотя бы на первые два-три вопроса.
Из чего собрать первый экран
- Название и формат одной фразой. Например: «Фитнес-клуб с бассейном и групповыми программами рядом с метро». Лозунги вроде «Территория вашей силы» не объясняют, что вы предлагаете.
- Район, адрес, часы работы. Для клуба локация часто важнее оформления. Если рядом метро или крупная остановка, укажите это.
- Одна главная кнопка. Например, «Записаться на гостевое посещение» или «Оставить заявку на экскурсию по клубу». Выбирайте то, что клуб реально предлагает. Рядом поставьте телефон, на мобильном он должен набираться одним касанием.
- Настоящее фото. Покажите свой зал, бассейн, раздевалку. Посетитель выбирает место, где будет бывать, и хочет увидеть его. Стоковые фото с идеальными телами этого не показывают.
- Меню с понятными пунктами. «Расписание», «Абонементы», «Тренеры», «Контакты». Эти разделы ищут чаще всего, прятать их в «Ещё» не стоит.
Условный пример: как это может выглядеть
Возьмём вымышленный клуб «Пример-Фит». Это иллюстрация структуры, а не описание реального проекта. На мобильном первый экран может выглядеть так, сверху вниз:
- логотип, кнопка меню и значок телефона;
- фото основного зала при дневном свете;
- заголовок: «Фитнес-клуб с бассейном в районе Северный»;
- подзаголовок: «ул. Садовая, 12, пять минут от остановки «Площадь». Ежедневно с 7:00 до 23:00»;
- кнопка «Записаться на гостевой визит» и под ней ссылка «Позвонить»;
- строка-подсказка о следующем блоке: «Расписание на сегодня», чтобы человек понял, что ниже есть конкретика.
На широком экране компьютера справа от текста можно поставить короткую форму из двух полей: имя и телефон. Лишние поля вроде даты рождения и «как вы о нас узнали» лучше убрать, они снижают желание заполнять форму.
Что лучше убрать с первого экрана
- Карусель из нескольких баннеров. Слайды сменяются раньше, чем их успевают прочитать, а мелкий текст на картинках с телефона не разобрать. Если акция важна, выберите одну и сделайте её текстом, а не картинкой.
- Видео с автозвуком или тяжёлый ролик. На мобильном интернете оно грузится долго и отвлекает. Видео с залом лучше поместить ниже и запускать по нажатию.
- Всплывающее окно при входе. Человек ещё не понял, куда попал, а ему уже предлагают оставить телефон.
- Цену без пояснений. Если показываете «от …», рядом подпишите, что в неё входит и на какой срок. Какие условия называть на сайте, решайте вместе с отделом продаж.
Как проверить первый экран перед запуском
Откройте главную на своём телефоне, покажите её коллеге или знакомому на пять секунд и уберите экран. Спросите, что это за клуб, где он находится и что можно сделать на сайте. Если человек не ответил, значит, главная мысль потерялась.
После запуска настройте в Яндекс.Метрике цели: клик по телефону, отправка формы, переход в «Расписание». Карта кликов и вебвизор покажут, на что нажимают посетители и что они пропускают.
Короткий чек-лист:
- из заголовка понятно, какой это клуб и какие в нём направления;
- виден район или адрес и часы работы;
- есть одна заметная кнопка и кликабельный телефон;
- фото сделано в вашем клубе;
- нет карусели, автозвука и всплывающих окон при входе;
- форма короткая, не больше двух-трёх полей;
- на телефоне кнопка видна без прокрутки;
- меню ведёт на расписание, абонементы, тренеров и контакты.
