优秀的视频用户体验应包含_使用视频时如何提供出色的用户体验

优秀的视频用户体验应包含

Video in web design was anticipated to be a top trend in 2016, and what was once thought of as impossible is now a widely-consumed concept by users in certain industries. Video is designed to captivate the user emotionally so this trend mostly applies to travel websites, hip startups and e-commerce stores selling luxury items.

网页设计中的视频预计将在2016年成为热门趋势,曾经被认为是不可能的视频现在已成为某些行业用户广泛使用的概念。 视频旨在吸引用户,因此这种趋势主要适用于旅游网站,时尚初创公司和销售奢侈品的电子商务商店。

In short, video can bring a sensual notion of a time and place that still photography can struggle to match.

简而言之,视频可以带来一个时空感的观念,而静态摄影却很难与之匹敌。

优秀的视频用户体验应包含_使用视频时如何提供出色的用户体验

Airbnb’s captivating video-based header depicts how “at home” you can feel by choosing an Airbnb over any other type of accommodation.

Airbnb迷人的视频标题描绘了您在其他任何类型的住宿上选择Airbnb后的感受。

But video can be heavy, in terms of both of megabytes and screen real estate, and it should be used with extreme caution. Let's take a look at some of the ways that we can make websites with video more accessible to the average user, and much more accessible to the more-common-than-you-might-think disabled user.

但是,就兆字节和屏幕空间而言,视频可能很繁琐 ,因此使用时应格外小心。 让我们来看看一些方法,我们可以使视频更容易被普通用户,以及更多进入到更常见高于你-强权认为禁用的用户的网站。

视频应获取多少房地产? ( How Much Real Estate Should Video Acquire?)

Video can be a high-risk web component, but it isn’t hard to maximise its effect and optimise its user experience. Most of the decision-making comes down to “how big should it be?”, and the answer solely depends on exactly what you’re using it for.

视频可能是高风险的Web组件,但要最大化其效果并优化其用户体验并非难事。 大多数决策归结为“ 应该多大? ”,答案完全取决于您使用它的目的。

氛围视频 ( Ambience Videos)

While most “hero” headers tend to use big background images, videos are becoming more commonplace too. How these differ from “explainer” videos is quite clear. Ambience-style videos don’t take a central focus on the webpage; the colours, speed, tone, mood and overall impression subtly induces emotional feelings, leaving the user with a desire to keep reading and scrolling.

尽管大多数“英雄”标题都倾向于使用大背景图片,但视频也变得越来越普遍。 这些与“解释器”视频有何不同是很清楚的。 氛围风格的视频并不以网页为中心。 颜色,速度,色调,情绪和整体印象巧妙地引起了情感上的感受,使用户渴望继续阅读和滚动。

Ambience videos are usually full-screen, and in-turn of lower quality; this is to keep the webpage size low and the loading times fast. Sometimes they’re blurred or even abstract – as long as they make you feel the way the website wants you to feel.

氛围视频通常是全屏的,因而质量较低; 这是为了保持网页尺寸小和加载时间快。 有时它们是模糊的,甚至是抽象的-只要它们使您感觉到网站希望您的感觉。

优秀的视频用户体验应包含_使用视频时如何提供出色的用户体验

Here’s an example: a travel agent website selling luxury island holidays may want you to feel adventurous, so their video might slowly transition between various scenic island destinations with soft lighting and relaxing hues, making you feel as if you were literally right there in the moment. It can make all the difference between “Ah! Yes! Please!” and “Ehhh, maybe someday.”

举个例子:一个旅行社网站销售豪华的海岛假期,可能希望您感到冒险,因此他们的视频可能会在柔和的灯光和轻松的色调下,在各个风景秀丽的海岛目的地之间缓慢过渡,让您感到当下确实就在那儿。 它可以使“啊! 是! 请!” 和“嗯,也许有一天。”

解释器视频 ( Explainer Videos)

Explainer videos (which are smaller/not full-screen) have been around since as far back as I can remember. Historically, they’ve converted very well and they’re usually set in the middle of the hero header, but other emerging trends (like card-based design) have allowed us to use video in smaller, more modest ways.

解释器视频(较小/不是全屏显示)早在我记忆中就已经存在。 从历史上看,它们的转换效果非常好,通常设置在英雄标题的中间,但是其他新兴趋势(例如基于卡的设计)使我们能够以更小,更适度的方式使用视频。

优秀的视频用户体验应包含_使用视频时如何提供出色的用户体验

Facebook videos are now set to autoplay but no sound will be appear unless you imply in some way that you’re watching the video, such as full-screening or interacting with the video.

Facebook视频现在设置为自动播放,但是除非您以某种方式暗示您正在观看视频(例如全屏播放或与视频互动),否则不会显示声音。

I adore this kind of non-invasive functionality and we’re now starting to see it in effect with card-based designs, meaning compact, user-friendly videos that can be combined with text alternatives to satisfy a wider crowd. And that’s a huge deal.

我非常喜欢这种非侵入性功能,现在我们开始看到它在基于卡的设计中有效,这意味着紧凑,用户友好的视频可以与其他替代文本结合使用,从而满足更多人群的需求。 那是很大的一笔。

优秀的视频用户体验应包含_使用视频时如何提供出色的用户体验

HubSpot’s multimedia card-based approach.

HubSpot的基于多媒体卡的方法。

Autoplay functionality helps those with motor disabilities to interact more easily with video media, but the overall reduced frame of the component means that we can sum up the video in text side-by-side, sort of like visual alt attribute. Video doesn’t have to be invasive anymore; it can heighten the experience without warding off users with simpler needs.

自动播放功能可以帮助行动不便的人更轻松地与视频媒体进行交互,但是组件整体框架的减少意味着我们可以以文本的方式并排地总结视频,就像视觉上的alt属性一样。 视频没有被侵袭了; 它可以提高体验,而又不会使用户遇到更简单的需求。

Multimedia websites allow catering for all types of users.

多媒体网站可满足所有类型的用户。

如何处理声音 ( How to Handle Sound)

Deaf users (like myself) are immediately turned off when they see video, much like the average user is when sound begins to blare through a quiet office (much to the dismay of irritated colleagues!). Sound control makes everybody happy, but auto-mute or text alternatives aren’t the only way to handle it…there’s subtitles too. But beware, you run the risk of users not knowing there’s subtitles and clicking the back button anyway.

聋哑用户(如我自己)在看到视频时会立即关闭,就像普通用户在安静的办公室里开始发出刺耳的声音一样(这让激怒的同事感到沮丧!)。 声音控制使每个人都很高兴,但是自动静音或替代文本并不是处理声音的唯一方法……也有字幕。 但是要当心,这会冒着用户不知道字幕并单击返回按钮的风险。

质量与性能 ( Quality vs. Performance)

Video is expensive. It costs a lot of megabytes, so only when the internet became faster over time did we begin to consider it as a viable type of media for the web. Sadly, internet speeds still have a lot of work to do (especially on low-bandwidth mobile devices), and this is where the inevitable question, “do we need to use video, or are we trying to be trendy”? needs to be asked.

视频很贵。 它花费了许多兆字节,因此,只有当互联网随着时间的推移变得更快时,我们才开始将其视为可行的网络媒体类型。 可悲的是,互联网速度仍然有很多工作要做(尤其是在低带宽移动设备上),而这正是不可避免的问题:“我们需要使用视频,还是我们要变得时髦”? 需要问。

If your website isn’t aimed at huge first-world markets, I wouldn’t consider using video components at all. A large statistic of the world still isn’t connected to the internet and many of those that only have access to slower connections.

如果您的网站不针对庞大的第一世界市场,那么我根本不会考虑使用视频组件。 仍然没有连接到互联网的大量统计数据,并且其中许多只能访问较慢的连接。

在哪里找到很棒的镜头 ( Where to Find Great Footage)

Stock video is actually quite easy to come by. Perhaps not as common as stock images, but that will change as we become more accepting of video. Pexels is the most well-known source of free stock videos, but I have to say that Adobe Stock trumps on quality.

股票视频实际上很容易获得。 也许不像普通图片那样普遍,但是随着我们越来越接受视频,这种情况将会改变。 Pexels免费股票视频的最著名来源,但是我不得不说Adobe Stock在质量上胜过一筹。

Here’s some other alternatives:

这是其他一些选择:

结论 ( Conclusion)

Because video is a type of media, it can only move forward as new web design trends appear on the scene. More trends equals more web components, which means new ways to implement the media. Video will surely advance further than this in 2016, but how? Leave your ideas in the comments below, I’m interested!

由于视频是一种媒体,因此只有在出现新的Web设计趋势时,视频才能向前发展。 趋势越多意味着Web组件越多,这意味着实现媒体的新方法。 视频在2016年肯定会比现在进一步发展,但效果如何? 将您的想法留在下面的评论中,我很感兴趣!

翻译自: https://www.sitepoint.com/how-to-offer-great-video-ux/

优秀的视频用户体验应包含