Дизайн
Red Collar
7177

Разбор сайтов телеканалов: ТНТ, «ТВ-3», НТВ и «Первого канала»

Сайты для людей или для галочки — выяснили в Red Collar.

В закладки

Мы снова на связи, но теперь говорим о компьютерных телеэкранах. Берем на разбор одни из самых популярных ТВ-каналов в России: ТНТ — юмористический, «ТВ-3» — мистический, НТВ — новостной и, конечно, «Первый канал».

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

Как оцениваем

Проверяем UX сайта: какой опыт он формирует у пользователя. Смотрим и как дизайнеры, и как обычные посетители. По полочкам раскладываем всё: от функциональности и удобства до сверхценности — впечатления, которое производит сайт и то, как телеканал рассказывает о себе через дизайн. Даем оценку от 1 до 5 и смотрим, кто победил.

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

  • 1 — функции нет на сайте.
  • 2 — есть, но пользоваться почти невозможно.
  • 3 — есть, но неудобная.
  • 4 — есть, удобная, но с косяками.
  • 5 — реализована отлично.

Надёжность

Удобство это хорошо, но если сайт долго грузится с десктопа, нет мобильной версии, не реагирует на клавиатуру и скринридер, то пользоваться им трудно.

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

НТВ на телефоне при быстром 3G полностью загружается за 25 секунд, а по оптимизации и остальным параметрам speed index всего 2 из 100. Адаптив есть, но есть и баги: например, нужно несколько раз нажимать на прямой эфир, чтобы его запустить.

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


У ТНТ отличный адаптив, куда лучше десктопа (простите за спойлер) — и это прямо лайк, ведь поваляться на диване с планшетом порой то, что доктор прописал. Минус — кнопки в меню слабо реагируют на прикосновение: непонятно, туда ли нажал. По speed index выдал 13 из 100. Если смотреть только скорость, то на телефоне с 3G сайт полностью открывается больше 20 секунд.

У «ТВ-3» самый приятный адаптив, удобный и без лагов. И самый быстрый: полная загрузка за 15 секунд и по speed index 50 из 100. Хотя можно было бы и быстрее, если оптимизировать изображения.

У «Первого канала» адаптив есть, хотя внутри страниц неудобная навигация: всё кашей. И это самый медленный и громоздкий сайт из всех. Полностью загружается 83 секунды, по speed index 12 из 100.

Согласно исследованиям в США, 18% населения имеют особенности, которые могут осложнить взаимодействия с сайтом: проблемы с моторикой или зрением, когнитивные отклонения и так далее. В России исследований в этой сфере мы пока не встречали, но цифры вряд ли меньше.

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

Функциональность, удобство, удовольствие

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

Кейс первый: посмотреть телепрограмму

Пробуем найти телепрограмму, чтобы изучить ближайшие передачи или отметить фильмы на неделю.

У ТНТ, как и у всех, телепрограмма сразу в шапке и открывает сегодняшний день. У программ, что уже прошли, есть две ссылки: на карточку проекта и на саму серию, но они одинаковые по типографике и подсветке — сразу не скажешь в чем разница, очень путает. У 70% передач нет никакого описания или превью.

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

Из-за обилия однотипного текста создается впечатление, что это газета. Слишком много информации, чтобы её с комфортом обработать.

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

Как НТВ решил, что именно эти крупные превьюшки передач для пользователя самые важные — большой вопрос. Это может быть ценно для повышения охвата, но на деле перетягивает на себя внимание и раздражает. И если «Первый канал» создает впечатление газеты, то здесь полугазета.

«ТВ-3» приятно удивили: сначала появляется выпадающее меню с ближайшими программами и трейлерами интересных передач на сегодня. Переходишь на полную телепрограмму — все крупно, четко, много воздуха и есть превью; удобно и современно. Только эти ребята додумались спрятать всё, что шло в этот день ранее — лайк.

Телеканалы боятся отойти от шаблонов: списки передач как печатная телепрограмма — невероятно уныло. К тому же сложно воспринимается, не даёт с комфортом выбрать передачу.

Кейс второй: найти выпуск передачи

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

Ищем на ТНТ сериал «Ольга»: находим в шапке «Сериалы и шоу» и попадаем на поле логотипов. Удобно, что сделали список в виде картинок: визуально человеку легче найти знакомый знак. Но неудобно, что поставили не по алфавиту.

Когда переходишь на страницу передачи, в боковой строке остается список всех сериалов. Выглядит неопрятно и по сути мусорный элемент, ведь человек нашёл что искал. Плохо, что карточка сериала вроде есть, но самих выпусков ни «Ольги», ни даже «Интернов» не нашли.

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

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

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

На главной «ТВ-3» есть удобная подборка свежих программ: если ты знаешь, что пропустил на прошедшей неделе, то быстро найдешь. В разделе «Проекты» поместили все передачи и у многих из них есть интерактивные промосайты. Но непонятно, почему не всё добавляют: у «Твин Пикса» лишь несколько рандомных серий.

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

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

Сверхценность

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

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

У «Первого канала» слишком много мелкой информации: меню с семью кнопками, предложение получать уведомления, соцсети, сейчас в эфире, далее в эфире, дата и время — куча разной информации, все это на первой трети (!) приветственного экрана. Чересчур навязчиво, хочется быстрее убежать.

Крупный слайдер с фотографиями это приятно, но потом начинается куча мала: блоки с разными выпусками, все телепроекты в логотипах, снова какие-то превью, популярное и рекомендуемое, все это приправлено уродливыми баннерами из «Яндекс.Директа». Отдельно доставил футер сайта, «красиво» выровненный по центру.

«Первый канал» считается основным каналом в стране, и ему странно выглядеть неопрятно. Баннеры здесь воспринимаются как раздражающие кликбейты «Бородавки исчезают за ночь! Открыт секрет...». Ресурс такого уровня должен быть удобным, эстетичным, эталонным.


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

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

И сетка, о эта сетка (её тут нет): мешанина блоков, из-за которого появляется дезориентация, а контент проходит мимо пользователя.

  • У «ТВ-3» три точки вместо двух. Так просто и так круто.

  • Много воздуха и все разделено.

  • Завораживает, что будто они одни поняли, зачем пользователям сайт телеканала: всего три пункта в главном меню. Кайф.

  • Много тёмных разделов намекают на мистику, но без излишеств.
  • Атмосферное видео на фоне показывает, что это развлекательный телеканал.
  • Единственные позаботились о переходе на цифровое вещание, которое происходит прямо сейчас, поместив в шапке «Не ловит "ТВ-3"?»

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

Победитель

Это первый разбор, где мы с сразу поняли, кто победит. Настолько сильно отличается «ТВ-3» от своих конкурентов: его просто хочется открывать и изучать.

Вторым идет НТВ, который выиграл за счёт своего очевидного позиционирования новостников.

Предпоследним стал «Первый канал»: он сильно сдал на этапе «Сверхценности», попытался упихнуть всё на главную страницу. ТНТ просто устарел, это видно во всем; верим, что он вот-вот обновится. Аплодисменты мистическому!

Вывод

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

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

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

Написать
{ "author_name": "Red Collar", "author_type": "self", "tags": ["\u0440\u0430\u0437\u0431\u043e\u0440\u0441\u0430\u0439\u0442\u043e\u0432"], "comments": 2, "likes": 22, "favorites": 30, "is_advertisement": false, "subsite_label": "design", "id": 59135, "is_wide": false, "is_ugc": true, "date": "Thu, 21 Feb 2019 13:21:33 +0300", "is_special": false }
0
{ "id": 59135, "author_id": 114524, "diff_limit": 1000, "urls": {"diff":"\/comments\/59135\/get","add":"\/comments\/59135\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/59135"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
2 комментария
Популярные
По порядку
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": "Article Branding", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cfovx", "p2": "glug" } } }, { "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, "disable": true, "label": "Тизер на главной", "provider": "adfox", "adaptive": [ "desktop", "tablet", "phone" ], "auto_reload": true, "adfox": { "ownerId": 228129, "params": { "p1": "cbltd", "p2": "gazs" } } }, { "id": 20, "label": "Кнопка в сайдбаре", "provider": "adfox", "adaptive": [ "desktop" ], "adfox": { "ownerId": 228129, "params": { "p1": "cgxmr", "p2": "gnwc" } } } ] { "page_type": "default" }