Сайт онлайн-школы: особенности и этапы создания

Советы от UX/UI-дизайнера Анастасии Шек.

Сайт Анастасии, канал в Telegram.

Вы разработали информационный продукт, определились с целевой аудиторией, методологией, структурой. Следующий шаг — это упаковка продукта, в том числе создание сайта. 

Сайт онлайн-школы — один из самых важных инструментов продвижения. При этом сайты образовательных учреждений специфичны: здесь важны чёткие доказательства надёжности и качества предоставляемых услуг и самой компании.

Особенности сайтов онлайн-школ

1. Контент превыше дизайна

Сайт впервые знакомит аудиторию с вашей школой, содержанием курсов и демонстрирует преимущества обучения. Нам важно с помощью контента показать экспертность и вызвать доверие. В связи с этим на сайте школ много текстового контента. Визуал тоже важен, но он играет второстепенную роль.

2. Инструмент продаж

Сайт школы — конечный пункт воронки продаж, туда мы приводим аудиторию для совершения покупки. Время простых воронок ушло, привлечение клиентов становится сложнее технически, а значит, и дороже. Поэтому наша задача — создать удобный, понятный, привлекательный сайт, чтобы посетитель совершил целевое действие.

3. Отложенный срок совершения целевого действия

Покупка услуги может совершаться не сразу, чаще всего люди сравнивают условия на сайтах нескольких школ. Некоторые возвращаются через длительное время.

4. Сайт онлайн-школы выполняет информационную и рекламную функции

Это либо площадка для учёбы, либо связующее звено с учебной платформой. Здесь пользователям важны простота взаимодействия и функционал. Мы должны снижать когнитивную нагрузку, чтобы пользователь мог в пару кликов перейти в личный кабинет и найти нужный урок. При этом важна и мобильная версия сайта, так как много людей и изучают информацию о школе, и смотрят уроки с телефонов.

Что учесть при создании сайта онлайн-школы

1. Цель создания сайта

Работа над сайтом, как правило, начинается после согласования содержания курса и всей стратегии продвижения. Я бы советовала привлекать дизайнера уже на этапе согласования, так дизайнер глубже погрузится в особенности вашего проекта, сможет внести свои предложения по выбору платформы, структуре, дизайну и укажет, какие решения подходят именно вам. Зачем сайт школе? Собрать аудиторию на бесплатный вебинар, продать курс или мастер-класс, пригласить учеников на новый курс? От цели сайта зависит и площадка, и наполнение, и дизайн.

2. Конкурентный анализ и анализ ниши 

Имея портрет аудитории, легче понять, какой дизайн и функционал нам подойдёт.

Тем не менее хороший дизайнер проведёт своё исследование ниши и анализ конкурентов. Это нужно для понимания сильных и слабых сторон конкурентов, трендов на рынке и технической составляющей проекта. Также у конкурентов мы можем подсмотреть какие-то идеи и фишки, увидеть ошибки, которые нам повторять не стоит.

Представим, что вы создаёте сайт по обучению интернет-маркетингу. Ниже представлена таблица конкурентного анализа, которую я использую в работе. 

Первый столбик мы заполняем данными своего проекта.

Также проводится визуальный анализ, где изучается дизайн.

Пример резюме визуального анализа в нише корпоративных сайтов медицинской сферы.

3. Проработка структуры

Структура сайта подвижна: она меняется в зависимости от специфики вашего проекта и логики сторителлинга. Но есть блоки, которые размещать обязательно. Например, на главной странице курса можно разместить следующие блоки.

• Обложка

Обложка должна в течение двух секунд заинтересовать пользователя, рассказать, куда он попал. На сайте школы важно дать название курса, УТП, кнопку действия. Можно дать цифры с преимуществами или информацию, отличающую вас от конкурентов.

На обложке мы сразу видим преимущества.

В этом примере акцент на личный бренд Дмитрия Румянцева и есть информация о лицензии на образовательную деятельность.

А это не самый удачный пример: на обложке нет кнопки действия и плохо видны преимущества.

• Краткое описание продукта, где можно показать цифры

Этот раздел рассказывает о вашем курсе: о чём он, кому будет актуален, каковы его преимущества.

Пример с цифрами, рассказывающими о продукте.

В этом примере цифры есть, но они не акцентированы. Лучше делать их крупными или цветными и давать отдельным блоком, чтобы зацепить взгляд пользователя.

• Для кого подходит курс

Курс может быть создан для разной аудитории: это и начинающие специалисты, и те, кто имеет опыт. Отдельно стоят корпоративные клиенты, информация о подобном обучении не должна теряться.

Перечислены все основные ЦА курса.

А ниже, после тарифов, дана информация по корпоративным клиентам. 

Оба примера с сайта.

В этом примере в названии самих курсов прописана целевая аудитория.

• Какие проблемы решает, чему учит

Сравнивая сайты различных школ, пользователь будет обращать внимание на программу, наполненность курсов и навыки, которые получит по окончании учебного процесса. Нужно помнить, что обучение — дорогостоящая услуга, люди будут придирчиво изучать ваш сайт. Чем более полной будет информация о курсе, чем больше вы дадите пользы клиентам, тем выше шанс покупки.

На этом сайте раздел «Чему научит» состоит из нескольких подробных блоков.

Хороший пример, где говорится, что во время обучения вы наполните своё портфолио проектами. В слайдере проекты представлены наглядно.

• Что вы будете иметь по завершении учёбы

Один и тот же курс у разных школ может давать неодинаковые навыки. Кто-то предлагает чуть больше, кто-то даёт дополнительные модули/курсы. Подумайте, чем вы можете привлечь пользователя. Распишите навыки, которыми овладеет ученик по завершении обучения.

Чётко, без воды перечислены навыки.

В этом примере перечислены и навыки, и инструменты.

Хороший пример: даны ключевые преимущества в раскрывающихся карточках. Так мы подчёркиваем главное, но даём возможность ознакомиться с тезисом подробнее.

• Как происходит обучение

Казалось бы, онлайн-обучение стало привычным вам инструментом. Но всё же большой процент пользователей приходит к такому формату впервые. Например, родители выбирают курс по программированию для ребёнка. Им важно понять, как строится обучение, сколько времени ребёнок будет проводить у компьютера, что делать в случае пропуска. Наша задача — подать информацию для разной аудитории.

Этот пример нравится тем, что в прямоугольнике слева идёт видео с обзором площадки.

Также пример с видео, где показано, как проходит урок.

• Преимущества и фишки

В целом сайты курсов похожи структурой, а сами курсы — программой. Но у каждой школы есть отличительные особенности.

Хороший пример привлечения: готовые файлы для работы.

Также хороший стимул к покупке — доступ к закрытому клубу с доп. материалами.

• Преподаватели

Люди любят людей. Нам важно видеть, с кем мы будем взаимодействовать. А если речь идёт о детских курсах, то важность этого блока повышается в разы.

Блок с кликабельными карточками рассказывает о преподавателях.

Пример с раскрывающимися карточками.

• Трудоустройство

Не все школы помогают с трудоустройством и тем более дают гарантии. Но если у вас есть такая услуга, обязательно посвятите ей отдельный блок.

Skillbox помогают и со стажировкой, и с трудоустройством.

Пример с блоком по трудоустройству от школы веб-дизайна.

• Отзывы и кейсы

При выборе обучения люди продолжают читать отзывы. И не только на сайте, но и на других платформах: в соцсетях и отзовиках. Поэтому важно показать, что ваши отзывы реальны. Лучше давать ссылки на человека, оставившего отзыв, или размещать отзывы в видеоформате.

Хороший пример с видеоотзывами.

Отзывы оформлены в виде карточек с раскрывающейся информацией.

• Программа продукта и формат

За программой к вам и идут. В целом курсы по наполнению похожи друг на друга. И вот тут важно выделиться среди конкурентов. Кто-то делает упор на качество обратной связи, кто-то даёт дополнительные модули. В разделе с программой можно показать основные треки с возможностью просмотра полной программы либо же показать программу сразу. В любом случае она должна быть на виду.

Пример программы с раскрывающимися карточками.

В этом примере даны основные модули с их содержанием, а также возможность посмотреть всю программу.

• Сертификат или диплом

Не все школы предоставляют сертификат или диплом государственного образца. Если вы прошли аккредитацию, это, безусловно, станет вашим преимуществом.

Пример блока с государственной лицензией.

• Тарифы, рассрочка

В этих блоках важно показать наполненность тарифов и отличие друг от друга. Тарифы лучше верстать в виде карточек, чтобы даже визуально была видна разница.
Рассрочка также важна, так как обучение стоит недёшево. Аудитория ищет саму возможность рассрочки и изучает условия.

Тарифы свёрстаны в карточках, визуально видны различия.

Также сразу видны различия в тарифах, плюс дана возможность бесплатного ознакомления с продуктом.

• Гарантия возврата

Я — за уважительное, прозрачное взаимодействие. При выборе обучения, особенно без возможности бесплатного ознакомления с курсом, важно иметь возможность вернуть средства. Распишите ваши условия работы, будьте честны с аудиторией.

Раньше этот блок был на многих сайтах, сейчас акцент сместился на рассрочку, гарантии встречаю редко.

Один из немногих примеров подобного блока.

• Частые вопросы

В этом блоке мы можем закрывать вопросы, которых не коснулись ранее.

Ещё пример.

• Кнопки с призывом купить обучение

Цель нашего сайта — продать курс, поэтому важно встроить маркетинговые элементы в структуру. Размещаем кнопки там, где этого требует логика. Например, кнопки должны быть обязательно на обложке, в блоке с программой, тарифами, преимуществами.

Блок со стоимостью, конечно, должен иметь призыв к действию.

Можно закрепить кнопку внизу экрана, чтобы у пользователя была возможность совершить покупку на любом этапе.

Здесь закреплена и кнопка, и значок Telegram для быстрой связи.

Форму заявки даём не только в конце, но и в середине страницы. Это связано с тем, что сайты школ, как правило, длинные. Мы же должны, во-первых, облегчить взаимодействие с сайтом, а во-вторых, ненавязчиво призвать к покупке.

Такие элементы, как обратный отсчёт до следующего повышения стоимости, тоже встречаются довольно часто. Главное — чтобы маркетинг не конфликтовал с UX.

4. Дизайн и вёрстка

Только после этого дизайнер приступает к проектированию. Сначала создаётся прототип сайта, чтобы понять расположение блоков, после этого добавляются цвета, изображения, шрифт. То есть визуальное оформление идёт после утверждения прототипа. В первую очередь важно согласовать именно структуру и наполнение блоков сайта, только потом уже переходить к дизайну этих блоков.

Сначала создаются серые прототипы, где намечается расположение контента. Затем добавляются шрифт и цвета.

Итоговый макет может отличаться от прототипа.

Эти два примера — с моего проекта.

5. Техническая часть

Этот этап состоит из технических настроек самого сайта (подключение домена, оптимизация для SEO, подключение сервисов и других), а также настройки обучающей платформы. О выборе платформы стоит задуматься заранее.

Выбор платформы будет зависеть от многих факторов: масштаба обучения, количества учеников, необходимого набора инструментов, финансовых ограничений. Вам должно быть удобно и просто работать с платформой, нужно смотреть на адаптивность, ограничения самой платформы.

Что ещё следует учесть при создании сайта школы?

1. Соответствие всем требованиям закона

На сайте должны быть размещены все требуемые законом документы: политика конфиденциальности, пользовательское соглашение, публичная оферта и другие документы. Помним также о согласиях на обработку персональных данных, на использование логотипов, на размещение отзывов. 

Как правило, юридическую информацию размещают в футере сайта и после форм.

2. Блог на сайте

Полезные статьи с несколькими рубриками станут дополнительным источником трафика. Блог на сайте можно использовать как инструмент SEO-продвижения. Кроме того, пользователи видят, что школа живёт насыщенной жизнью, сайт обновляется.

3. Обновление контента

Если посетитель видит, что сайтом занимаются, контент обновляется, у него складывается впечатление, что вам не всё равно. Что сайт живёт.

К примеру, блог нужно обновлять достаточно часто: раз в неделю-две. Следует собирать отзывы и размещать их на сайте по мере поступления. Если я зайду на сайт 24 мая, увижу, что набор идёт постоянно, а последний отзыв был 15 ноября, то вряд ли это станет плюсом для школы.

Отлично, когда школа идёт в ногу со временем. Например, видит, что развиваются ИИ, и вводит модуль по ИИ.

4. Важность адаптивов

Многие люди проходят обучение с мобильных устройств. Наша задача — сделать этот процесс максимально комфортным. Многие пользователи сейчас смотрят уроки с телефона, а значит, мобильная версия не должна уступать десктопной ни по наполнению, ни в технической части. Я советую не пренебрегать разрешениями и под планшеты, несмотря на малый процент пользователей подобных устройств.

Примеры 1 и 2.

Итак, на сайтах школ важны тексты, способные убедить пользователя совершить покупку именно у вас. Сайты школ похожи по структуре, да и сами курсы по содержанию отличаются не сильно. Поэтому школе так важно выделиться среди конкурентов и за счёт УТП, дополнительных модулей, программных отличий, и за счёт самого дизайна.