I'm putting together a catalogue page for eight 3-minute video tutorials explaining how to assemble electronic components (if relevant, here is an example video). The context is a robotics competition for high school students that I help organize.

We feel that having all the videos embedded on one page will allow students to reach the desired information in the fewest number of clicks from the home page (2):


download bmml source – Wireframes created with Balsamiq Mockups

I prefer this to having them click the text-only title to find their video embedded into a single page (but the performance impact for the client of loading eight iframes at once irks me).

Aside from the performance issue, is there any reason not to do this from an IA or UX standpoint?

5 Answers 5


You should consider a unified video player that would allow you to select different videos and load them on the same page (something like http://www.heydayfootwear.com/videos/ or the screenshot below) or jumps to a certain part of a single video (as @alexeypegov mentioned).

Unified Player Screenshot

  • An advantage to note of the above player, is that videos can still be browsed while watching one.

Also, I would recommend using a list type of format (maybe like YouTube search results) though for the video thumbnails and descriptions. That would allow you to describe videos in more depth without having to go to a separate page. It should also work well for the number of videos you mentioned (8).

List Screenshot

  • It is worth noting, that using a list below the video player has some advantages (more flexibility for expansion) as well.
  • You could have an infinitely scrolling list that automatically loads the next X available videos in the list.
  • Or, you could have tabs for categories. If you have a lot of categories, you could have list of categories to filter down to in a sidebar.
  • Very nice idea!
    – msanford
    Commented Nov 7, 2012 at 20:48
  • These can work well if there's no textual accompaniment to the videos (I was imagining something more with a text blurb, then video/images, then text...)
    – Ben Brocka
    Commented Nov 7, 2012 at 21:11
  • @msanford - Thanks! I've seen it around the web a lot and it is a useful pattern. Commented Nov 9, 2012 at 5:48
  • @BenBrocka In fact, there is no text at all. Our videos are generally made à la mime - hands manipulating and assembling devices close up. To cover translation (because we have English and French students) we re-dub the audio.
    – msanford
    Commented Nov 9, 2012 at 15:47

Efficiency-wise you're correct; showing them all on one page would be preferable; it allows a single click to go to each video and no fumbling around to find which video was which should I leave the page and come back later. They can be scrolled through to see all items with minimal effort.

Performance is a valid concern, but if you test I don't think it will be as bad as you might suspect. The simple solution to the performance problem is to load the videos on demand, only loading them when clicked. The good thing is Youtube (and potentially other video services) have done this for you; droping a youtube embeded video doesn't load the actual video until you click on it, so the user doesn't download all 8 videos on page load. There will be a minor performance hit on the one pageload, but it's negligible compared to the time navigating multiple pages would take (not to mention you still have to load the pages, and all the annoyance of clicking).

Don't forget that slow interactions are just as bad as slow performance. If you're forcing the user to be slow instead of the system, that's at least as bad, if not worse. Anecdotally, I'm much more annoyed at sites that are slow to use (long useless animations, intros, delayed response) compared to sites that are simply slow to load.

Finally, remember to test the actual page load time...I suspect it won't be quite as bad as you think. And don't just load all the videos at once either, play the first, then the second, etc, just like a normal user would. I really doubt you'll see a performance hit so bad it's worth making the interaction painful.

  • 2
    +1 for slow interactions are just as bad as slow performance!
    – msanford
    Commented Nov 7, 2012 at 20:19
  • Great insight. Totally going to use that quote! Commented Nov 9, 2012 at 5:48

Another solution I suggest is to use YouTube ability to start playing from the specific time and join all the videos into one movie and let students choose the interesting part from the list (i.e. Introduction at the beginning, Part I at the 4:05, Part II at 9:01, etc).

  • 1
    I feel (I know, not a strong argument ;)) that the more atomic nature of having very small, specific topics covered in an easily-loopable way (hit replay over and over) seems more useful to me than joining them. We sort of already did that, anyway, with playlists.
    – msanford
    Commented Nov 7, 2012 at 20:27
  • 1
    It of course depends on content of the video, so it up to you, but joining will also make it possible to watch the full movie with just one click (and repeat are still possible by choosing the same section again). Commented Nov 7, 2012 at 20:31

Similar to what's mentioned above, a list of videos to select from and only a single video box as illustrated here:


That's not my code, but it seems well done, the load time is good and it's generously licensed. It's also a good idea to group your videos into channels so it makes more sense to anyone who happens to find it directly on youtube (of course in the youtube text comments put a link to your site).

  • This probably could have been left as a comment, but +1 for providing a practical example. :-) Commented Nov 9, 2012 at 5:51

It is not convenient to view video, which is placed with other on one page, because there is a visual noise and distraction, and easy to loose necessary videos because of rather "noisy" nature of video players.

The way on Apple's iWork tutorials seems to be one of the most convenient (in your case the left column with list of tutorial titles, the right content area with the player) — this will allow to see only current video without any visual distractions, and simple and evident navigation.

If all these videos are embedded on one page and switched without page reload, it could be done very seamlessly.

Also by making any checkmarks in the list for already viewed videos will help the visitor to identify, what he have seen and what not — it is rather hard to achieve in "eight videos on one page" view (noisy and heavy accent nature of video players and also because there it would be necessary to scroll and identify every video step by step).

So, it is better to use such pattern:


download bmml source – Wireframes created with Balsamiq Mockups

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.