Здравствуйте, уважаемые читатели.
Это вторая запись из серии «Интерфейс видеоплеера», которая посвящена созданию прототипа на основе данных, которые были получены в результате анализа уже существующих видеоплееров от ведущих игроков рынка.
Как вы помните, в записи «Интерфейс видеоплеера: Анализ» я анализировал последние версии проигрывателей от YouTube, Vimeo и RuTube и для каждого из них составил списки плюсов и минусов с функциональной точки зрения.
При создании прототипа я буду опираться именно на эти списки — максимизируя плюсы и, стараясь, избавится от минусов.
Поехали.
В первую очередь, необходимо определится со стандартными размерами видеоплеера, который будет создаваться и соотношением сторон в видео. Будет ли это 4:3 или 16:10?
Для того, чтобы определится в этом моменте я пошел в ближайший российский агрегатор цен на товары (это был Яндекс.Маркет) и выбрал там видеокамеры. Как можно убедиться, широкоформатное соотношение сторон поддерживают 400 моделей из 497 на рынке, что сразу склоняет чашу весов на сторону соотношения 16:10.
После того, как было выбрано соотношение сторон, необходимо было решить какие размеры плеера считать стандартными. В стане игроков видеорынка радует единогласие — ширина плеера 640 пикселей, а высота динамически подстраивается под ширину. Т.к. для создания прототипа с высотой всё же нужно определиться, то я предположил, что в плеере будет проигрываться сферическое видео в вакууме, и поставил высоту в 360 пикселей.
Итак, уже появился общий силуэт проигрывателя, однако есть еще один нерешенный концептуальный вопрос: будут ли функции управления видео показываться всегда или же будут всплывать при наведении мыши на видео.
Проанализировав свои три жертвы я пришел к выводу, что ответ на этот вопрос будет зависеть от того какая аудитория будет пользоваться видеоплеером.
YouTube и RuTube (для всех) показывает функции всегда, однако Vimeo, который ориентирован на творческих людей и гиков показывает функции при наведении курсора на видео.
Т.к. ситуация здесь патовая, я обратился за ответом на официальные сайты программ-видеоплееров для операционных систем и заметил, что основной тенденцией является как раз показ функций при наведении. Решив, что даже если сейчас пользователи не привыкли к такому ходу, то привыкнут в будущем, я решил, что мой вариант плеера будет показывать функции при наведении курсора, тем самым экономя драгоценное место внутри браузера.
Решив главные вопросы, я пришел к выводу, что стоит составить список тезисов, по которому я буду проходить при проверке своего плеера. В этот список я выписал и расставил в порядке важности все плюсы и минусы трех видеоплееров, которых я анализировал в прошлой записи.
Проверочный список:
Плюсы:
- Удобная прокрутка видео.
- Возможность вручную выбирать время начала загрузки ролика.
- Интуитивные иконки-визуалы.
- Изменение громкости в один клик.
- Погашение громкости в один клик.
- Возможность включения HD-разрешения для видео, не переходя на сайт.
- Возможность получить ссылку на нужный момент в видео.
- Быстрое получение html-кода для вставки ролика, не заходя на сайт.
- Идентичность интерфейса на сервисе видео-хостинга и на других сайтах.
- Возможность остановить загрузку видео.
- Переключение режима времени ролика между «прошедшим и оставшимся».
Минусы:
- Не стоит прятать ключевые функции плеера в контекстное меню по правой кнопке мыши.
- Нежелательно менять уже устоявшееся расположение функций плеера.
- Не стоит загонять пользователя на сайт ради просмотра видео в режиме HD.
- Дать возможность пользователю сразу выбрать время начала загрузки видео, не дожидаясь пока видео, загрузится до этого момента.
- Избавится от функциональных кнопок с неясными функциями.
- Элементы управления видео хотелось бы видеть большого (но не слишком) размера.
- Избавится от слишком большой интерактивности, однако действия пользователя должны вызывать реакцию интерфейса.
- Не вставлять слишком назойливую рекламу. Вставлять её деликатно. Дать возможность простого и интуитивного её закрытия.
Список вы видите перед собой, однако на некоторых моментах я бы хотел остановиться чуть более подробно.
Во-первых, я разделил функции плеера на основные и дополнительные. В основные вынес кнопку проигрывания и паузы, полосу проигрывания, изменение громкости и кнопку переключения в полноэкранный размер. В дополнительные — кнопку получения html-кода, включения HD-режима, а также кнопку получения общей ссылки на видео и ссылку на конкретный кадр. После разделения я разнес их в разные места — основные элементы расположил внизу, а дополнительные сверху.
Во-вторых, решил, что плеер будет показывать рекламу в упрощенном формате от YouTube — узкая полоска с контекстным сообщением над дополнительными кнопками.
Для просмотра прототипа в действии кликните на изображении выше или по этой ссылке.
Некоторые моменты из чеклиста не могут быть выполнены на этом этапе без привлечения программиста, однако знать их всё-равно необходимо, хотя-бы для того, чтобы человек, который будет реализовывать ваш интерфейс не придумывал ничего сам, иначе придется начать всё с начала.
Продолжение следует.
PS: следующей статьей в рамках цикла станет «Интерфейс видеоплеера: Дизайн». Её выход планируется в четверг, 10 Июня.