В департаменте разработки MEGOGO работает 6 дизайнеров, за каждым из которых закреплен продукт: мобильное приложение, сайт, Smart TV-приложение, админсистемы, партнерские продукты. Контролирует и направляет работу senior designer (team lead). В креативную команду также входит арт-директор, отвечающий за стратегию и видение развития продукта.

CIO медийной IT-компании MEGOGO Дмитрий Мелков и арт-директор Владимир Смирнов написали для AIN.UA колонку о том, как создать безбарьерный пользовательский интерфейс и почему разрабатывать дизайн интерфейса на медийном рынке — непростая задача.

Дизайн приложений на медиарынке

Тренды задает Netflix (как лидер рынка). Основная ставка платформы — на контент. У мобильного приложения Netflix простой минималистичный дизайн. Все направлено на то, чтобы вы начали просмотр как можно скорее.

Нет смысла полностью копировать подход Netflix или другого игрока рынка. Во-первых, «серебряной пули» не существует. Если бы все было так просто, в мире существовало бы 40 успешных нетфликсов.

Во-вторых, важен контекст и рынок. Netflix инвестирует миллиарды долларов в производство собственного контента ежегодно. В 2018 эта сумма составила $12,04 млрд, по данным Variety. Такой подход может себе позволить разве что Disney, который скоро запустит свой онлайн-сервис.

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

В мобильном приложении на многообразие контента накладывается контекст использования – здесь смотрят и слушают иначе, чем на телевизоре. На Smart TV больше всего смотрят ТВ, фильмы и сериалы. На мобильных устройствах телевидение идет с уверенным отрывом. Для фильмов и сериалов смартфон используют как второй экран — ищут контент, добавляют в избранное, оплачивают доступ.

Нужно решить, делать ли монопродукт для всех платформ (как Netflix) или создавать отдельный дизайн для каждой платформы.

Преимущество подхода Netflix – вы выглядите одинаково, а значит, привычно для пользователя, на всех устройствах. Такой дизайн легче поддерживать, с таким подходом проще выстроить дизайн-систему.

Продукты MEGOGO появлялись и развивались с неодинаковой скоростью. Поэтому сейчас они находятся на разных этапах. Все 7 лет работы проекта мы пытались свести дизайн продуктов к единому виду и логике. Но недавно осознали — то, против чего мы сражаемся, может стать нашим преимуществом.

Теперь мы:

  1. Учитываем при проектировании особенности смотрения (процесса просмотра контента пользователем — Ред.) и использования контента на каждой платформе.
  2. Берем во внимание популярность разного вида контента на каждой из платформ.
  3. Сознательно допускаем и поощряем эксперименты на разных площадках. Например, тестируем на мобильной версии сайта гипотезы, которые потом сможем использовать в мобильном приложении.
  4. Не пытаемся втиснуть в одну и ту же схему построения интерфейса мобильное приложение, Smart TV (включая Apple TV и Android TV), сайт и приложения для Sony Playstation.

Отсутствие барьеров и разнообразие контента

Дизайнер мобильных приложений MEGOGO постоянно решает две задачи:

  1. Выбора контента

Пользователей волнует банальный практический вопрос: «Что посмотреть вечером?». Люди устают от принятия решений — в день их может быть несколько тысяч: что надеть, куда пойти на ужин и какому соискателю отказать.

Исследование, проведенное в Swarthmore College, сообщило, что слишком много вариантов выбора вызывают стресс. 77% респондентов с трудом нашли фильм для просмотра. Опрос также показал, что 75% нужен персонализированный интерфейс, 71% смотрят то же, что их друзья, и 63% доверяют рекомендациям близких. Важно, чтобы пользователь тратил меньше времени на выбор и больше на получение удовольствия от просмотра.

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

У нас работает две системы рекомендации — неперсонализированные (подборки редакции) и персонализированные (собранные автоматически на основе истории просмотров пользователя).  Дополнительно сейчас мы тестируем stories— короткие нарезки фильмов, передач, голов в футбольных матчах. Блок stories расположен в верхней части главного экрана приложения: это лента двух десятков вертикальных видео длиной до полутора минут. Набор сториз обновляется ежедневно. После просмотра сториз пользователь может перейти к полной версии видео.

  1. Удержание пользователя

У идеального сервиса только один конкурент – сон. Чтобы быть таким приложением, мы постоянно убираем барьеры между пользователем и контентом – так чтобы начало просмотра происходило в один тап, а лучше — вообще без него.

Сейчас разрабатываем четвертую версию приложения— изменятся разделы, появятся новые mobile-only фичи. Некоторые функции уже работают. Например, «загрузка» (позволяет смотреть сохраненные видео в оффлайне) и stories. В конце 2019 — начале 2020 года планируем релиз.

Цвета и простота интерфейса

Приложение должно отличаться от конкурентов. Но важно не перемудрить с дизайном: лучший интерфейс — его отсутствие. Поэтому, как бы парадоксально ни звучало, цветовое решение одновременно важно и не важно. 

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

Долгое время нашими главными цветами были черный и белый. Но позже мы решили выбрать яркий цвет, отличный от конкурентов. Свободными были две гаммы — зеленая и желтая. Желтый плохо смотрелся в телевизоре, так что выбрали зеленый — практический подход, никакой «вкусовщины».

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

Логичная упаковка и важность метрик

В MEGOGO постоянно появляются новые типы контента: в первой версии приложения уже были «Фильмы», «Сериалы», «Мультфильмы», «Передачи» и «Шоу», «Новости» и «Музыка». Сейчас к ним добавились «ТВ», «Cпорт», «Stories». Скоро мы создадим еще несколько разделов.

Основная сложность — завернуть весь этот контент в удобную и логичную упаковку. Когда у нас было пять видов контента, все было просто. С ростом разнообразия форматов контент перестал помещаться в нижнее меню. Какое-то время пользовались «гамбургером», но поняли, что в приложениях лучше всего работает принцип «what you see is what you get» (юзер использует то, что видит). 

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

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

Челленджи в работе 

Стратегические задачи команды расписаны на полтора-два года вперед. Много работы идет «в стол» — какие-то нововведения не проходят внутренние тесты. Некоторые идеи нужно воплотить, чтобы понять, что они не жизнеспособны. Только после тестирования прототипа можно увидеть, что «фича» не работает. Чтобы создать качественный продукт, приходится хоронить множество черновых разработок.

Хорошего дизайнера от плохого отличает только количество практики. Нужно создать 30 плохих версий, чтобы 31-я получилась хорошей. Конечно, ожидание в процессе самосовершенствования утомительно — нужно время, чтобы увидеть результаты. Но это единственный путь к тому, чтобы стать профи.

Хороший дизайн приложения — который позволяет наслаждаться контентом и при этом не уставать от интерфейса. Уместить большое количество функций в минималистичном интерфейсе непросто, но в этом и заключается мастерство визуальной упаковки мобильных приложений. Команда MEGOGO открыта к новым вызовам, чтобы повышать планку нормы внутри компании и отрасли.

Авторы: Дмитрий Мелков, .IO MEGOGO, Владимир Смирнов, арт-директор MEGOGO.