Сравнительно недавно вышла заметка об идеальном видеоплеере ^[1] для среднестатистического видео-хостинга ^[2]. В ней я постарался учесть все минусы и плюсы плееров от многоуважаемых YouTube ^[3], Vimeo ^[4] и RuTube ^[5].

^[6]

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

Несколько вещей в спешке не были продуманы как следует, кое-что оказалось не таким уж идеальным, как казалось раньше, но в целом и общем получилось неплохо.

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

Итак: вот, что получилось в прошлый раз ^[1]:

^[1]

Что с ним стоит сделать?

1. Избавится от черного цвета, который хоть и недурно подчеркивает цветность видео, но сильно забирает на себя внимание, что отвлекает от содержания ролика. Поэтому я сменил черный цвет на нейтрально серый, смешав цвета плеера САЛ ^[7] и компании Apple ^[8]. Гибрид получился аскетичным, и симпатичным. И что немаловажно – больше не отвлекает внимание от содержания.

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

3. Добавить кое-какие метаданные. Например, длину ролика, процент потоковой загрузки, и время проигрывания. Я постарался эти данные оставить в одной плоскости, но разделить визуально – ведь процент, и время несколько разные вещи.

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

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

Как ни странно – в процессе тестирования оказалось, что ползунок является едва ли не самой важной частью интерфейсов видеоплееров, что меня сильно удивило.

5. Сделать интуитивную полосу проигрывания. Теперь проигранное время выделено красиво гармонирующей синей полоской, а загруженное время – красивой серой. При этом у меня возник спор с Ромой Горшковым по поводу контрастности серой полоски по отношению к фону плеера.

В конце-концов я сдался, и в конечном счете остался доволен результатом. Также благодаря четкой вертикальной линии в конце полосы загрузки видно четкую границу загрузки. Хоть полоска и стала контрастной, её конец всё равно терялся на фоне.

6. Сделать хороший прелоадер. Отсутствием оного грешат множество видеоплееров, что совсем не является их плюсом. Благодаря идее товарища Алишера (привет!), я решил сделать его в виде старого ленточного круга с сменяющимися цифрами от 10 до 1, но только на современный лад.

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

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

8. Избавится от излишней модной стилизации, и остановится на симпатичном, но не вызывающем дизайне. Стилизация слишком режет глаз, и отвлекает от содержания, поэтому её под нож.

О механике

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

Как это сделано в этом прототипе? Уровень звука подсвечивается при наведении, и при клике на наведенную полоску – устанавливается. Если пояснение неясно – смотрите на картинку.

2. При движении ползунка время проигрывания двигается, а процент – загрузки нет. Можно передвинуть ползунок на незагруженную область, и загрузка начнется с места ползунка, и прекратится предыдущая. Похожая механика используется в плеере YouTube ^[3]. При движении ползунок становится полупрозрачным.

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

4. Я не считаю, что отказ от рамок плеера позволяет ему более хорошо вписаться в дизайн сайта. Серый цвет нейтральный, и внимание не привлекает – вписывается в любой дизайн, в отличии от черного. Зато рамки помогают «не сбежать» взгляду с видео. Часто, смотря видео без рамок, мой взгляд непроизвольно перемещается за пределы ролика, и я пропускаю моменты видео, тем самым дезориентируясь в нем.

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

6. Кнопка «Во весь экран» при наведении расширяет свои границы, что в разы повышает наглядность.

7. Пример реакции кнопок на наведение:

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

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

^[6]

PS: Внутри плеера используется видео из игры StarCraft 2 ^[9].

Тем временем

1. Миша Квакин ^[10] пишет о возможном появлении публичных блогов читателей внутри своего.

2. Сергей Чаботько ^[11] меняет людей на деньги.

3. Футуриус ^[12] публично и яростно ненавидит спам. Видимо О.Н.И. уже добрались и до него.

4. Юра Ветров ^[13] размышляет о жизненном цикле интерфейса.