Как повысить UX при работе с видео

Как повысить UX при работе с видео

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

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

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

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

Каких размеров должно быть видео?

Видеовставка может быть рискованным компонентом, но с его помощью не так сложно максимизировать эффект и оптимизировать пользовательский опыт. В большинстве решений все сводится к вопросу «Какого размера должно быть видео?». Ответ зависит исключительно от того, зачем вы используете видео.

Атмосферные видео

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

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

Пример: сайт туристического агентства продает очень дорогие туры на острова и хочет вызвать у вас чувство авантюры, смелости. Поэтому видео на таком сайте может медленно переходить от одного живописного места с мягким освещением и расслабляющими тонами к другому. Это создает эффект присутствия. Такое видео может сыграть решающим фактором между «Да! Все! Беру!» и «Нуу, может быть как-нибудь».

Видео объяснения

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

На Facebook к видео добавили автоматическое воспроизведение, но без звука. Звук не включится, если вы никак не покажете, что смотрите это видео (к примеру, развернув видео на весь экран или просто нажав на него).

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

Автопроигрывание помогает людям с нарушениями двигательных функций легче взаимодействовать с видео материалами. Однако такое увеличение порога доступности видео означает, что его можно преобразовать в текст наподобие атрибута alt. Видео теперь не является агрессивным инструментом передачи информации; оно может улучшить общие ощущения, не отпугивая пользователя. Мультимедийные сайты удовлетворяют потребности пользователей всех видов.

Что делать со звуком

Глухие пользователи (как я) сразу же выключают звук при просмотре видео так же, как и среднестатистические пользователи, когда видео начинает реветь на весь офис (раздражая коллег!). Ползунок громкости обрадует всех, но и автоматическое отключение звука или перевод видео в текст не единственные способы… есть также субтитры. Но в таком случае вы рискуете, что пользователи, не знающие, что у видео есть субтитры, нажмут на кнопку назад.

Качество или производительность

Видео очень затратный инструмент. Оно будет стоить вам десятков мегабайт, и только когда интернет стал довольно быстрым, мы начали рассматривать видео как жизнеспособный вариант передачи информации. К сожалению, со скоростью интернета еще очень много проблем (особенно на низкоскоростных мобильных устройствах), и тут неизбежно встает вопрос «Нам на самом деле нужно использовать видео или мы пытаемся быть в тренде?».

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

Где найти красивое видео

Очень легко найти стоковые видео. Возможно, стоковые видео пока меньше распространены, чем стоковые изображения, но это изменится по мере того, как люди будут все чаще работать с видео. Pexels – самый известный сайт бесплатных стоковых видео, но скажу от себя, что на Adobe Stock лучше качество. Вот несколько вариантов:

Videezy

X Stock Video

Coverr (мой любимый!)

Заключение

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

Автор: Daniel Schwarz

Источник: http://www.sitepoint.com/

Редакция: Команда webformyself.

Хотите научиться создавать шикарные дизайны сайтов?

Получите бесплатную пошаговую обучающую систему по веб-дизайну

Получить

Метки: ,

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree