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