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.

Всем мира!

0
27 комментариев
Написать комментарий...
Алексей Лобанов

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

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Дима Набок

Попробуйте мое расширение для Chrome/Firefox добавляет папки:
https://chrome.google.com/webstore/detail/youtube-subscriptioncolle/kdmnjgijlmjgmimahnillepgcgeemffb?hl=en

Ответить
Развернуть ветку
Аккаунт удален

Комментарий недоступен

Ответить
Развернуть ветку
Artemy Kuznetsovsky

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

Ответить
Развернуть ветку
Виктор Арапов

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

Ответить
Развернуть ветку
Игорь Маркелов

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

Ответить
Развернуть ветку
Александр К

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

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

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

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

Ответить
Развернуть ветку
Артем Конаков

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

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

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

Ответить
Развернуть ветку
Александр К

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

Ответить
Развернуть ветку
Артем Конаков

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

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

Ответить
Развернуть ветку
Lirnik

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

Ответить
Развернуть ветку
Aleksandr Bilous

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

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

Ответить
Развернуть ветку
Артем Конаков

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

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

Ответить
Развернуть ветку
Игорь Маркелов

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

Ответить
Развернуть ветку
Alex S

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

Ответить
Развернуть ветку
Степан Воеводин

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

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

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

Ответить
Развернуть ветку
Lirnik

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

Ответить
Развернуть ветку
Артем Конаков

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

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

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

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

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

Ответить
Развернуть ветку
Степан Воеводин

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

Ответить
Развернуть ветку
Lirnik

-

Ответить
Развернуть ветку
Art.Spark

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

Ответить
Развернуть ветку
William Polo-Valerio

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

Ответить
Развернуть ветку
Артем Конаков

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

Ответить
Развернуть ветку
BloodyKompot

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

Ответить
Развернуть ветку
Степан Воеводин

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

Ответить
Развернуть ветку
Артём Кобяков

Нормально так. Но тут уже писали, повторюсь, все решения субъективные и не основанные на бизнес задачах ютуба. Занавес)

Ответить
Развернуть ветку
24 комментария
Раскрывать всегда