Интерфейс видеоплеера: Прототип

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

Как вы помните, в записи «Интерфейс видеоплеера: Анализ» я анализировал последние версии проигрывателей от YouTube, Vimeo и RuTube и для каждого из них составил списки плюсов и минусов с функциональной точки зрения.

При создании прототипа я буду опираться именно на эти списки — максимизируя плюсы и, стараясь, избавится от минусов.

Поехали.

В первую очередь, необходимо определится со стандартными размерами видеоплеера, который будет создаваться и соотношением сторон в видео. Будет ли это 4:3 или 16:10?
Для того, чтобы определится в этом моменте я пошел в ближайший российский агрегатор цен на товары (это был Яндекс.Маркет) и выбрал там видеокамеры. Как можно убедиться, широкоформатное соотношение сторон поддерживают 400 моделей из 497 на рынке, что сразу склоняет чашу весов на сторону соотношения 16:10.

После того, как было выбрано соотношение сторон, необходимо было решить какие размеры плеера считать стандартными. В стане игроков видеорынка радует единогласие — ширина плеера 640 пикселей, а высота динамически подстраивается под ширину. Т.к. для создания прототипа с высотой всё же нужно определиться, то я предположил, что в плеере будет проигрываться сферическое видео в вакууме, и поставил высоту в 360 пикселей.

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

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

YouTube и RuTube (для всех) показывает функции всегда, однако Vimeo, который ориентирован на творческих людей и гиков показывает функции при наведении курсора на видео.

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

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

Проверочный список:

Плюсы:

• Удобная прокрутка видео.
• Возможность вручную выбирать время начала загрузки ролика.
• Интуитивные иконки-визуалы.
• Изменение громкости в один клик.
• Погашение громкости в один клик.
• Возможность включения HD-разрешения для видео, не переходя на сайт.
• Возможность получить ссылку на нужный момент в видео.
• Быстрое получение html-кода для вставки ролика, не заходя на сайт.
• Идентичность интерфейса на сервисе видео-хостинга и на других сайтах.
• Возможность остановить загрузку видео.
• Переключение режима времени ролика между «прошедшим и оставшимся».

Минусы:

• Не стоит прятать ключевые функции плеера в контекстное меню по правой кнопке мыши.
• Нежелательно менять уже устоявшееся расположение функций плеера.
• Не стоит загонять пользователя на сайт ради просмотра видео в режиме HD.
• Дать возможность пользователю сразу выбрать время начала загрузки видео, не дожидаясь пока видео, загрузится до этого момента.
• Избавится от функциональных кнопок с неясными функциями.
• Элементы управления видео хотелось бы видеть большого (но не слишком) размера.
• Избавится от слишком большой интерактивности, однако действия пользователя должны вызывать реакцию интерфейса.
• Не вставлять слишком назойливую рекламу. Вставлять её деликатно. Дать возможность простого и интуитивного её закрытия.

Список вы видите перед собой, однако на некоторых моментах я бы хотел остановиться чуть более подробно.

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

Для просмотра прототипа в действии кликните на изображении выше или по этой ссылке.

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

Продолжение следует.

PS: следующей статьей в рамках цикла станет «Интерфейс видеоплеера: Дизайн». Её выход планируется в четверг, 10 Июня.

• Похожие заметки:

  • Интерфейс видеоплеера: Анализ
  • Интерфейс видеоплеера: Дизайн
  • Идеальный видеоплеер. Не утопия
  • Идеальный видео-плеер