Идеальный видео-плеер 
Автор: Ярослав Бирзул \ Опубликовано 06 мая 2008 года в категории Идеалы \
Наверняка вы помните, что в этой заметке я клятвенно пообещал поработать над юзабилити видеоплееров в видео-хостингах. И не просто поработать, а сделать идеальный видеоплейер. Данная статья будет более подвержена моему желанию экспериментировать над содержанием, чем остальные, поэтому готовьтесь читать немного, но с удовольствием смотреть.
Сделать то, что я задумал непросто, но я постараюсь ради того, чтобы вам было интересно, и понятно.
Для начала работы мне потребуется несколько хороших плееров, из которых мы будем делать некого красивого Франкенштейна – отрезать лишнее, добавить нужное, улучшить оставшееся. Причем я буду стараться не затрагивать тему физических качеств, как-то качество потокового видео, размеры ролика, HD или нет, и т.п. Мне кажется, что это обсасывалось, чуть ли не каждым человеком, и материалов на эту тему просто не перечесть. Например: вот это.
В качестве подопытных кроликов я возьму плеер самого популярного сервиса – YouTube, самого красивого – Vimeo, и самого быстрого – RuTube.
Затрагивать в переделке я буду несколько тем – эстетику, удобство внутреннего функционала, устройство навигации внутри видеоролика.
Для начала работы над своим вариантом мне нужно выделить плюсы и минусы каждого из наших подопытных, чтобы интерфейс вышел максимально красивым и удобным.
YouTube
Все на месте, но мне не нравится дизайн. На мой взгляд, слишком уж просто, и некрасиво. И если, скажем, в GoogleTalk простота красивая, то тут уж никак не подходит под это определение.
Vimeo
Красив, но местами плеер неудобен. Нет иконки быстрого погашения звука, да и само отображение звука реализовано не интуитивно. Неопытным пользователям может вздуматься, что это индикатор батареи, которой на самом деле не существует (ложки не существует, ага).
RuTube
Непонятно для чего нужна кнопка «стоп», и что она забыла в непосредственной близости от кнопки «проигрывать». Также, на мой взгляд, неудобное регулирование звука, при котором требуется делать лишний клик, а также не интуитивная иконка раскрытия видео во весь экран. Также отсутствует индикатор загрузки.
Итак, что нам нужно вместить в плеер:
- Удобное регулирование звука без лишних кликов.
- Иконку мгновенного погашения звука.
- Интуитивную иконку для разворачивания во весь экран.
- Кнопку «проигрывать».
- Кнопку «пауза».
- Нормальный индикатор загрузки «Идет загрузка».
- Интуитивный статус-бар процесса загрузки ролика. Интуитивно отобразить отображение временной полоски.
- Вынести самые популярные действия с роликом с сайта в плеер.
Сразу оговорюсь, что ради упрощения, я постарался совместить некоторые из пунктов. Например, я совместил статус бар времени и статус бар загрузки. Также совместил в одном месте кнопку паузы и проигрывания.
Теперь детальнее:
1. Регулирование звука без лишних кликов сразу подразумевает под собой то, что решение, которое используется в RuTube, откидываем, и нам нужно удобно совместить варианты в плеерах YouTube и Vimeo. Индикатор должен отображаться нарастающей волной полосок. Это настолько стандартно, что незачем сбивать людей своими инновационными решениями.
2. Т.е. иконки погашения звука в Vimeo нет, мы добавляем и её.
3. Симпатичная иконка в Vimeo. В RuTube и YouTube хромает её отображение. Поэтому мы просто доработаем вариант Vimeo – исходящие в 4 стороны луча.
4. Совмещаем кнопку «проигрывать» и «пауза». Т.к. кнопка «проигрывать» не может использоваться во время проигрывания ролика, и «пауза» не может использоваться во время паузы.
5. См. пункт 4.
6. Отсутствием простейшей надписи «загрузка» грешит YouTube, и RuTube. В Vimeo довольно симпатичный и оригинальный индикатор.
7. Тут у всех плееров всё хорошо – все совместили статус бар процесса загрузки, и времени проигрывания. Следовательно, будем перенимать их опыт. Процесс загрузки отображается полупрозрачной полосой, а процесс проигрывания более четкой. Чем быстрее у пользователя интернет – тем красивее пробегает полоса загрузки.
8. В нашем случае это «Мне нравится», «Добавить в сайт», «Коды ролика», «Похожие ролики». К пунктам Vimeo добавил «Похожие ролики», т.к. в YouTube, и RuTube, эта функция в наличии, и я ей регулярно пользуюсь. Я вынесу эти действия на панель, которая выдвигается при приближении курсора к верхнему краю плеера. При бездействии эта панель просто задвигается обратно.
К элементам управления сразу относится пару замечаний:
1. Они должны как-либо реагировать на наведение курсора.
2. Желательно они должны как-либо реагировать на нажатие.
Для этого я снабдил свой прототип в верхней панели цветными пиктограммами при наведении, и легким затемнением при нажатии. Кнопки «проигрывать» и «пауза» также имеют свои цвета при наведении и нажатии.
При наведении на регулятор звука уровень звучания ездит за курсором мышки.
После разворота во весь экран пиктограмма «во весь экран» превращается в пиктограмму «свернуть». Для этого нам просто нужно сжать края ближе к друг-другу. При наведении просто менять эти две пиктограммы.
На мой взгляд получилось довольно хорошо, и с точки зрения удобства, и с точки зрения эстетического удовольствия от просмотра видео – черный цвет подчеркивает цвета, а модные элементы добавляют немного «изюма» в довольно прозаичный интерфейс.
Если кому-то захочется, чтобы этот прототип перестал им быть, и кому-то потребуется рабочий вариант плеера – обращайтесь в контакты, обсудим варианты использования моего “.PSD” исходника.
Тем временем
1. Миша Квакин учредил акцию по раздаче ценных призов в виде красивых RSS иконок.
2. Аня Галкина опубликовала небольшой обзор посещения радио-ведущих.
3. Сергей Чаботько осветил способ улучшение выдачи в Google.
4. Футуриус рассказывает детально о RSS.
5. Тёмма пишет о Хабрахабре.
Сергей Чаботько
Миша Квакин
Футуриус
Точка с запятой;
Guicci
Просто Tyomma
Юрий Дибров
WebMolot
Чернев
Юрий Ветров
Nicholass пишет нам 6 мая, 2008 в 10:22
Странно, очень странно, у Ютуба есть индикатор загрузки
А вот кнопка “стоп” ИМХО очень ползена, потому, что у меня ограниченый трафик и иногда я хочу остановить загрузку клипа.
Ярослав Бирзул пишет нам 6 мая, 2008 в 10:25
Nicholass, так ведь пауза тоже останавливает. У меня не появилось “идет загрузка”. Просто черный экран
Nicholass пишет нам 6 мая, 2008 в 10:26
А вот еще что хотел сказать, единственное, что не удобно у ютуб, это бегунок. Имхо самый удобный это стрелочка под полосой, которая точно показывает место где проигрывается, мне иногда нужно бывает довольно точно поставить бегунок? а юутубовскую точку сложно перетащить точно на какое-то время.
dev пишет нам 6 мая, 2008 в 10:29
>>Также отсутствует индикатор загрузки(You tube).
А что с ним случилось, куда вдруг он пропал )))))
Nicholass пишет нам 6 мая, 2008 в 10:29
2 Ярослав - паусза останавливает воспроизведение, но не закачку. на юутубе крутиться фигулька (как большинстве аяксовых приложений)
Ярослав Бирзул пишет нам 6 мая, 2008 в 10:32
У меня бегунком является и стрелочка, которая указывает на точное место проигрывания, и блок с временем.
Ярослав Бирзул пишет нам 6 мая, 2008 в 10:34
Nicholass, странно, у меня он не отобразился. Поправил.
dev, я уже уточнил, что имелось введу не сайдбар процесса загрузки ролика, а просто страница начальная с надписью “Идет загрузка” и вертящимся лоадбаром.
ZAV пишет нам 6 мая, 2008 в 10:34
Ждём выхода birzooltube :)
Юрий пишет нам 6 мая, 2008 в 10:36
Я бы хотел вапще подключить к компу мозги напрямую. Чтобы он печатал и юзал интерфейсы силой мысли, а то пальцы уже задолбались и мышки ломаются раз в полгода от безумно частого кликанья 8)
С любовью, Юра.
Ярослав Бирзул пишет нам 6 мая, 2008 в 10:40
ZAV, тут как-нибудь без меня.
Юра, а к чему этот коммент? :)
Nicholass пишет нам 6 мая, 2008 в 10:47
2 Юра
это ко мне)
dev пишет нам 6 мая, 2008 в 10:48
Насчет сделать такое плеер - можно конечно, но только что дальше ))) Просто плеер почти никому не нужен. А сервис для видео делать - мм. трудно найти коммерческий смысл в этом ))) Разве что за деньги каких то инвесторов ))))(как например RuTube отдался нефтяной компании)
Евгений пишет нам 6 мая, 2008 в 10:52
Кнопка выключения звука слишком маленькая, стоит сделать ее как минимум такого же размера как “Развернуть”, и расположить рядом.
Индикатор звука я бы положил набок, достаточно привычно, много где встречается лежачий индикатор и позволит уменьшить высоту панельки.
Эффекты с кнопки долой, проигрыватель должен быть выполнен в нейтральным стиле, чтобы вписываться в любой дизайн сайта.
Почему у индикатора времени стрелочка не по центру? и что еще за стрелочка над полоской загрузки/времени.
Дальше отойду чуть от проигрывателя и выражу свое возмущение: статья написана не юзабельно :) может быть автор легко запоминает 7 пунктов, и потом ему сразу понятно о чем речь, а мне нет, приходится скролить туда сюда, стоит повторять тезисы перед их раскрытием.
Форма комментов тоже удивила, я бы предпочел чтобы метка к полю постоянно была видна в том или ином виде, а так написал имя, автоматически нажал таб, чуть отвлекся и тупо созерцаешь пустое поле не предстваляя, что туда вводить, конечно потом понимаешь, что второе поле в любом случае почно, но “Не заставляйте меня думать!”
Евгений пишет нам 6 мая, 2008 в 10:54
второе поле почта, конечно :)
Алишер пишет нам 6 мая, 2008 в 10:55
Что мне нравится у Vimeo - отсутствие рамочки. Это позволяет вставить видео куда угодно. Кроме того чистые линии и простые цвета элементов управления Vimeo с меньшей вероятностью вступят в конфликт с дизайном блога.
Идет загрузка - чего, почем, когда кончится? На некоторых (не помню каких) видео хостингах - показывается процент кэширования. Видимо при определенном проценте загрузке в соотношении со скоростью канала “плеер” знает когда стартовать видео. Однако нам пофиг, что знает плеер. Получив информацию о том сколько секунд осталось до старта видео, мы можем показать обратный отсчет, наподобие тех что были раньше на кинопленках. Это будет действительно информативно и клёво.
Бегунок штука хитрая. Уголок треугольника только зрительно дает ощущение точности позиционирования. На самом деле точность определяется всплывающей подсказкой с минутами-секундами - у нужны они только если нужно сказать кому-то: “Посмотри с 23 секунды - ухохочешься” Так что вместо бегунка достаточно немного выделить правый край индикатора, чтобы было понятно, что за него можно хвататься. И про подсказку не забывать.
Выключение звука всегда хочется сделать в один клик, быстро. Когда например неожиданно звонит телефон, или кто-то говорит что-то важное из другой комнаты. Вывод - иконка вырубания звука должна быть крупная с областью выделения на хувере.
Последний вопрос. Нужно ли нам знать сколько длится ролик? Если нужно, то это должно быть видно.
Алишер пишет нам 6 мая, 2008 в 10:58
Евгений, приятно что мои мысли “немного” совпадают с вашими)) Нажал комментировать, увидел ваш опус и решил, что мне можно было и не писать.
Ярослав Бирзул пишет нам 6 мая, 2008 в 11:09
dev, а с чего ты взял, что это сделано для того, чтобы я реализовывал видео-сервис? :) Неясна мысль.
Жень, всё у нас с тобой очень субьективно, поэтому спорить бессмыслено :)
1. Не факт. Субьективно :)
2. Мне удобнее так. Субьективно :)
3. Где ты это вычитал? :)
4. Потому что будь стрелочка по центру, в состоянии “00:00″ она бы задевала кнопку. Стрелочка НАД статусбаром - кусок бегунка, которым переключается место проигрывания. Бегунком является вся конструкция - треугольник сверху, снизу, полоска между ними, и подложка со временем. Причем двигая бегунок время в подложке меняется.
Остальное в личном общении :)
Алишер, спасиб, реально полезный комментарий :) Учту в будущем.
По твоим вопросам:
1. Идея с обратным отсчетом - круть.
2. Там помимо бегунка вполне явственная полоска. Бегунком также является подложка с цифрами.
3. Ховер я не показал, видимо зря. У кнопки выключения звуки появляется такая же окантовка как и у “во весь экран”.
4. Не факт. Я долго размышлял по этому поводу - решил, что я крайне редко смотрю на время.
Евгений пишет нам 6 мая, 2008 в 11:27
1. Не факт. Субьективно :)
Алишер думает о ней то же самое, мне кажется, это говорит об объективности данного предположения. Кому я рассказываю, Ярослав, ты же сам часто обращаешь внимание на недостаточно крупные кнопки. Кнопка “выключить звук” в плеере часто так же важна как “стоп-кран” в поезде.
>3. Где ты это вычитал? :)
это не очевидно? проигрыватель вставляют на очень разные сайты, и не так мало сайтов где стильная кнопка окажется совсем не кстати.
Ярослав Бирзул пишет нам 6 мая, 2008 в 11:30
1. Подумаю над этим.
3. А как же все проигрыватели от которых я брал лучшее? У них тоже явная стилизация. Не бывает универсальных плееров для всех сайтов.
И уж точно я никогда не видел, чтобы люди заморачивались над тем, что дизайн видео-плеера не похож на их дизайн.
Пример - http://www.gameplay.com.ua.
Алишер пишет нам 6 мая, 2008 в 11:35
Дело в том, что когда я вставляю видео себе в блог меня кроме видео ничего не интересует (в том числе не интересуют блики на рамочках и кнопках).
По-моему, это очевидно. Максимум - это рамка одного равномерного цвета. Как паспорту у фотографов, для концентрации на образе.
neochief пишет нам 6 мая, 2008 в 11:40
С ютубом немножко опоздали, там уже новый интерфейс ;)
http://drupaldance.com/files/share/youtube.png
Жаль обхор не затронул плеер от Viddler, там есть громадная фича в отображении комментариев на ползунке плеера:
http://www.viddler.com/explore/csuspect/videos/8/
Ярослав Бирзул пишет нам 6 мая, 2008 в 11:40
Если убрать блик в нижней панели - эффектов то и не остается. Только на кнопке.
Алишер, честно говоря с этим просто не согласен. Для меня внешний вид плеера один из самых важных моментов. Это субьективно, как тебе и мне.
Я согласен с размером кнопки выключения звука - это довольно важный момент.
> что когда я вставляю видео себе в блог
и
>На мой взгляд получилось довольно хорошо
PS: в общем ждите в ближайшее время продолжение заметки :)
Ярослав Бирзул пишет нам 6 мая, 2008 в 11:46
neochief, я его скринил сегодня, перед написанием статьи. Удивительно.
GriZone пишет нам 7 мая, 2008 в 1:09
относительно того чего нет - а хотелось бы в “идеальном плеере”:
кнопочку стоп
индикатор времени проигрывания и общего времени
явный бигунок на уровне звука
вот
а все остальное уже высказали ребята выше =)
Yanis пишет нам 7 мая, 2008 в 8:22
Во-первых, плееров намного больше.
По каким критериям были выбраны именно эти три?
Либо брать все плееры, ну или хотя бы штучек 10…, либо обосновывать почему эти оказались лучшими.
Мне например нравится этот плеер:
http://www.artlebedev.ru/everything/29fev/zd-credits/
и всеми достоинствами, которые выделены в статье, он обладает.
Во-вторых, нафига нумеровать список начиная от оглавления?
1. Итак, что нам нужно вместить в плеер:
2. Удобное регулирование звука без лишних кликов.
3. Иконку мгновенного погашения звука.
4. Интуитивную иконку для разворачивания во весь экран.
5. Кнопку «проигрывать».
6. Кнопку «пауза».
7. Нормальный индикатор загрузки «Идет загрузка».
8. Интуитивный статус-бар процесса загрузки ролика. Интуитивно отобразить отображение временной полоски.
9. Вынести самые популярные действия с роликом с сайта в плеер.
В итоге: франкенштейн получился.
meksico пишет нам 7 мая, 2008 в 10:57
При нажатии на паузу — останавливается проигрывание, но не закачка. Поэтому наличие обрыва закачки может быть нужно. Мой случай — я смотрю чью-то простыню с интересными хим-опытами. Роликов 10 на странице.
Некоторые сжаты и интересны, некоторые размазаны на 2 минуты, хотя все самое интересное показли в первые 30сек.
Я уже готов смотреть следующий, но приходится нажать на паузу второй ролки и дожидаться пока первый докачается, чтобы не было идиотских пауз на время кеширования. Вот и добавить бы ее на верхнюю панель с “кодами ролика” и “добавить на сайт”.
Теперь. Возможно я не вкурил по тексту, но хинт с указанием временной метки возле бегунка — не было бы лучше скрывать его до наведения мыхой на статус-бар?
Пункты “Коды ролика” и “Добавить на сайт” — по сути дублирующиеся, хотя может я чего не понимаю
“При наведении на регулятор звука уровень звучания ездит за курсором мышки.” Значит ли это, что случайно дернув мыхой в этой области я буду материться, прицеливаясь к фейдеру и возвращая звук обратно, потому что индикатор реагирует на движение мышки, а не на действие юзера?
Хотелось бы также нижнюю полосу сделать выдвигающейся и пропадающей — зачем мне на протяжении мувика видеть кнопки? А вот само поле экрана сделать реагирующим на нажатие мыхи = пауза. Также паузой можно было бы сделать и пробел — если мы уже ткнули на флеш объект, он воспринимает клаву.
PS А текст в поле комментария зачем такой блеклый?
meksico пишет нам 7 мая, 2008 в 11:09
Да, кстати Лебедевский плеер мне нравится больше всего — чисто, просто и аккуратно.
Другое дело, что в нем целой кучи социальных вещей нет (расшарить, оценить и пр), но эта задача и не стояла, насколько я понимаю надобность этого плеера.
Ярослав Бирзул пишет нам 7 мая, 2008 в 11:46
GriZone, meksico, Yanis, ждем продолжения заметки. Пока она явно сыра :)
Yanis, мне интересно как можно оценивать сразу все плееры? А если десяток? Я не IronMan к сожалению.
Баг со списком поправил.
GriZone пишет нам 7 мая, 2008 в 1:01
в лебедевском плеере не понравилось сильно широкая панель управления…
ну куда же бы он еще втыкнул свой логотип….
почему не сделать что тотипа такого:
по моему компактнее и логотип с пустым пространством вокруг не мозолит лишний раз глаз…
webmolot пишет нам 7 мая, 2008 в 1:49
Интересная статья, еще интереснее почитать комменты. В споре рождается истина - это факт. Ждем продолжения :)
Артём Курапов пишет нам 12 мая, 2008 в 6:23
-Градиент на кнопке я бы не ставил
-Звук мне визуально удобней регулировать горизонтально (раз уж по кругу нельзя как в муз.центрах)
-Фоновое изображение того сколько подгружено чуть поконтрастней бы
Остальные кнопки (на весь экран, закладки, код, близкие по теме ролики) я бы вынес. Я думаю любопытный плеер на absolute games:
http://www.ag.ru/games/fallout_3
Ярослав Бирзул пишет нам 12 мая, 2008 в 7:46
Артём, согласен. Как ни странно для следующей заметки в качестве идеалов я выделил:
1. Плеер САЛ.
2. Плеер Apple.
3. Плеер AG
Действительно достойные вещи, хоть и некоторые моменты в AG меня сильно раздражают.
fayona пишет нам 15 мая, 2008 в 5:29
Для меня знать точную длительность ролика по времени очень важно. Потому что, во-первых, очень часто возникает такая ситуация что я во времени ограничена ,соответственно, если ролик длинный я просто не буду его смотреть. Если короткий, то посмотрю. Поэтому проще видеть общую длительность.
Дальше. На видеохостингах очень часто встречается ситуация, что один и тот же клип запостен многими пользователями. И существует несколько его вариантов. НО очень часто бывает, что Вася запостил весь клип длительностью 6 минут, а Ваня частично.. обрезав конец клипа, и его клип длится 5 минут.
Если моя цель посмотреть клип целиком и полностью (а у меня такая задача возникает часто), то я выберу клип Вани.
Но если точной информации о длительности клипа нет, то мне придется с помощью проб и ошибок выявлять нужный мне клип. А на это я буду тратить много времени.
Ярослав Бирзул пишет нам 15 мая, 2008 в 5:36
Спасибо, fayona, я приму этот факт в следующей заметке :)
Sables пишет нам 23 мая, 2008 в 2:48
С кодом ролика очень удобно, вечно ногу слмаеш пока на странице ишеш его
Идеальный видеоплеер. Не утопия | О юзабилити веб интерфейсов пишет нам 28 мая, 2008 в 8:14
[...] недавно вышла заметка об идеальном видеоплеере для среднестатистического видео-хостинга. В ней я [...]