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