Training Video Section of website

Question

I'm looking for some help with my training video user experience. http://advantageanywhere.com/advantageUniversity.html

I'm currently working on a training area where the new users of our sales/marketing software will head to after registering.

The circles are taken from marketing pieces of the software that the subscriber would recognize. It is a way to keep the training pieces separated into the different categories of what the subscriber would be trying to accomplish.

Currently I have some jquery that changes the video in the center by changing the source of the iframe to the youtube video that coincides with the video. Certain categories will require multiple videos.

1) Do I handle these videos through the iframe and make a sub menu in there

2) Do I make a hover or click to bring up a sub menu that floats over the area and allows the user to choose from the different options.

Note: the mobile version will be dealt with differently, when it is needed. At this time we haven't had any hits on our training pages from our other software pieces (more niche products)

http://advantageanywhere.com/advantageUniversity.html --working is mobile and email buttons--

Answer 1

Submenus should generally be located as closely to the main menu item as possible to make this relationship clear. As you currently have it, with the submenu replacing the video, it is not obvious which category those videos belong to. An larger issue is that while the video is playing you can not tell what category it belongs to.

I would recommend moving the submenus next to the circles, keeping them open when a video is playing and highlighting both the category circle and the currently-playing video. You could also add a title above the video to provide an additional cue and perhaps surround it in a border to match the category circle colour.

Answer 2

This is what I see of your site when looking at it first:

I know that above-the-fold is overrated but perhaps that's a bit too much. And because of the circle, I can't see all my navigation options on the screen, no matter how I scroll. I guess it's a pretty poor navigation when I can see only about 70% of the choices at any given time.

Then, if you didn't tell me, that there's a submenu, I'd have thought that this is actually placeholder content:

It bears no resemblance to the main navigation. A bit further up, there's actually plain, unclickable bodytext written with this font.

Also, how much space is actually given to the navigation aspects versus the content? I mean, no, you shouldn't cramp all the things into a small space, but compared to the radius of the circle, the video looks tiny to me, especially if I take that into consideration, that it's a screencast, showing a user interface.

Personally, I'd give up the circle thing. Colors are fine.

I know this is boring but at least it doesn't take up half the screen.

And suddenly, the 'where to place the submenu' question is also easier.

Or, of course, you could try to do a small circle around one circle of the big one, like a flower:

But that's still ugly.

You have to provide repetition, not a copy...

BTW, youtube videos can be embedded easily without an iframe. Google for jquery youtube to find a few solutions.