Дизайн — статьи о сайтах
Владелец онлайн-школы хорошо знает свои продукты: направления, курсы, потоки, тарифы. Посетитель этого не знает. Сайт должен сам показать, как разделы связаны, чтобы человек без подсказок прошёл путь от запроса «хочу научиться» до заявки. Ниже разбираем, какие страницы соединять и как подписывать ссылки.
Какие вопросы задаёт посетитель и какие разделы на них отвечают
Перед записью на курс человек ищет ответы на несколько вопросов: подойдёт ли курс, чему я научусь, кто преподаёт, когда старт, сколько стоит, как проходит обучение, что будет, если я не успею. Каждому вопросу соответствует свой раздел: описание, программа, преподаватели, расписание потоков, тарифы, условия обучения, отзывы. Если ответ лежит в разделе, на который с курса нет ссылки, посетитель его не найдёт и уйдёт сравнивать с другой школой. Поэтому связи нужно проектировать от вопросов, а не от структуры меню.
Страница курса как центр связей
Страница курса получает больше всего переходов и должна направлять дальше. Условный пример для вымышленного курса «Основы веб-вёрстки»; это иллюстрация структуры, а не готовый шаблон:
- Верхний блок: название, для кого курс, кнопка «Записаться на ближайший поток» (ведёт к форме) и ссылка «Смотреть программу» (якорь ниже на этой же странице).
- Программа по модулям: у модуля с открытым пробным уроком стоит ссылка «Посмотреть пример урока».
- Блок «Преподаватель»: имя, две строки о его практике и ссылка «Все курсы автора» на его страницу.
- Блок «Ближайшие потоки»: даты и ссылка «Расписание всех потоков этого курса».
- Тарифы: рядом ссылка «Что входит в тариф» на условия обучения, например проверка домашних заданий и срок доступа к записям.
- Отзывы: у каждого есть ссылка на курс, который проходил автор отзыва.
- Финал страницы: «Что учить дальше», 2–3 курса следующего уровня и ссылка на направление целиком.
Подписи говорят, что человек найдёт после клика. «Что входит в тариф» понятнее, чем «Подробнее», а «Все курсы автора» понятнее, чем «Перейти».
Курсы, преподаватели и потоки: связи в обе стороны
Частая ошибка: со страницы курса есть ссылка на преподавателя, а обратно нет. Страница преподавателя должна перечислять его курсы, страница потока — вести на курс и на условия обучения, а страница направления — показывать все курсы с уровнем и ближайшей датой старта.
Если сайт работает на системе управления, заведите курс, преподавателя и поток как отдельные записи и выводите связанные списки автоматически. Тогда после смены даты старта не придётся вручную править пять страниц. Завершённые потоки не удаляйте, иначе ссылки с блога и из отзывов приведут на ошибку. Пусть страница старого потока предлагает ближайший открытый набор или форму «Сообщить о новом наборе».
Как блог и полезные материалы ведут к курсам
Статья вроде «Как выбрать язык программирования для первого проекта» приходит к человеку на раннем этапе выбора. Внутри и в конце текста поставьте ссылку на подходящее направление и конкретный курс, объяснив, чем он полезен именно этому читателю: «Программа курса для тех, кто начинает с нуля». Фраза «Узнать больше» ничего не объясняет.
Связь работает и в обратную сторону: на странице курса добавьте блок «Материалы по теме» с 2–3 статьями, которые отвечают на типичные сомнения. Не ставьте десяток ссылок подряд: чем их больше, тем меньше шансов, что кликнут нужную.
Меню, хлебные крошки и подвал: что где разместить
В главное меню вынесите разделы, с которых начинают поиск: направления, преподаватели, расписание, тарифы, о школе, блог. Вход в личный кабинет отделите от кнопки записи, чтобы действующие ученики и новые посетители не путались. Выпадающие меню глубже двух уровней неудобны, особенно на телефоне.
Хлебные крошки «Главная → Направления → Веб-разработка → Основы веб-вёрстки» показывают, где находится человек, и позволяют вернуться на уровень направления без кнопки «назад». В подвал уместно убрать служебное: контакты, документы, ответы на частые вопросы, способы оплаты.
Проверочный список для связей между разделами
- С любой страницы курса можно за один клик дойти до программы, преподавателя, потоков, тарифов и формы записи.
- Страница преподавателя ссылается на его курсы, а страница потока — на курс.
- Ссылки подписаны по содержанию того, что за ними, а не словами «Подробнее» и «Здесь».
- У каждой статьи блога есть переход к связанному курсу или направлению.
- В конце страницы курса есть следующий шаг: похожие курсы или курс следующего уровня.
- Завершённые потоки и снятые курсы не дают ошибки, а ведут на актуальную замену.
- Хлебные крошки есть на страницах глубже второго уровня.
- Меню и подвал проверены на телефоне: пункты нажимаются без увеличения.
- Переходы по ссылкам проверены вручную: нет битых адресов и циклов, когда две страницы ссылаются только друг на друга.
Пройдите этот путь сами, как человек, который видит сайт впервые. Места, где вы остановились и не знали, куда нажать, и есть те связи, которых не хватает.
