8 short tutorial videos: all embedded in one page vs separate pages with title link?

Question

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?

Answer 1

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).

• 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).

• 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.

Answer 2

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.

Answer 3

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).

Answer 4

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

http://jsfiddle.net/NmvA9/490/

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).

Answer 5

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}