Дизайн — статьи о сайтах
Посетитель сайта хостинг-провайдера обычно сравнивает несколько компаний в соседних вкладках. На главной он ищет не историю компании, а ответы на три вопроса: подойдёт ли это для его сайта, сколько это стоит и к кому обращаться, если что-то сломается. Первый экран, то есть то, что видно без прокрутки, должен дать эти ответы или показать, где их найти.
Кто приходит на главную и что ему нужно
Обычно можно выделить три группы посетителей. Первые впервые делают сайт: визитку, блог, страницу небольшой компании. Вторые владеют работающим сайтом или интернет-магазином и выбирают место, где он не будет часто «ложиться». Третьи — администраторы и разработчики, которым нужен VPS или выделенный сервер.
Один экран не обслужит всех одинаково. Решите, какой сценарий главный (чаще это виртуальный хостинг для сайта), и сделайте его заметным. Остальные направления вынесите в понятное меню и короткие подсказки вроде «Нужен свой сервер? Смотрите VPS».
Из чего собрать первый экран
- Заголовок, который называет предложение. Фраза «Надёжный хостинг для вашего бизнеса» подходит любой компании и ничего не сообщает. Конкретный вариант: «Хостинг для сайтов на WordPress, Joomla и 1С-Битрикс». Он сразу показывает, для кого вы работаете.
- Подзаголовок с двумя-тремя проверяемыми фактами: тестовый период, помощь с переносом сайта, время ответа поддержки. Пишите только то, что вы действительно выполняете и что описано в договоре или правилах.
- Одно главное действие. Кнопка «Выбрать тариф» или поле «Проверить домен». Две равнозначные кнопки заставляют посетителя думать, а не действовать.
- Стартовый тариф с параметрами: объём диска, число сайтов и баз данных, поддерживаемые версии PHP и MySQL, наличие резервных копий, цена за период.
- Способы связи: телефон, онлайн-чат, форма заявки и время работы. Если поддержка круглосуточная, напишите об этом рядом с контактами.
Условный пример фрагмента страницы
Ниже схема для вымышленной компании. Тексты и цифры в квадратных скобках нужно заменить своими.
- Заголовок: «Хостинг для сайтов на WordPress, Joomla и 1С-Битрикс».
- Подзаголовок: «Перенесём ваш сайт бесплатно. Тестовый период — [N] дней. Поддержка отвечает на заявки в среднем за [N] минут». Последнюю фразу оставляйте, только если вы измеряете это время.
- Слева: поле «Введите домен» и кнопка «Проверить».
- Справа: карточка тарифа «Старт»: [N] ГБ на SSD, [N] сайтов, [N] баз данных, ежедневные копии за [N] дней, [цена] ₽ в месяц, кнопка «Заказать».
- Под карточкой: ссылка «Сравнить все тарифы» и строка «Условия использования ресурсов» — туда вы выносите ограничения по нагрузке.
- В шапке: телефон, кнопка «Чат с поддержкой», вход в панель управления.
Вход в панель клиента держите в шапке отдельной ссылкой. Существующие клиенты заходят на сайт часто, и если им придётся искать вход, они будут раздражены и начнут звонить в поддержку.
Что лучше убрать с первого экрана
- Автоматический слайдер. Посетитель не успевает прочитать вторую и третью надпись, а важное предложение может исчезнуть в момент, когда он собрался нажать.
- Фотографии серверных стоек и абстрактные «технологичные» картинки. Они занимают место, но не помогают выбрать тариф. Лучше показать реальные параметры или фрагмент панели управления.
- «Безлимитно» без пояснений. Опытный посетитель знает, что ограничения есть. Честнее назвать конкретные лимиты или дать явную ссылку на правила.
- Громкие цифры без пояснений. Если пишете об аптайме, объясните, как он считается и что будет при нарушении. Иначе число выглядит как украшение.
- Всплывающие окна с акциями или предложением оставить телефон в первые секунды визита.
Проверка на разных экранах
Часть посетителей открывает сайт с планшетов и смартфонов, а на ноутбуках часто бывает невысокое разрешение, например 1366×768. Проверьте главную на таких экранах. Заголовок, поле домена или кнопка тарифа не должны уезжать вниз за огромной картинкой. На телефоне номер должен набираться нажатием, а поле домена не должно требовать увеличения масштаба.
Проверочный список для главной страницы
- По заголовку понятно, что вы продаёте и для каких сайтов.
- Главное действие одно, и кнопка видна без прокрутки.
- Показан хотя бы один тариф с ключевыми параметрами и ценой за понятный период.
- Все обещания в подзаголовке подтверждены условиями и вы готовы их выполнять.
- Ограничения тарифов доступны по ссылке рядом, а не спрятаны в конце сайта.
- Контакты поддержки и вход в панель клиента находятся в шапке.
- Нет автопрокрутки и всплывающих окон в первые секунды.
- Экран проверен на ноутбуке с невысоким разрешением, планшете и телефоне.
- Кто-то, не знакомый с хостингом, за десять секунд может объяснить, что вы предлагаете.
Последний пункт проверьте вживую: покажите страницу коллеге или знакомому из другой отрасли и попросите пересказать предложение. Если пересказ не совпал с вашим замыслом, исправьте формулировки первого экрана до того, как менять дизайн.
