Блог UXART
UX-патруль

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

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

О чём статья

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

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

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

This browser does not support the video element.

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

This browser does not support the video element.

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

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

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

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

This browser does not support the video element.

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

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

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

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

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

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

This browser does not support the video element.

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

This browser does not support the video element.

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

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

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

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

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

Бывает, сидишь на YouTube и натыкаешься на какое-то интересное шоу. После просмотра одного выпуска хочется посмотреть другие, а по рекомендации включается что-то совершенно иное.
А на канале просмотренное видео содержится в плейлисте, где собраны все выпуски.
Но чтобы туда попасть, тебе потребуется:
  1. Перейти на канал.
  2. Открыть вкладку «Плейлисты».
  3. Среди всех плейлистов найти нужный.
  4. В нём найти видеоролик, который ты посмотрел, и включить следующий.

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

Первый вариант — использовать блок с видео из плейлиста, а остальные рекомендации давать ниже.
Второй вариант — добавить точку входа «Перейти в плейлист». Сейчас YouTube порой предлагает некий «Микс». Собирается он по совершенно непонятным для меня правилам. Вместо него лучше добавить такую же плашку, которая будет вести в плейлист с роликом.
Мы любим YouTube. Я лично провожу на нём немало времени. Проблемы, которые мы описали, — мелочь относительно всего сайта. Но закрывать глаза на неудобства, учитывая масштабы или репутацию сервиса, — неправильно. Развитие и постепенные улучшения интерфейсов никому не навредят.
Конаков Артём, основатель студии UXART
Пишите в комментарии, что ещё стоит изменить. Возможно мы сможем вместе сделать интернет немного удобнее :)
P.S. Укажите сайты, приложения, программы, которые вы бы хотели увидеть в следующих выпусках UX-патруля от команды UXART.
Всем мира!
#ux #youtube #ux_патруль #uxart #web #интерфейс