Using videos in a personal web-site, how good of an UX is that?

Question

I've had this idea for my personal web-site that I'm really wondering what the experts of UX and design feel here think about

I really enjoy the high-end web-sites that have a video playing on the background, it makes me feel like things are in motion, it's more engaging, fun, and just looks really cool in my opinion, and I was thinking of going a step further

Right now I have a video that looks like this and I've put that onto a background of my site, with my face/body on one side, full name in the center, a catchy tagline under, and an "Enter >" button, to keep it very minimal. It looks like this so far

Now bear with me, I know it doesn't look great, but it's a concept for now

What I wanted to do next is:

• Replace my picture with a full video without a background of me looking into the floor and slowly raising my head up and smiling to the visitor, and freezing the frame on that smile
• Once a user clicks "Enter >", I want to do a 2 step transition:
  • First, continue the freeze frame of my face by tilting my head back or something to invite the user to come in (which would take like 1s video on top)
  • After the previous video with head tilt - do a transition on the video in the background smoothly into a new video, which would have more links like "Career", "Hobbies", "Personal life", "Contact", etc. Which could look something like this

So finally that I've given you a bit of context and what I've put together so far, I have 2 important questions to you:

1. What does UX and design feel tells about something like that? I was thinking of building a Single Page Application and have really smooth transitions between each of these (which might be very tricky technically and with responsiveness, but I want to investigate that further only after I understand that this might indeed be very engaging, dynamic, charming, and personal)
2. What is your own personal feeling after everything you're read and seen so far? Do you feel intrigued and curious, or you feel ashamed and cringing?

Thank you so much for reading this far and for any thoughts you can give me, I greatly appreciate any feedback

Answer 1

I've been a UX designer for 12 years or so, and I can tell you that it depends on the execution and what it is that you want the site to accomplish.

Ultimately, think about what you want people to do when they go to your site, and what information and feelings you want them to take away. Make sure that everything on your site serves that purpose.

It's tricky to have video, as a lot of things can go wrong, but it can be done well and it can enhance the experience.

I like the way you are writing about this; your attention to smooth transitions and your breaking it into steps indicates that you are thinking about the user's flow through the page. That's exactly how you want to approach it, so keep up that way of thinking.

Some things to consider:

1. Not everyone has fast Internet and a speedy processor all the time. For these people, video files can load reeealllly slowly and, as a result, they may get impatient and leave before they can experience your site.

2. Remember that about 1/3 of all Americans have a significant visual disability (not sure about the stats for other countries, but they may be similarly high.) Certain visual and cognitive disabilities can get in the way of people using a site that relies on video. For example, people with vestibular issues may not be able to use a site with a lot of animation without getting a migraine. It's usually good to limit the animation (make it more subtle and use it only at key points), and make it easy to turn off the video (e.g. an off button that's easy to spot.) Also, keep contrast high and make things easy to read. And obviously, don't cause seizures with your video--seizures are definitely a bad user experience!

3. Make sure that the animation does not obscure or otherwise make it difficult to get to the content that you want users to see. This is why we don't see too many splash pages anymore--most people are usually busy and will rarely sit and watch animations; to them, an extra page is an impediment to getting the task done--even if it has a fantastic animation or beautiful imagery. Ask yourself, Does this video:

• make it take longer to complete a task on the site?
• make the text harder to read?
• make the important calls to action and content harder to find?
• detract attention from the main tasks... or help point the eye toward the main tasks?

4. If you have text on top of the video (as you do in the link), make sure there is significant color contrast between the text and the video throughout the video's duration; otherwise people will not see the text! (If the video doesn't lend itself well to this, a low-opacity black or white layer between the video and text often helps)

To answer question #2, my personal opinion is that it sounds intriguing and has the potential to be a fun and unique interaction. That said, it all depends on how it's executed. It's the kind of thing that could also go wrong and be cringeworthy--if it's too overt or takes attention away from what you want the user to do on your site.

That said, if you are a model, actor, or other performer, then you would WANT your animated image to be the center of attention, as that's the product you are featuring as part of your business. In that case, you want to make sure that it looks really good and is natural so that visitors get a sense of who you are and how you move.

If you are not selling your looks or your performing skills and are featuring some other skillset (like your poetry, programming skills, photography, or something like that), be sure to use it as a supporting structure; use it to direct attention to the places you want users to look, then make sure it moves out of the way when users need to focus on a task.

Answer 2

I, personally, tend to disagree to:

I really enjoy the high-end web-sites that have a video playing on the background, it makes me feel like things are in motion, it's more engaging, fun, and just looks really cool in my opinion, and I was thinking of going a step further

completely on occasion.

If there's more textual information on the page like on the eventual '"Career", "Hobbies", "Personal life", "Contact", etc.' pages I find it distracting if there's something moving in the background (or at any border for that matter; that's why we use blockers against wildly flashing ads, don't we?).

If it is just the starting or the next menu page with just a few menus/buttons to select it's OK, even for a progressive-conservative old geezer which I am. ;)

UPDATE

It's quite a style break when using a particle stream in space (BTW, looking great, I love astronomy :) and then simple flat Choose success and Enter >. (I'd also change the latter to a more inviting Come in ...) The First Last with its black outline is not that bad since it gives a bit of a 3D effect and that's what I'd intensify: Using a 3D font with the imagination that the words float in space.

I also like that the real source of the particle stream isn't visible but just a shine/corona of it. That arouses curiosity for more. However, I'm not sure whether this animation wouldn't look even better without the transparent areas of circle (are they meant to be lens flare effects?). With these it looks a bit artificial since there are no transparent (natural) disks in space while particles are of course.