Дизайн Артем Конаков
6 261

UX-патруль, выпуск первый: YouTube

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

В закладки
Аудио

Помню как сейчас: запускаю впервые простенький Balsamiq Mockups — и уже не смотрю, а творю первые интерфейсы. Ох… с тех пор меня было не остановить. Открыл для себя Axure RP, смотрел обучающие видео, когда ел, ходил в туалет и перед сном. Проектировал сайты, мобильные приложения, сервисы и практиковался в использовании различных функций. Так и влюбился в интерфейсы.

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

О чём статья

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

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

Сегодня разбираем YouTube — погнали!

1. Фильтр в поиске

При поиске роликов на YouTube пользователи сталкиваются с проблемами. Самая ощутимая — после применения или отмены параметра фильтр закрывается.

Если пользователь хочет посмотреть выдачу: «Видео», «Короткие» (меньше 4 мин), «За последний год», «в HD качестве», отсортированные «По числу просмотров» — ему придётся сделать десять кликов. А при медленном интернете будет ещё веселей.

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

Как сделать удобнее

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

Предлагаем сделать боковой фильтр, потому что:

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

К тому же YouTube уже использует боковой фильтр в разделе «История».

Подготовили наглядный макет того, как можно реализовать боковой фильтр. И конечно же, добавили функцию «Сбросить фильтр» :)

Напишите в комментариях, что в текущем фильтре обозначает параметр «Место съёмки» и как работает сортировка «По рейтингу» — насколько мы поняли, по соотношению лайков и дизлайков. Но правильно ли это, когда самым «рейтинговым» выводится видео, где 100 просмотров и 9 лайков?

2. Поиск на канале

На детальной странице канала есть внутренний поиск. Реализован он в виде небольшой серой иконки возле пунктов меню. Чтобы воспользоваться им, необходимо:

  • Кликнуть на иконку.
  • Кликнуть на строку поиска, чтобы что-то вводить.
  • Кликнуть на иконку, чтобы поиск начался.
  • Расстроиться, потому что поиск не начнётся.
  • Снова кликнуть на строку поиска.
  • Нажать на клавиатуре Enter.
  • Получить результат.

Как решить проблему

  1. Отображать строку поиска развёрнутой по умолчанию.
  2. При клике сразу позволять вводить запрос.
  3. Отправлять запрос не только по нажатию на Enter, но и при клике на кнопку или иконку поиска.
  4. Либо автоматически подгружать результаты при вводе.

3. Видео при скролле

При просмотре видео порой возникает желание написать комментарий. Либо когда в видео ничего динамичного не происходит, идёшь листать комментарии.

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

Как сделать удобнее

Сделать плавающее видео в уменьшенном формате.

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

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

Показали наглядно, как можно сделать лучше:

Последующие пункты незначительные, но всё же стоит обратить внимание.

4. Блок про фильм

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

Видно полтора слова от названия, огромная кнопка, которая выходит за пределы блока, практически все лэйблы и значения написаны в одном стилевом оформлении. Нехорошо.

Как сделать удобнее

5. Видео из плейлистов

Бывает, сидишь на YouTube и натыкаешься на какое-то интересное шоу. После просмотра одного выпуска хочется посмотреть другие, а по рекомендации включается что-то совершенно иное.

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

Но чтобы туда попасть, тебе потребуется:

  1. Перейти на канал.
  2. Открыть вкладку «Плейлисты».
  3. Среди всех плейлистов найти нужный.
  4. В нём найти видеоролик, который ты посмотрел, и включить следующий.

Как сделать удобнее

Первый вариант — использовать блок с видео из плейлиста, а остальные рекомендации давать ниже.

Второй вариант — добавить точку входа «Перейти в плейлист». Сейчас YouTube порой предлагает некий «Микс». Собирается он по совершенно непонятным для меня правилам. Вместо него лучше добавить такую же плашку, которая будет вести в плейлист с роликом.

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

Конаков Артём
основатель студии UXART

Пишите в комментарии, что ещё стоит изменить. Возможно мы сможем вместе сделать интернет немного удобнее :)

P.S. Укажите сайты, приложения, программы, которые вы бы хотели увидеть в следующих выпусках UX-патруля от команды UXART.

Всем мира!

#ux #youtube #ux_патруль #uxart #web #интерфейс

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

Написать
{ "author_name": "Артем Конаков", "author_type": "self", "tags": ["\u0438\u043d\u0442\u0435\u0440\u0444\u0435\u0439\u0441","youtube","web","ux_\u043f\u0430\u0442\u0440\u0443\u043b\u044c","uxart","ux"], "comments": 27, "likes": 43, "favorites": 91, "is_advertisement": false, "subsite_label": "design", "id": 72461, "is_wide": true, "is_ugc": true, "date": "Sun, 23 Jun 2019 20:45:55 +0300" }
{ "id": 72461, "author_id": 56964, "diff_limit": 1000, "urls": {"diff":"\/comments\/72461\/get","add":"\/comments\/72461\/add","edit":"\/comments\/edit","remove":"\/admin\/comments\/remove","pin":"\/admin\/comments\/pin","get4edit":"\/comments\/get4edit","complain":"\/comments\/complain","load_more":"\/comments\/loading\/72461"}, "attach_limit": 2, "max_comment_text_length": 5000, "subsite_id": 199114, "last_count_and_date": null }
27 комментариев

Популярные

По порядку

Написать комментарий...
12

Если бы ютьюб сделал просто банальные папки для каналов это бы уже победа

Ответить
2

Тоже хотел написать, что не хватает возможности структурировать подписки по каталогам.

Ответить
1

Ого! Первый человек на просторах TJ-VC-DTF, который обратился в комментах ко мне на вы ))) Скачиваю расширение. Спасибо.

Ответить
7

Очень интересно тебя читать. Структурировано и без воды. Продолжай 😉

Ответить
5

А как вам две подряд кнопки "Сохранить" в мобильном приложении?

Ответить
1

Это плохой перевод, исправить очень много, но пока это не делают.

Ответить
2

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

- Что дизайнеры преследовали спрятав фильтр таким образом? Возможно потому что это не яндекс маркет и большинству достаточно всего одного клика.
- С иконкой поиска сомнительное замечаение. Очевидно, что это не кнопка. Достаточно частое явление переход по энтеру. Где вы вообще видели кнопку действия до поля ввода?
- Есть проблемы с переводом. Да это частая проблема у международных сервисов. У мультимедиа-системы Toyota Touch огрномное количество таких косяков.

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

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

Ответить
3

Спасибо за комментарий

1. Мы никого не гнобим, а указываем на то, что по нашему субъективному мнению неудобно и предлагаем изменения, а не просто слепо критикуем. То что они не всё перевели из-за того что сервис большой, не означает, что проблемы для пользователей нет. И, как я указал в статье, это мелочь.
2. Яндекс Маркет — всего лишь пример боковой фильтрации, о которой мы написали, так как в комментарии автор ссылался на другой сервис Яндекса.
3. Сравнивать поисковую строку с простыми полями ввода некорректно. Я провел опрос среди своего круга общения и других дизайнеров и это неудобно для 90% из них. Если вам удобно и так — здорово. А мне нет.
4. Касательно нашего сайта — да, контента там немного, в силу особенностей субподрядной работы. Как минимум, там есть наши контакты для связи и кому интересно, что мы делаем, смогут спросить. Данная статья не несёт в себе цели показать, что мы лучше всех дизайнеров YouTube или что-то в этом ключе, мы лишь делимся мнением и собираем отклик.
5. Я не расхваливал себя или компанию. Разве то, что я рассказал о любви к интерфейсам, предложил решения и в упоминании названия компании привязал ссылку — это расхваливание себя?
6. Разбирать сайты другого уровня, для тех кому нужен дизайнер — это наша работа. А здесь мы пишем про крупные ресурсы, которые сами регулярно используем и испытываем боль в каких-то моментах. И судя по отклику, многие тоже сталкиваются с этими неудобствами.

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

Ответить
3

Вы что реально думаете, что дизайнеры гугла сидят и думают: "Так, давненько мы на VC не заходили. Надо бы посмотреть, может там про Ютуб что то написали дельного"??? Переведите на английский все это и отправьте в техподдержку. Больше шасов будет.

Ответить
0

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

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

Ответить
0

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

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

Ответить
1

«... миллионы долларов на разработку, в том числе анализ и исследования» — https://clck.ru/GjpFa

Везде сидят люди. Люди могут ошибаться, не всё учитывать. Особенно когда длительное время работаешь над одним продуктом, глаз может замылиться.

Ответить
1

Этот косяк из-за того, что на разных языках свои проблемы. Можно попробовать написать им в саппорт, я так делал с Samsung Pay, после обновления русские буквы в кнопке не влезали в одну строку. Они исправили косяк в следующем обновлении.

Ответить
2

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

Ответить
0

Не соглашусь с автором статьи по поводу решения с фильтром.
1. По всей видимости, они его спрятали, потому что это более редкий кейс по отношению к обычному поиску.
2. Решение вынести фильтр в бок, спровоцировано высотой у маленьких мониторов. Но автор забываешь что эти мониторы еще и узкие. Не факт что это будет хорошо смотреть и не будет отвлекать и рушить пользовательские сценарии которые описал в 1 пункте.
3. Можно было бы найти компромисс. Например как реализовано в «Яндекс картинках» - горизонтальная полоска с фильтрами, в высоту занимает 40px, порядок можно выстроить от наиболее частых фильтров к менее частым в использовании.

Очень интересно почему такие заключения в статье. Есть ли у вас какие-то метрики или опыт в работе с аналогичными проектами?

PS: с решениями по поведению элементов - полностью солидарен

Ответить
3

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

Ответить
1

Степан, спасибо за комментарий.

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

2. Перед проектированием бокового фильтра мы учли узкие мониторы. Сейчас на 1024px раздел «История» выглядит так: https://clck.ru/GjojP — меню слева сокращается до иконок, но вот фильтр конкретно здесь очень широкий (441px) и так делать не стоит, хотя они уже сделали. В нашем случае фильтр занимает 150px и не перетягивает на себя акцент при эксплуатации.

3. В Яндекс.Картинках другая логика построения контента. Там задача показать как можно больше элементов на экране, поэтому боковой фильтр был бы проигрышным вариантом. В случае с поисковой выдачей ютуба, можно провести аналогию с ЯндексМаркет, когда пользователь выбирает товары: https://clip2net.com/s/42ez6vo — фильтр всегда рядом, но при поиске товара он не отвлекает. Также в Яндекс.Картинках для применения фильтра нужно нажать: «Показать фильтры» → Выбрать нужный → Кликнуть на него → Выбрать/ввести параметр. А в нашем решении фильтр доступен сразу и в один клик можно применить нужный параметр. Это ведь удобнее?)

Ещё есть вечная дискуссия "С какой стороны размещать боковой фильтр?" — многие исследования утверждали, что из-за того что мы считываем информацию слева-направо, размещать фильтрацию слева нельзя. И мы согласились, так как звучит правдоподобно. Но потом я стал обращать внимание, что на многих популярных интернет-магазинах фильтр находится слева, но он не мешает мне изучать контент. Следовательно, можно прийти к выводу, что при использовании корректных визуальных акцентов, наш мозг способен игнорировать блок с фильтром, при считывании контента.

Ответить
0

Артём, не путайте тему интернет магазинов и видео-сервисов.
Что касательно фильтров которые я предлагал они сразу выводятся в таком виде - https://yadi.sk/i/1SWicbJwQnKA6Q
По скольку Google сделал, что после первого же клика их фильтр сворачивается, предположу что по всем метрикам люди чаще всего фильтруют по 1 параметру. Следовательно видеть всё и сразу - не самая лучшая идея.
И кстати, с правой стороны у них уже есть другой блок - https://yadi.sk/i/ds09LzC54MFm2w

Ответить
1

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

Ответить
1

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

Ответить
0

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

Ответить
1

Данную функцию ещё не реализовали. Мы как раз предлагаем это сделать :)

Ответить
1

Подобная функция имеется в расширении Enhancer for YouTube, "Закрепить видеоплеер, при прокрутке страницы вниз"

Ответить
0

если не ошибаюсь, подобный функционал реализован в Twitch

Ответить
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" }