1

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

2 Answers 2

2

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?
  1. 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.

6
  • 1
    Thank you so much for reading through my post and your very thorough experience and thoughts around both user experience and your personal take on the approach, I really appreciate you taking your time and doing it! To give a little bit more of a context: 1) I am 100% focused on what feeling people with get from it, and I want to do a few user testings even with it to just ask random people to describe what they saw and how it made them feel. Translating what I want into the feeling right is important to me and I want to improve that with tests
    – Arno
    Mar 4, 2023 at 18:08
  • 1
    2) The speed is a very good point, as well as visual impairment. I will have to think about how to approach that. I do believe that people in Europe, which would visit my site more, should have a good internet connection overall, so I'm willing to take that risk, but I do want to explore now a way to make sure of that, and have a "backup" ready in case the internet connection is not so good, and maybe serve a gif or a static image instead, thank you for bringing that up! 3) I want to make transitions pretty sharp, so not to detract, but also keep it very presentable still
    – Arno
    Mar 4, 2023 at 18:11
  • 1
    I think getting feedback from some users might help see if they're enjoying the experience I want them to, or they feel like it's unnecessary, and then see how can I improve that experience with a better imagery/visuals, or just cutting down on transitions 3) The point about the text being visible is spot on. I will think of how to do that with either making the video darker, or have a darker background on the text to make it visible, thank you! I'm really glad the overall idea seems intriguing to you, I'll take that as a good first start, and then try and see if I can make it engaging!
    – Arno
    Mar 4, 2023 at 18:12
  • 1
    Last, but not least - I am no way a performer or an actor. I work in IT, but the whole idea I had with this site is: - I want a personal brand and a personal card I can show to people at any time, and make it look both professional, but also extremely charming, sharp, fun, and high-quality - I want an addition to my resume for potential jobs, but also be more entrepreneurial vibe, which would showcase my portfolio and passion - I also want it for personal stuff, to show my life and myself more. Not too much, but just who I am and what I believe
    – Arno
    Mar 4, 2023 at 18:16
  • 1
    One example I had in mind is my career. Right now it's great to have LinkedIn and a CV, but I feel like I want to guide a user through my journey. I want them to go on a page with my Career, and I want to make it super intractable and engaging. I can start small and improve, but for example, imagine you have all my jobs as an expandable list. Want a short summary? Click here. Want a longer version? Click here. Want a story and some pictures? Click here It might not be perfect, but I want to take visitors or recruiters or people on a fun journey of my life through my creativeness
    – Arno
    Mar 4, 2023 at 18:19
1

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.

16
  • 1
    I see, thank you so much for sharing your experience and thoughts. Good point with the menu where it can be distracting, then maybe it's better to transition from video into a static page with text not to be distracted by the background. Or at least not too much :D
    – Arno
    Mar 4, 2023 at 20:14
  • 1
    @Arno See the update to my answer. Mar 4, 2023 at 21:33
  • 1
    @Arno I thought about the Come in ... popping up, too. First idea was a growing wormhole forming out of the void and the text coming out of it. Second idea was the text to start as a tiny dot in the far distance and moving to final size towards the visitor. Third idea, right in the moment of writing this: a combination of both. Mar 5, 2023 at 18:17
  • 2
    I agree with Gerold that video playing in the background is very often distracting and can detract from the experience. I know a lot of people who are averse to it entirely.
    – sandstack
    Mar 5, 2023 at 22:14
  • 2
    ...That said, there are significant counterexamples where video is placed in a subtle, impactful way & actually focuses the experience. It sounds like video is something you're excited about doing and that you've got an idea that celebrates who you are in an unique way, so I challenge you to do it in a way that focuses the experience & brings some whimsy & joy. And if you fail? Fine! Fail forward & keep on learning-it's the way to success!
    – sandstack
    Mar 5, 2023 at 22:23

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.