Редизайн видеоплеера
Компания
FullOfMind
Год
2024
Инструмент
Figma
Сфера деятельсности
EdTech
Мои роли
UX дизайнер
По результатам проведенной аналитики, анализу интервью с пользователями были определены слабые места и болевые точки, с которыми встречаются пользователи во время просмотра урока.
Продуктовый менеджер
Были проведены опросы и интервью пользоваталей на предмет определения слабых точек и выявления целей, которые преследует бизнес.
Задачи и их решения
Описание проблемы
На первом месте стоит пользователь
Очень. Много. Рекламы.
Было принято решение, что необходимо полностью пересобрать страницу вместе с видеоплеером. Начать с использования двухколоночной сетки на странице как на популярных сервисах (youtube, coursera). Выделения заголовков блоков цветом, отличным от заднего фона, для дополнительного привлечения внимания к нужном блоку.
Любой бизнес хочет извлекать максимальное количество выгоды, но всегда ли нужно пихать рекламу во все возможные места так, чтобы пользователь не мог спокойно продохнуть без неё? Чрезмерное количество информации не подтолкнет пользователя купить подписку или дополнительный курс, а наоборот -- подтолкнет к отмене подписки и написанию гневного отзыва.
На платформе по обучению самый важный экран после главного и дешборда -- экран показа урока. А самая важная часть этого экрана -- видеоплеер. Что пользователь хочет видеть на экране показа урока? Описание урока, очередность уроков, комментарии к каждому уроку или ко всему курсу сразу, ссылки на какие-то дополнительные материалы, описание всего курса, план на весь курс и описание автора (последние 3 пункта -- опционально). И только лишь на последнем месте -- какие-то рекомендации, допродажи. А во время просмотра урока? Что, если пользователь поставил урок на паузу? Это место для рекламы или это то самое "личное простанство" пользователя, в которое нам нельзя втограться?
Как проходили исследования
Так же как и в прошлый раз проводили 2 вида исследований: опросы и интервью. На этот раз участие приняло 27 человек, 7 из которых -- сотрудники. В этот раз мы получили четкое представление того, что предстоит перерабатывать и как это необходимо сделать.
Выводы из проведенных исследований
- Страница курса построена для допродажи курсов, показа преимуществ подписки и тд. В первую очередь страница просмотра курса должна быть предназначена для просмотра курса!
Основные выводы
- Нет ховер эффектов на элементах.
- Сломанный хедер
- Неудобный видеоплеер, в котором нельзя поменять звук, нет возможности включить автозапуск, нельзя посмотреть следующие уроки в полноэкранном режиме.
- Слишком много рекламы, которая появляется перед началом просмотра урока, во время паузы, а также после просмотра, что не допустимо!
Дизайн первоначальной версии
- Реклама появляется перед запуском видео, в паузе и после окончания видео
- В паузе появляется черный экран с рекламными курсами, что может вызывать проблемы у людей, которые хотели бы поставить видео на паузу, чтобы посмотреть на преподавателя более внимательно (на позу, положение рук, ног и тд)
- Нет автоплея
- Нет возможности посмотреть и переключиться на следующий урок непосредственно в полноэкранном режиме
- Нет возможности изменять громкость видео. Только включить или выключить звук
Выявленные проблемы
Положительные стороны
- Простая навигация в худе плеера
Видео взаимодействия с предыдущим дизайном
Lo-fi прототипы новой версии плеера
Кнопка показа комментариев внутри плеера (работает только в полноэкранном режиме)
Кнопка открытия библиотеки уроков
Меню с раширенными настройками
Название урока и краткое его описания
Так как основная целевая аудитория -- женщины 45+, то было принято решение максимально упростить интерфейс: убрать название урока, чтобы оно не отвлекало в паузе, убрать скрытые пункты из меню и добавить их все снизу, а не разбрасывать по экрану (например, сверху справа).
Спустя еще пару черновых макетов, приняли остановиться на следующем:
Кнопка выхода из полноэкранного режима
Кнопка включения/отключения автоплея
Финальный прототип новой версии плеера
Библиотека уроков в полноэкранном режиме
Кновка включения/отключения автоплея
Меню с комментариями в полноэкранном режиме
- Кнопка "All lessons", по нажатию на которую открывается библиотека уроков, которые находятся в этом курсе
- Кнопка "Comments", по нажатию на которую открываются комментарии ко всему курсу с возможностью сортировки по новизне и количеству лайков
- Кнопка "Autoplay", по нажатию на которую можно включить/отключить возможность включаться следующим урокам автоматически
Что было добавлено
Видео взаимодействия с финальным пртотипом плеера
Дизайн предыдущей версии страницы просмотра курса
Очень много рекомендаций, до которых пользователь даже не будет скроллить, потому что нет необходимости
Подача инофрмации только в вертикальном формате
Непонятно к чему относящиеся кнопки
Не видно уже имеющихся комментариев
Изображение можно приближать
Контент не разделен визуально, все поданно на одном фоне и без четко выраженной разнице во внешних и внутренних отступах
Отсутствие хедера
Lo-fi прототипы новой страницы просмотра курса
- Было разработано 6 лоу фай макетов, выбрал пал на самый "классический" вариант
- Самое главное, что было добавлено -- четкая, логичная и понятная структура страницы для пользователя, на которой он без проблем сможет найти необходимый для него материал
Что было изменено
Использование двухколоночной сетки для размещения большего количества контента при уменьшении вертикального скролла
Дизайн новой версии страницы просмотра курса
Самая важная информация находится выше
Добавлен полноценный хедер
Видео взаимодействия с финальным пртотипом плеера
Добавлена возможность сортировки комментариев
Изображение можно приближать
Умей настаивать на своём
Второе по сложности после самого дизайна -- презентовать проект для Недизайнеров: директоров и менеджеров. У них есть свое виденье ситуации и они обязательно постараются вставить свои пять копеек, постараются взять твою работу на себя. Нужно уметь отстаивать свою позицию, но вместе с этим принимать критику без раздражений и резкий высказываний.
Практически на каждом сервисе по показу видео сейчас можно встретить двух или даже трехколочную сетку . Этот паттер стал уже давно привычным для пользователя. Если это привычно, устойчиво, прошло проверку временем, то это нужно использовать обязательно! Нельзя принебрегать свободным пространством и специально заставлять пользователя скролить больше, чем положено.
Пользователь во главе стола
Рефлексия
Ссылки на сторонние ресурсы