Дизайн Yuri Mediakov
839

Дизайн-концепт: Киберспорт на ТВ

В закладки

Компьютерные игры - это огромная индустрия, по бюжетам на производство и доходам сравнимая с кинематографом. Например, вышедшая в 2018 году Red Dead Redemption 2 за первый уикенд заработала более $725 миллионов: для сравнения, вышедший в том же 2018 году Хан Соло в первый викенд заработал всего $84 миллиона. Но если компьютерные игры уже созрели как индустрия, то киберспорт только в начале своего роста.

По данным Алекса Грея, журналиста с Мирового Экономического форума, общемировая аудитория киберспорта в 2018 году достигла 380 миллионов человек: 165 миллионов из которых постоянные фанаты, и 215 миллионов зрителей смотрит сорвенования время от времени. По оценкам Forbes, в 2018 году индустрия киберспорта сгенерирует 905 миллионов долларов дохода, и достигнет миллиарда в следующие два года.

Мы в BraveGeeks играем в игры и любим киберспорт. Мы часто коротаем вечера за просмотром трансляций соревнований по LOL и DOTA вместе с друзьями и коллегами. Но несмотря на стремительный рост, киберспорт все еще очень молодая индустрия. И мы задумались над тем, чего ей действительно не хватает из того, что есть у классических спортивных соревнований.

Изучение вопроса

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

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

Чтобы сформулировать, проверить и доработать наш тезис, мы провели серию интервью с несколькими фанатами киберспорта.

Мы задавали следующие вопросы:

  • По каким дисциплинам(играм) вы смотрите соревнования?
  • На каком устройстве вы смотрите соревнования?
  • Какой сайт или приложение вы для этого используете?
  • Какой сайт или приложение вы используете, чтобы узнавать новости о киберспорте?

Вот что нам удалось выяснить:

  • Наши респонденты смотрят трансляции соревнований на Twitch или на сайте самого турнира;
  • Они предпочитают смотреть соревнования на большом ТВ, хотя для этого они часто подключают свой ноутбук к нему по HDMI;
  • Большинство из них имеют большой ТВ (32 дюйма и более) со смарт-функциями (Tizen OS или Android TV), Apple TV, PS4 или Xbox One;
  • Новости и турнирные таблицы они находят на сайтах турниров, в специализированных приложениях и в социальных сетях;
  • Им интересны соревнования по более чем одной игре, однако не просто киберспорт как дисциплина.

По итогам нашего мини-исследования, мы доработали нашу идею следующим образом.

Мы хотим разработать концепт приложения для ТВ. Такого, чтобы:

  • можно было смотреть актуальные соревнования по любимым играм;
  • смотреть новостные выпуски о важных соревнованиях, любимых командах и игроках;
  • было бы персонализируемым: киберспорт многообразен, и не все в нем интересно всем.

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

Приключение началось.

Особенности дизайна для ТВ

Дизайн приложений для ТВ отличается от привычных нам дизайна для веб или мобильных устройств. Мы сформулировали следующие особенности:

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

Все это накладывает определенные ограничения на дизайн.

Мы изучили десятки приложений на Android TV, Apple TV и PS4 (Xbox One у нас не нашлось), чтобы понять, как разработчики обычно решают обозначенные проблемы, и пришли к следующим выводам.

  • Нужна простая, крупная и чистая типографика
  • Акцентироваться нужно на видео контенте и минимизировать количество текстов
  • Расположение первичных элементов должно быть выставлено таким образом, чтобы зрителю не приходилось вертеть головой
  • Использовать минимум ввода данных: например нельзя запрашивать логины\пароли и лучше отказаться от классического поиска с вводом запроса

С другой стороны, не смотря на обилие разнообразных платформ, на которых можно запускать приложения для ТВ (Apple TV, Android TV, PS4, Xbox One, TizenOS, etc) по стилю они не сильно отличаются. Мы пришли к выводу, что дизайн, разработанный для одной платформы, довольно легко получится адаптировать под другую.

Safe-зоны

Одной из наиболее интересных особенностей разработки дизайна для ТВ оказалась необходимость учета безопасных зон. Изучив вопрос, мы выяснили, что мы должны все элементы UI располагать таким образом, чтобы они не оказывались на полях шириной примерно 5%.

Эта особенность вытекает из того, что телевизоры до сих пор иногда используют устаревшую технологию overscan, а значит могут обрезать изображение по краям. Вне зависимости от того, запущено приложение на PS4, Apple TV или на самом телевизоре.

Мы рекомендуем цикл статей, посвященный дизайну для ТВ от ребят из This Also. Он классный и там есть много интересных подробностей.

Дизайн язык

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

  • онлайн-трансляции и записи матчей по киберспортивным дисциплинам
  • спортивные новости в видео формате

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

Навигация

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

  • Пользователи часто следят за несколькими киберспортивными дисциплинами
  • Контента по каждой из дисциплин много, смешивать контент из разных дисциплин было бы неправильно

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

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

Чемпионаты

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

Чтобы вместить на один экран все необходимое, мы вынуждено добавили дополнительную боковую навигацию, а данные поделили на карточки.

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

Команды и игроки

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

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

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

Крутые штуки

Режим "без спойлеров"

Никто не любит спойлеры, а на многих наших экранах видно счет. Мы решили добавить в приложение специальный режим “Без спойлеров”. В этом режиме мы не показываем счет у матчей, которые пользователь еще не видел, а также их результаты в турнирных таблицах.

Режим "Киберспортивный бар"

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

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

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

В заключение

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

Мы будем рады мнениям и критике нашего концепта. Что вы думаете о перспективах киберспорта в сфере домашних развлечений? Стали бы вы пользоваться таким приложением?

Чуть более подробный кейс можно найти на Behance:

Материал опубликован пользователем. Нажмите кнопку «Написать», чтобы поделиться мнением или рассказать о своём проекте.

Написать
{ "author_name": "Yuri Mediakov", "author_type": "self", "tags": [], "comments": 3, "likes": 13, "favorites": 24, "is_advertisement": false, "subsite_label": "design", "id": 58652, "is_wide": false, "is_ugc": true, "date": "Mon, 18 Feb 2019 11:00:57 +0300" }
{ "id": 58652, "author_id": 53333, "diff_limit": 1000, "urls": {"diff":"\/comments\/58652\/get","add":"\/comments\/58652\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/58652"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114 }

3 комментария 3 комм.

Популярные

По порядку

0

Дженерик дизайн, но задумка в целом хорошая.

Ответить
0

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

Ответить
0
{ "page_type": "article" }

Прямой эфир

[ { "id": 1, "label": "100%×150_Branding_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox_method": "createAdaptive", "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfl" } } }, { "id": 2, "label": "1200х400", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfn" } } }, { "id": 3, "label": "240х200 _ТГБ_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fizc" } } }, { "id": 4, "label": "240х200_mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "flbq" } } }, { "id": 5, "label": "300x500_desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "ezfk" } } }, { "id": 6, "label": "1180х250_Interpool_баннер над комментариями_Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "ffyh" } } }, { "id": 7, "label": "Article Footer 100%_desktop_mobile", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjxb" } } }, { "id": 8, "label": "Fullscreen Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjoh" } } }, { "id": 9, "label": "Fullscreen Mobile", "provider": "adfox", "adaptive": [ "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fjog" } } }, { "id": 10, "disable": true, "label": "Native Partner Desktop", "provider": "adfox", "adaptive": [ "desktop", "tablet" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyb" } } }, { "id": 11, "disable": true, "label": "Native Partner Mobile", "provider": "adfox", "adaptive": [ "phone" ], "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "clmf", "p2": "fmyc" } } }, { "id": 12, "label": "Кнопка в шапке", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "bscsh", "p2": "fdhx" } } }, { "id": 13, "label": "DM InPage Video PartnerCode", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox_method": "createAdaptive", "adfox": { "ownerId": 228129, "params": { "pp": "h", "ps": "bugf", "p2": "flvn" } } }, { "id": 14, "label": "Yandex context video banner", "provider": "yandex", "yandex": { "block_id": "VI-223676-0", "render_to": "inpage_VI-223676-0-1104503429", "adfox_url": "//ads.adfox.ru/228129/getCode?pp=h&ps=bugf&p2=fpjw&puid1=&puid2=&puid3=&puid4=&puid8=&puid9=&puid10=&puid21=&puid22=&puid31=&puid32=&puid33=&fmt=1&dl={REFERER}&pr=" } }, { "id": 15, "label": "Плашка на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byudx", "p2": "ftjf" } } }, { "id": 16, "label": "Кнопка в шапке мобайл", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "adfox": { "ownerId": 228129, "params": { "p1": "byzqf", "p2": "ftwx" } } }, { "id": 17, "label": "Stratum Desktop", "provider": "adfox", "adaptive": [ "desktop" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvb" } } }, { "id": 18, "label": "Stratum Mobile", "provider": "adfox", "adaptive": [ "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "pp": "g", "ps": "bugf", "p2": "fzvc" } } }, { "id": 19, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } } ]
Хакеры смогли обойти двухфакторную
авторизацию с помощью уговоров
Подписаться на push-уведомления
{ "page_type": "default" }