Having a really hard time figuring out how to communicate features of my web application.

The idea I had was for the user to be able to click on a "feature" and then an animation or video would do a quick 5-10 second demo of the feature.

You can see my attempts to do this using CSS animations of a screen shot, but this solution is not ideal:

Ideally, I'd be able to seamlessly display a quick 10 second video of the feature inside a pane when the user clicks on one of the features.

I'm trying to avoid complex video players because the take a bit of time to load and display a bunch of controls (like pause, full screen, etc...) that would be distracting in this case. However this is a strong 'want' not a 'must have'.

Just in case this is not obvious: I posted this in UX.Stackexchange because there a bunch of ways to easily embed a video, but my concern is to do it in the best way in this use case to maximize the user's experience. As a user, many times when video is embedded in a web page for this type of use case, the details of how it is done annoy and stress me out.

Are there any precedents or best practices for this use case?


I think there's something to be said for splitting up the video and the 4 separate feature listings. Since you already seem to be adopting a SPA layout, users won't mind a bit of extra scrolling, and in general the less dense your organization, the better. That will allow you to give each the importance that it deserves.

Additionally, I'd recommend autoplaying each video as the user scrolls to it - don't make them work to see your product. Do it Facebook style, where a scroll away signifies your dismissal of the video.

  • Thanks so much for your help! What method do people usually use to auto-play? There's a bunch of different players and a bunch of different video formats, I have no idea what would be the appropriate implementation in this scenario? Feb 24 '16 at 23:54
  • @ChrisDutrow It's pretty simple JS. You can just register an event when the window scrolls, and if the position of the video relative to the page at that point is above the bottom of the window, $("video").get(0).play(). If you need help I'd head over to Stack Overflow
    – Jack Guy
    Feb 25 '16 at 0:42

If CSS is not doing the animations you want to do, I suggest you use a JavaScript animation tool. Could be one like Tumult Hype that gives you an animation design environment, or a tool that just converts the videos you have into JavaScript animations. There used to be one called Phosphor but it has been discontinued.

If you use GIF you lose quality and they require a ton of CPU/battery to play. And you still haven’t really solved the problem where you are envisioning sophisticated animations and can’t execute them. CSS animation is great but it has its limits and when you hit them, the next step up is JavaScript animations.


I suggest GIF animations of each feature. You could have them pop up or just start playing whenever the user triggers whatever event you think makes it look better (be it scroll, click, mouse over, etc). No controls, lightweight, and (I believe) universal support. As a bonus, it'd be a snap to get it working on mobile Web (currently it's kind of clunky viewing the page in Safari on iOS).

As an aside, there's a high pitched humming sound playing in the background of your video which makes it hard to watch. I'd suggest either narration, music, or squashing out the sound altogether.

  • Using GIFs might work, do you know of a video to gif converter? Feb 25 '16 at 3:02
  • I haven't used it, but ezgif.com/video-to-gif looks decent. I guess there's many services you could use for this, seems like a pretty frequent use case. Feb 25 '16 at 5:01

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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