UX — это аббревиатура от User Experience, т.е. пользовательский опыт. А UX-дизайн — это процесс, при котором создатель сайта определяет, каким будет этот опыт для пользователя.
Если UX-дизайн онлайн-школы хороший, то пользователю:
понятно, на какой сайт он попал и что ему предлагают;
легко найти нужную информацию о курсе;
- пользоваться сайтом интуитивно и просто.
Стоит ли говорить, что непродуманный UX-дизайн отпугивает посетителя и мешает продавать курсы онлайн-школам. В статье рассмотрим:
типичные ошибки в UX-дизайне на примере онлайн-школ из топ-50;
как пользователи ищут информацию на страницах сайтов;
- рабочие решения лидеров рынка.
Обо всем этом расскажет Марина Сидорова, специалист по UX агентства SF.RU. Она работала с такими проектами, как GeekBrains, Lazurit, Novatika, Divan.ru, Subaru и другими.
Что надо держать в фокусе
Чтобы пользователю было удобно пользоваться платформой, надо выполнить три главных условия.
1. Выбрать систему для сайта, с которой пользователю легко взаимодействовать. Она должна:
- быстро реагировать на действия пользователя и не «зависать» при каждом клике;
- быть гибкой и многовариантной — на сайт приходят пользователи с разным опытом, и система дает возможность совершить одно действие разными путями;
- быть предупредительной, очеловеченной — предугадывать дальнейшие действия пользователя и предупреждать о своих.
2. Создать хорошую архитектуру и структуру сайта.
Когда структура сайта логичная и понятная, пользователь с легкостью найдет то, что ему нужно, и дойдет туда, куда нужно нам.
3. Доверие к ресурсу и бренду в целом.
Без доверия невозможно принять решение о покупке. Недоверие рождает тревожность. Никто не будет отдавать деньги неизвестно кому неизвестно за что. Поэтому важно сформулировать и показать, почему нам можно доверять.
О том, какие элементы сайта помогают вызвать доверие у посетителя, мы расскажем в следующей статье «Как вызвать доверие к онлайн-школе с помощью сайта».
Какие CMS чаще разрабатывают сайты в сфере EdTech
Мы проанализировали топ-50 компаний и составили рейтинг используемых CMS в образовательной сфере.
Чаще всего используют самописные системы. Они позволяют создать уникальный функционал под конкретную задачу. Все ограничивается лишь наличием грамотных разработчиков и ресурсов. Готовые системы обойдутся дешевле, но у каждой есть свои рамки. Из них самые популярные Tilda, WordPress, Django.
Выбирать CMS нужно исходя из задач, которые стоят перед вами при разработке сайта. Выбор зависит от того, насколько:
легко система обрабатывает запросы пользователей;
она оперативна;
- полно удастся воплотить все задумки дизайнера, разработчика или проектировщика сайта.
Разбираем типичные ошибки в UX-дизайне на примерах крупных онлайн-университетов
1. Страница не отвечает ожиданиям посетителя: Skyeng
Попасть на страницу курса пользователь может разными путями: из объявлений соцсетей, контекстной рекламы, поисковиков, смежных площадок. Но когда он найдет один курс, скорее всего, захочет посмотреть, что есть еще. Тогда он идет на главную страницу или в разделы горизонтального меню.
На картинке выше видна ошибка на сайте компании Skyeng. При клике на логотип пользователь переходит на главную страницу старой версии сайта. Как минимум, он не понимает, туда ли он попал, на нужном ли ресурсе. Он может уйти с сайта и перейти на сайты конкурентов.
2. Отсутствие фидбека при поиске и фильтрации по курсам: Geekbrains
Слева можно расположить вертикальное меню и установить фильтры поиска, если курсов много. Если их несколько, задача упрощается: выносим в меню или на главную страницу и даем доступ.
Хороший инструмент — строка поиска, но поиск должен учитывать словоформы, выводить результаты и подсказки по не полностью набранному слову. Хорошо, когда поиск распознает раскладку клавиатуры и подсказывает варианты поисковых слов, когда пользователь перепутал язык.
Ощутимая кочка, о которую может споткнуться пользователь, используя фильтры — система не дает обратной связи пользователю, что применила фильтр.
Например, на скрине ниже платформа GeekBrains отсортировала курсы по возрастам. На скрине курсы отфильтрованы по возрасту детей: 7–10 лет. Но фильтр не выделен цветом, как это обычно бывает. Пользователю непонятно, сработал ли фильтр, туда ли он нажал, то ли ему выдала система. Он чувствует смятение, в какой-то степени негатив, а любого негатива лучше избегать. Это опыт пользователя, а опыт нам нужен положительный.
3. Неочевидная группировка курсов по направлениям: GeekBrains
Упрощайте своим пользователям жизнь, не заставляйте их много думать.
В соответствии с принципами UX важно, чтобы вложенные элементы соответствовали исходной группе, к которой они относятся. Например, компания SkillBox, университет онлайн-профессий, предлагает направление «Игры». В нем мы видим курсы разработка игр, гейм-дизайн, художник. Но среди них встречается спортивный менеджер, ивент-менеджер в спорте, стрим-блогер, обучение шахматам, анализу и работе в букмекерских компаниях. Это косвенно относится к играм, но не к тем, что пользователь ожидает увидеть на этой странице.
Вот пример ошибки при оформлении курсов. У GeekBrains из верхнего меню выходит только подборка курсов по программированию. При этом платформа предоставляет широкий спектр образовательных курсов и программ.
А что, если пользователю удобно искать через верхнее меню? Тогда он не найдет то, что ищет, как минимум расстроится — ему придется тратить время, думать, где это искать. Наша задача — облегчить ему поиск.
У этой же платформы есть возможность перейти к странице, где собраны все курсы, факультеты, направления. Она наполнена разноцветными плашками, которые рассеивают внимание и не помогают с поиском нужного продукта. Здесь сложно выбрать факультет, курс или программу.
В дополнение ко всему они по-разному называют свои продукты: на одной странице это «курс», а на другой уже «программа».
Учтите, если планируете разные по наполнению, продолжительности, глубине образовательные продукты, обязательно фиксируйте критерии, по которым будете в дальнейшем относить эти продукты к той или иной группе, и четко выстраивайте иерархию. Впоследствии это поможет избежать путаницы в названии и доработок.
В данном примере мне, как пользователю, сложно выделить интересное направление. Если бы у каждого направления был свой цвет, иконка или теги, я бы просканировала страницу по диагонали и поняла: красный — это дизайн, зеленый — программирование и так далее.
Хороший пример группировки курсов в выпадающем меню — сайт «Нетологии»:
курсы сгруппированы по направлениям;
выделен и проиллюстрирован наиболее популярный вебинар, который разбавляет текстовую картинку визуалом, цепляет, останавливает внимание;
выделен и проиллюстрирован ближайший;
видна группа бесплатных курсов;
использованы ай-стоперы — все в лучших традициях мерчандайзинга;
выделены уровни подготовки — для начинающих, профессионалов;
- доступны все возможные направления, которые предлагает платформа.
Дальше хороший пример, как сгруппированы курсы на главной странице и использованы ай-стоперы, которые сообщают о том, что курс скоро начнется, что он переработан. Последнее тоже важно рассказывать пользователю. Курсы не создаются один раз на всю жизнь. Если пользователь видит, что он обновлен — это дополнительный аргумент для покупки.
4. Прочие ошибки
При анализе топ-50 сайтов встречались также:
пустые разделы, когда заявлено обучение какой-то специализации, но на странице ничего нет или выскакивает ошибка 404;
разделы и кнопки, которые не отвечают на клик — это некорректная работа системы, которая формирует имидж компании, сайта, напрямую проектируется на имя бренда;
- не указано текущее расположение пользователя на сайте — если у сайта сложная структура, не всегда понятно, где ты находишься. Хочется вернуться на шаг назад, а не на главную страницу, чтобы потом снова проходить весь путь.
Как не допускать ошибок в UX-дизайне
Компания InTechniks, которая специализируется на UX-исследованиях, выяснила: если сайт спроектирован на основании поведения большинства пользователей, то уровень успеха достижения цели на сайте может достигать 80%.
Если руководитель компании и ее сотрудники проектируют сайт и опираются лишь на собственные представления, что и как должно работать, то конверсия в достижения цели будет не больше 9%. Ориентироваться стоит на объективные данные поведения пользователей и их привычки.
Очень важно проводить исследования целевой аудитории, выяснять, что ей интересно, какие у нее боли. В проекте надо учитывать, где ваша аудитория будет искать ту или иную информацию. Не следует самому проектировать сайт, потому что вы не пользователь.
Исследуйте свою аудиторию: проводите карточные сортировки, глубинные интервью, тестирования, анкетирования с помощью различных инструментов.
В идеале такую работу надо проводить постоянно, поскольку жизнь не стоит на месте. Проводить один раз крупное исследование — дорого. Разделите аудиторию на логические сегменты и постепенно изучайте каждый, внедряйте результаты и проверяйте, насколько изменения улучшают конверсию, пользовательский опыт.
Выводы
Ошибки допускают даже крупные онлайн-университеты и школы из топ-50. Учитесь на чужом опыте и следуйте этим советам.
Проектируйте структуру сайта на основании пользовательского опыта вашей целевой аудитории. Узнавайте, что ей важно и как она это ищет.
Помните про функции системы. Она должна быть гибкой, отзывчивой, доступной, сообщать о своем состоянии, позволять взаимодействовать с ней пользователям с разным уровнем опыта.
- Будьте предупредительными и заботливыми к вашим пользователям и они будут вам благодарны.