Наверняка вы помните, что в этой заметке я клятвенно пообещал поработать над юзабилити видеоплееров в видео-хостингах. И не просто поработать, а сделать идеальный видеоплейер. Данная статья будет более подвержена моему желанию экспериментировать над содержанием, чем остальные, поэтому готовьтесь читать немного, но с удовольствием смотреть.
Сделать то, что я задумал непросто, но я постараюсь ради того, чтобы вам было интересно, и понятно.
Для начала работы мне потребуется несколько хороших плееров, из которых мы будем делать некого красивого Франкенштейна – отрезать лишнее, добавить нужное, улучшить оставшееся. Причем я буду стараться не затрагивать тему физических качеств, как-то качество потокового видео, размеры ролика, 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. Тёмма пишет о Хабрахабре.