Дизайн привычных вещей: как улучшить интерфейс на примере YouTube



    От переводчика: сегодня мы предлагаем вниманию Хабра перевод статьи дизайнера интерфейсов Kévin Eugène. Он много лет занят в этой сфере, поэтому ему есть что рассказать. Пример YouTube — один из наиболее показательных, ведь этот сервис хорошо знаком всем нам.

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

    Skillbox рекомендует: Практический двухмесячный курс «UX-дизайн».
    Напоминаем: для всех читателей Хабра — скидка 10 000 рублей при записи на любой курс Skillbox по промокоду «Хабр».

    Home Page




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

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

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

    Плеер




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

    Кнопки «нравится» и «не нравится»




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



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

    Правая колонка




    Правая колонка показывает ролики, релевантные текущему видео. Во всяком случае, подразумевается именно это. Предложения разделяются на три категории:

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

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

    Когда у плейлиста есть название, «Мой плейлист» заменяется на него.

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

    Когда пользователь ее нажимает, рекомендуемые видео попадают в «Мой плейлист». «Мои рекомендации» не редактируются, так как это результат работы алгоритмов, но видео можно перетаскивать и помещать в «Мой плейлист» по желанию.

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

    Если вы посмотрите аналогичный раздел на YouTube, то поймете, что четкой категоризации или объяснения тому, как видео сюда попадают, нет.



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

    В новом дизайне три категории («Мой плейлист», «Мои рекомендации» и «Больше похожих на это видео») связаны друг с другом и отображаются каждый раз, когда воспроизводится видео, даже если «Мой плейлист» пуст. Стоит объяснить различия между категориями коротко и ясно, чтобы пользователь точно понимал их цель («Основываясь на ваших привычках», например, или «На основе того, что вы смотрите сейчас»).

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

    Цифровое благополучие и ответственность


    Это отлично — построить платформу с огромным объемом развлекательного контента, но если возникает угроза вырабатывания привыкания (цифровой наркотик своего рода), то компании обязаны защищать своих пользователей.

    UI/UХ-дизайнеры ответственны за создание систем, которые вызывают привыкание в прямом смысле слова. Это дает возможность манипулировать чувствами пользователей.

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

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

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



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

    Картинка в картинке


    Наконец, «картинка-в-картинке» приходит на десктоп. И это выглядит великолепно.



    «Картинка-в-картинке» автоматически активируется, когда панель видео закрыта. Задействовать функцию можно, либо перетаскивая ролик, либо нажав панель поиска. В мини-версии видео пользователь может приостановить воспроизведение, отключить звук, изменить его размер, поместить его в другое место или вернуть обратно на панель видео, щелкнув по нему. Когда миниатюра воспроизводится, фоновое видео на главной странице приостанавливается.

    Instant Playlists


    Здесь все элементы головоломки сходятся.

    Instant Playlists — временные плейлисты, которые пользователь может очень быстро создавать, редактировать и просматривать. Они основаны на жестах drag-and-drop.



    Когда пользователь захватывает видео в нижней части экрана, оно сохраняется в Instant Playlist и находится в верхней части в режиме «картинка-в-картинке». Воспроизведение не начинается до тех пор, пока сам пользователь не решит это сделать.



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

    Как и говорилось выше, Instant Playlist — это временный список. Как только пользователь закрывает YouTube, такие списки удаляются. При желании их можно сохранять, открывая меню редактирования. Пользователь может называть свои списки, удалять видео из них, переставлять ролики местами.



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

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

    В качестве вывода


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

    Skillbox рекомендует:


    Skillbox

    106,00

    Онлайн-университет профессий будущего

    Поделиться публикацией
    Комментарии 14
    • НЛО прилетело и опубликовало эту надпись здесь
      • НЛО прилетело и опубликовало эту надпись здесь
          0
          Давным давно открываю ютуб только через youtube-viewer.
          Рекламы нет, рекомендаций нет, интерфейс только от mplayer'а, тяжеленнейшая страница не вешает браузер.
            +1
            Насколько мне известно, реклама отключается при покупке подписки Youtube Red.
            • НЛО прилетело и опубликовало эту надпись здесь
            +1
            Приходите работать к нам в фейсбук.
            • НЛО прилетело и опубликовало эту надпись здесь
                –1
                Ох уж эти рекомендации.

                Рекомендацию в ютубе достаточно ок, особенно если использовать его для музыки (да, у них уже есть youtube music и реально классная штука)
                Особенно ночью

                Яркое видео на белом фоне меньше выжигает глаза ночью, чем яркое видео на темном фоне?
                • НЛО прилетело и опубликовало эту надпись здесь
                +2
                Я предупредил бы о таком количестве гифок в статье…

                А по поводу интерфейсов… Самый нормальный для меня это когда появилась Vista…. Ну у ХР было еще очень неплохо для того времени, а вот начиная с восьмой винды пошёл какой-то ужос! Плиточный вариант, да еще и без явновыраженных кнопок для меня это перебор… Водить мышью в поиске вплывающих подсказок, чтобы понять где и что! В телефонах тоже самое. Началось, если не ошибаюсь с windows mobile. Просто цифры на белом фоне. Да кто ж интересно, такое напридумывал? И ведь все дружно поддержали эту дизайнерскую идею и гордо несут!

                Извиняюсь, просто крик души...….
                  +1
                  Он много лет занят в этой сфере, поэтому ему есть что рассказать.

                  Судя по его профилю LinkedIn работает он в этой сфере где-то 4 года. Работодатели у него не то чтобы хрены с гор, но и далеко не фейсбуки с гуглами. Везде пишет что ищет работу, судя по всему поэтому и написал данную статью.

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

                  Пара более-менее здравых идей у него, конечно, тоже есть, например идея с кнопками «нравится»/«не нравится» в полноэкранной версии плеера. Но, с UX ютуба спорить трудно, ресурсы на всякие исследования у них точно есть и раз у них этих фич нет, значит им это не надо.
                    0
                    Причем первое место 7 месяцев работы второе 5 третье 3, видать никто не хочет брать дизайнера который уйдет через пару месяцев.)
                    0
                    Чаще всего я нажимаю кнопки перемотки, перелистывания на другой ролик, ну и изредка субтитров. Кнопка остановки не используется т.к. за неё отвечает вообще вся область видео где нет других кнопок. Верхний правый угол отведён под опросы и всякий интерактив. Разворачивается видео по двойному клику.

                    Ни одной из нужных кнопок в «улучшенном» варианте не увидел, зато есть несколько больших ненужных. Удобно, наверное.
                      +1
                      Скрывающаяся настройка громкости плохо — чуть отведешь от шкалы курсор она скрывается и опять нужно наводить на иконку чтобы она появилась, фулскрин в углу чтобы увеличить пробег курсора по экрану? контроллы управления должны быть максимально близко друг к другу зачем их раскидывать?.. куда делся таймлайн? зачем кнопка play/pause в центре такая гиганская? кликать на всё поле с видео чтобы стопить и начинать воспроизведение гораздо удобнее она нужна как вспомогательный элемент зачем акцент на 90% бесполезной кнопке?
                      Сделано визуально по приятнее но ухудшен UX в куче мест, разве что перетаскивание видео в плейлист хорошая идея, особенно для тех кто музыку с ютуба крутит с клипами. Остальное плохо, не менять существующие решения только для того чтобы «было подругому» моветон.
                      У ютуба специальные алгоритмы заточены на то чтобы вы смотрели максимальное количество роликов, прожигание времени в сервисе полностью вина пользователя, блокировать воспроизведение тоже идея не очень, просто выводить мелкую подсказку о слишком большом времени просмотра было бы не плохо, но портить работу алгоритма который научен подбирать в рекомендованные ролики которые пользователь скорее всего будет смотреть отключением у него автовоспроизведения на совсем? зачем стрелять себе в ногу? там есть мануальный переключатель, кому надо его выключает.

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

                      Самое читаемое