Как я делал дизайн приложения онлайн-кинотеатра

Привет! Меня зовут Игорь, я начинающий UX/UI дизайнер. В этой статье расскажу, как делал дизайн мобильного приложения онлайн-кинотеатра.

Если верить The Futur и японской философии Акигай, то профессия мечты должна объединять в себе 4 принципа: та профессия, которую ты любишь, в которой ты хорош, за которую платят деньги и та, которая необходима человечеству. Именно поэтому я развиваюсь в сфере дизайна.

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

План действий

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

Шаги:

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

Анализ предметной области

Для того чтобы погрузиться в проблему онлайн-кинотеатров изучил материалы в интернете, предварительно сформировав интересующие меня вопросы:

• Почему люди пользуются онлайн-кинотеатрами?
• Как люди пользуются онлайн-кинотеатрами?
• Какие существуют решения?

Почему люди пользуются онлайн-кинотеатрами?

• Распространение и развитие онлайн-кинотеатров напрямую связано с развитием технологий. На данный момент люди выбирают просмотр фильма дома в 2.5 раза чаще похода в кинотеатр.
• Альтернатива легальным онлайн-кинотеатрам — пиратские сервисы. Однако люди готовы платить за удобство просмотра и высокое качество изображения стриминговых площадок.
• Еще одна альтернатива — DVD устройства. За последние десять лет рынок сократился в 6 раз, а большинство компьютеров и ноутбуков выпускаются без дисковода.
• Внешние факторы. Коронавирус и период самоизоляции научил людей находить досуг дома.

В начале 2021 года компания TelecomDaily провела исследование, в котором определила что именно движет людьми при выборе стримингового сервиса. Компания опросила более 1700 человек методом анкетирования, все они являлись пользователями онлайн-кинотеатров.

По графику видно, что главные факторы при выборе онлайн-кинотеатра являются стоимость подписки и объем фильмотеки — эти две причины лидируют с уверенным отрывом.

Как люди пользуются онлайн-кинотеатрами?

Исходя из того же исследования можно понять, что 27% пользователей онлайн-кинотеатров смотрят контент на площадке несколько раз в месяц, 25% респондентов заходят один-два раза в месяц, около 28% — два-три раза в неделю, а 19% — почти каждый день.

Какие существуют решения?

На мировом рынке количество пользователей стриминговых сервисов растет с каждым годом, а в 2022 побило все рекорды: летом аналитики зафиксировали, что зрители использовали онлайн-кинотеатры чаще, чем кабельное ТВ — такое случилось в первые в истории.

На сегодняшний день тройка лидеров по количеству пользователей на российском рынке выглядит так: первое место занимает Кинопоиск, следом идут IVI и Wink, обогнавший в этом году OKKO.

Подробнее про нынешнюю ситуацию на мировом рынке стриминговых сервисов и перспективу их развития можно прочитать в статье Кинопоиска «Что дальше будет со стримингами в XXI веке: переизбыток сериалов, VR, интерактив и «Внутри Лапенко»

Анализ конкурентов

Для анализа лучших решений и выявления интерфейсных паттернов изучил более 10 прямых и косвенных конкурентных сервисов. Для анализа отечественного сегмента были взяты сервисы из предыдущего графика. Так же были рассмотренны Netflix, Disney+, Paramount+, Apple TV — ведущие площадки мирового рынка, Яндекс Музыка, социальная сеть VK, Twich, Instagram Reels и Tik Tok — конкуренты смежного рынка. На основе полученной информации позже составил гипотезы, которые проверил на интервью.

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

Главный экран

По такому принципу были рассмотрены остальные экраны мобильного приложения More.TV.

А следом и все сервисы, которые были выделены в анализе конкурентов.

Общие выводы по анализу конкурентов

• У подавляющей части рассмотренных сервисов отсутствует текстовая приписка с названием фильма. Бывают ситуации, когда название на постере нечитаемое, приходится проваливаться внутрь, чтобы узнать название.

• Раздел «Каталог» часто сильно перегружен, а большая часть сервисов просто дублирует контент с главного экрана.

• У всех сервисов есть подборка фильмов и сериалов по общему признаку, но лишь у нескольких онлайн-кинотеатров предусмотрен поиск по этим самым подборкам.

• Примечательно, что у отечественных сервисов между собой схожа структура экрана карточки фильма, так же, как и у иностранных схожа между собой.

Исследование пользователей

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

Были составлены следующие гипотезы:

• Создать информационный блок, так как пользователи следят за новостями индустрии
• Создать подборки с фильмами и сериалами, так как они помогают пользователям при выборе
• Добавить спортивные трансляции, так как пользователи их смотрят
• Добавить киберспортивные трансляции, так как пользователи их смотрят
• Создать блок с информационными шоу, так как пользователи следят за ними
• Добавить раздел с короткими вертикальными видеороликами, так как пользователи пользуются TikTok, Instagram Reels и VK клипы
• Добавить оригинальные аудиодорожки в плеер, так как пользователи смотрят контент на языке оригинала
• Добавить субтитры, так как пользователи используют их при просмотре контента
• Добавить блок с обсуждением контента, так как пользователи обсуждают фильмы и сериалы при просмотре друг с другом
• Добавить рейтинг к контенту, так как он помогает пользователям при выборе

Результаты интервью

Количественный опрос

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

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

После завершения опроса я проанализировал ответы:

По такому принципу рассмотрел остальные вопросы

По итогу количественного и качественного опроса подтвердились следующие гипотезы, которые реализовал при проектировании:

• Создать информационный блок, так как пользователи следят за новостями индустрии
• Создать подборки с фильмами и сериалами, так как они помогают пользователям при выборе
• Добавить раздел с короткими вертикальными видеороликами, так как пользователи пользуются TikTok, Instagram Reels и VK клипы
• Добавить аудиодорожки в плеер, так как пользователи смотрят контент на языке оригинала
• Добавить субтитры, так как пользователи используют их при просмотре контента
• Добавить рейтинг к контенту, так как он помогает пользователям при выборе
• Добавить функцию синхронизации с ТВ, так как пользователи часто ее используют
• Добавить оповещения, так как пользователи следят за выходом нового контента

Портрет пользователя

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

А так же сделал User Flow.

Проектирование

Во время проектирования вайрфреймов составил следующие интерфейсные гипотезы:

• Не загружать экраны лишней информацией, как у конкурентов. Оставить обязательные блоки, а так же добавить информацию, которую подтвердили на этапе исследования пользователей.
• Использовать систему табов для разной информации в одном блоке.
• Добавлять текстовую приписку с названием фильма/сериала к постеру, чтобы увеличить читаемость.
• Не дублировать информацию с главного экрана в экран каталога, тем самым разгрузить его.
• Создать функцию поиска по подборкам.

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

Ниже покажу принцип, по которому прорабатывал каждый экран своего приложения.

Главный экран

Визуальный стиль

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

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

В типографике использовал шрифт San Francisco UI, потому что он является стандартом в Human Interface Guidelines. Использовал 4 стиля текста: для заголовков, подзаголовков, для текстовой части и последний — вспомогательный.

Далее расскажу про свои некоторые решения по созданию визуального стиля. Посмотреть все экраны вы сможете в моем проекте на Behance, ссылку я оставлю в конце.

Главный экран

1. Добавил индикацию по типу Stories, чтобы пользователю было понятно, что анонсов в постере несколько и что их можно пролистывать.
2. Иконка трейлера на постере отсутствует, так как он через определенное время автоматически переходит в видеоряд. Это не перегружает данный блок.

3. С учетом рекомендаций Human Interface Guidelines, все кнопки и. таб-бар непрозрачен не на 100 процентов, а так же блюрит задний фон.

4. Чтобы убрать лишний шум, на видео-элементах я скрыл кнопку Play. Таймер в нижней части и таймлайн в верхней части дают понять пользователю, что при нажатии будет видеоряд. Разделил эти элементы по разным частям, чтобы не перенасыщать одну. По той же причине спрятал иконку удаления серии из этого блока в дополнительное меню, которое вызывается долгим нажатием.

Каталог и поиск

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

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

Карточка фильма

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

2. Клипы с лучшими моментами, есть защита от спойлеров.

3. Новости сериала, дополнительный материал. Размер области текста в три строчки делает ее аккуратной.

Создание клипа

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

Юзабилити-тест

Однако к конечному варианту пришел не сразу. Чтобы проверить свои решения я собрал прототип из всех отрисованных мною экранов и провел оффлайн тестирование на моих друзьях.

При тестировании проверял следующие гипотезы:

• Пользователь сможет найти необходимый сериал.
• Пользователь сможет найти дополнительную информацию об актере.
• Пользователь понимает разницу между «Отслеживать» и «Добавить в избранное»
• Пользователь понимает значение всех спроектированных блоков.

Правки

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

• Интервьюируемые некорректно понимали, что произойдет если тапнуть по блоку с анонсом на главном экране. Многие думали, что откроется карточка фильма.

Решение: изменить название блока.

• У опрашиваемых возникли проблемы в клипах. Большинству не была понятна разница между вкладками, а так же непонятен смысл иконки “не показывать”.

Решение: изменить название вкладки, добавить приписки к иконкам.

• Во время тестирования возникли проблемы в подборках: пользователей путала обложка в подборке«Голливуд» из фильма «Однажды в Голливуде». Некоторые думали, что попали в карточку с данным фильмов.

Решение: изменить обложку подборки.

Заключение

За этот большой и важный для меня проект закрепил старые знания и получил новые навыки, в частности:

• Погружение в сферу стриминговых сервисов: от изучения рынка, до разбора готовых проектов.
• Исследование пользователей: проведение количественных и качественных опросов.
• Знакомство со смежной сферой — сервисов для просмотра коротких видеороликов. Интеграция этой системы в онлайн-кинотеатр.
• Работа с гайдлайном Apple Human Interface, проектирование приложения под систему iOS
• Работа с типографией и текстовой составляющей. В этом мне помог гайд от Райффайзен банка «Текст в интерфейсе», который я нашел в открытом доступе.
• Создание полного цикла визуального стиля: от выбора цветовой палитры и иконок, до работы с динамическими элементами и создания анимаций.
• Проведение юзабилити-теста для проверки выполненных решений.

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