Video

So let's talk about video. Video is also super important. I mean, there are a lot of videos out there. Here's an example that I like to show. This is Bill Potts, the 10th, no, not the 10th, the 12th Doctor's companion entering the TARDIS. And it's a little video play, press play.

Thank you.

What a great scene.

Yeah, so you have this reveal and you can see that for videos, of course, you have more options.

You have the skipping around part, but you also have a couple of other things in here.

This is new. Get embed code. So if you want to embed it on an external page,

you can open it in picture-in-picture mode. Again, playback speeds. And you have subtitles

in this case. So I can switch those on. Now I have. And then if I go back. And, you know,

and full screen. So you have all these different options as well. And this is standard video player,

like you know it from YouTube, but it's always good to have like that mode of reference.

And so there's a lot of technical accessibility in here that you need to look at, like the keyboard

navigation stuff, but there's also something that I think is important. And that is going

beyond the technicalities and looking at how the interaction should be in the grand scheme of

things. And there is this really nice use case of the BBC iPlayer that is relatively old. It's now,

it's from 2015, so it's seven years old, but it has a lot of good information on how to design

a video experience. So for example, they operated under those four UX principles

to give users choice, put them in control, design with familiarity in mind, and prioritize features

that add value. Now, the previous screen was the old interface. And what you had was TV and radio

here at the top. And then you had featured content, most popular and an A to Z of the program and then

categories and the channels were on the bottom left here. And the interesting thing was that

they didn't really look at this when they started from a user perspective. They just put online how

it came. And now they redeveloped this according to these principles. And some features that added

values are things like giving users on the top like direct access to their program to BBC One or

BBC Two, because people like that. Also categories here, and including in those categories, putting

audio described and signed sign language as categories. So this is super useful

for people who need that kind of content.

Here in the teaser, same thing, looking at like what is really important for people,

and there are audio descriptions and sign language icons in there as well. Just making sure that it's

easy to find, easy to know what's going on here also to turn on and off sign language and audio

description. So you get these accessibility features as part of the redesign as like a cohesive

information here. Yeah, and that meant like putting primary information at the top,

adding better search, which is also an accessibility feature. We don't talk about

that too often. And then also managing keyboard access. There is this article,

Accessibility originates with UX from Henny Swann, which is excellent. I really, really

recommend reading that. It's a good case study on how to like, bring video content, make it so that

that if you're, especially if you're a video first company like the BBC is, that you can bring

that type of content into the web and make sure that your users needs are really prioritized.

And of course, for we had the audio element for audio stuff, the video element, you want to use

that for videos, because that's really straightforward. And of

course, you have ways to embed stuff from let's say YouTube or

other hosting platforms, but they use the video element and

it has a lot of advantages. So first, it has a lot of these,

like very simple to use functionality, like autoplay

"Controls", "Loop", "Muted" and "Poster". So if you need to show an image while the file is downloading

or before play is pressed, you can just specify the image inside of the poster. If something needs

to loop, like in an animated GIF, you can specify the "Loop" attribute. If something, if you want to

to display the controls, you just add the controls attribute and you're set. You don't need to

do that yourself and in most browsers these are actually accessible. So you can make sure that

you don't need to do anything. So, you know, just specify controls and you're good to go.