Дизайн — статьи о сайтах
Владелец IT-интегратора обычно хочет уместить на первом экране всё сразу: десяток направлений, логотипы вендоров, сертификаты и слайдер с новостями. Посетитель при этом решает за несколько секунд, читать ли дальше. Ниже — из чего стоит собрать верхнюю часть главной страницы и что лучше оставить для нижних блоков.
Кто приходит на главную и с каким вопросом
Чаще всего это ИТ-директор, системный администратор или руководитель небольшой компании, у которого появилась задача: перевезти офис и построить сеть, заменить устаревшие серверы, наладить резервное копирование, внедрить учётную систему, передать обслуживание компьютеров подрядчику. Второй тип посетителя — человек, которому вас порекомендовали и который проверяет, что компания существует и занимается тем, о чём говорили.
Оба формулируют запрос задачей, а не названием технологии. Поэтому первый экран должен ответить на три вопроса: чем вы занимаетесь, для кого и что сделать, чтобы начать разговор.
Заголовок: назвать предмет работы и тип клиента
Фраза «Комплексные ИТ-решения для вашего бизнеса» подойдёт любой компании отрасли, поэтому ничего не сообщает. Заголовок работает, когда в нём есть предмет работы и тот, для кого она делается. Например: «Серверы, сети и рабочие места для офисов на 30–300 сотрудников». Диапазон указывайте только если он соответствует вашей реальной практике.
Подзаголовок в одну-две строки раскрывает формат работы: «Проектируем, устанавливаем и берём на обслуживание. Один договор и один ответственный инженер». Утверждайте только то, что вы действительно можете выполнить.
Условный пример первого экрана
Это схема для обсуждения, а не описание чьего-то готового проекта. Состав верхней части страницы:
- Шапка: логотип, телефон с кодом города, меню из четырёх-пяти пунктов («Услуги», «Проекты», «О компании», «Контакты»).
- Заголовок и подзаголовок по образцу выше.
- Главная кнопка: «Заказать обследование ИТ-инфраструктуры». Рядом вторая, менее заметная ссылка: «Как проходит проект».
- Справа от текста: простая схема из четырёх шагов — обследование, проект, внедрение, поддержка. Это заменяет декоративную картинку с серверами и показывает порядок работы.
- Узкая полоса внизу экрана: реальные статусы партнёрства с вендорами, если они у вас есть, с указанием уровня.
Важное должно помещаться примерно в первые 600 пикселей высоты: на небольших мониторах и ноутбуках остальное уже придётся прокручивать.
Чем подтвердить слова, не выдумывая достижений
Заказчик выбирает подрядчика, который будет иметь доступ к его серверам и данным, поэтому ему нужны проверяемые факты. На первый экран или сразу под него подойдут:
- адрес офиса и городской телефон, а не только форма обратной связи;
- год основания и сфера работы, если это правда;
- подтверждённые статусы у производителей оборудования и программ;
- названия клиентов — только с их письменного согласия.
Если называть клиентов нельзя, опишите типовой проект без названий: какая была задача, что сделано, сколько заняла работа. Слова «лидер рынка» и «лучшие решения» без основания лучше не писать — они не проверяются и читаются как шум.
Какое действие предложить и как не отпугнуть формой
Не каждый посетитель готов сразу оставить заявку. Поэтому полезны две ступени. Для готового — телефон и кнопка с конкретным обещанием: «Заказать обследование» понятнее, чем «Отправить». Для изучающего — ссылка на материал, который можно оценить без контакта: описание этапов проекта, пример состава работ, список вопросов, которые вы задаёте на обследовании.
Форму сделайте короткой: имя, телефон или почта, поле для описания задачи в свободной форме. Сроки ответа указывайте, только если вы их стабильно выдерживаете. Крупный слайдер на Flash, который сменяет сообщения каждые несколько секунд, на первом экране вреден: часть устройств его не показывает, а посетитель не успевает прочитать ни один из слайдов.
Проверочный список для первого экрана
- Из заголовка понятно, что вы делаете и для кого, без чтения меню.
- Заголовок нельзя перенести на сайт конкурента без правок.
- Есть одна главная кнопка и она называет действие.
- Телефон и город видны без прокрутки.
- Логотипы вендоров и клиентов не вытесняют заголовок и опираются на реальные статусы и разрешения.
- Нет автоматической смены слайдов, скрывающей главное сообщение.
- Показать страницу человеку не из отрасли на пять секунд и спросить, чем занимается компания: он отвечает верно.
