User Experience Stack Exchange is a question and answer site for user experience researchers and experts. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

I'm looking for some help with my training video user experience.

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) --working is mobile and email buttons--

share|improve this question
Currently I have decided to move in the direction of placing the menu where the videos are - I don't have them styled. One of the menu options that works is contacts. It hides the video playing, and shows the menu. once clicked on in the menu, it hides the menu then shows the video. If they don't have javascript enabled I guess I'm sol? – Nicholas Decker Aug 8 '12 at 18:12
up vote 0 down vote accepted

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.

share|improve this answer
I am going to implement these ideas over the next few days. Thank you very much. – Nicholas Decker Aug 10 '12 at 13:14
I have made some changes and have something that is working and fluid: Thank you for the advice. I am going to do some added details, but do you think this is a good direction? – Nicholas Decker Sep 6 '12 at 14:56

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

enter image description here

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:

enter image description here

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.

enter image description here

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:

enter image description here

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.

share|improve this answer
I appreciate this. I will look into the embedding w/o iframe. Not sure why it matters, but okay. Unfortunatly I'm stuck with the idea of these circles. It is consistent with the marketing. I will move for something cleaner like this in the future though. I have learned a great deal on this. Thank you. – Nicholas Decker Aug 10 '12 at 13:13
I don't have enough rep to vote up your answer. I will come back to this when I do. Thank you again. – Nicholas Decker Aug 10 '12 at 13:15
Also - I was thinking about losing the whole top part to have more showing... Because it is the help area, I don't believe above the fold matters that much... but I do see what you mean. – Nicholas Decker Aug 10 '12 at 13:17
I think you were right about the roundness. I totally lost it. This is a move in the right direction. Any other feelings? – Nicholas Decker Sep 6 '12 at 14:57
@NicholasDecker: empty space next to the menu with no clue wether something is still loading or missing or something along, have to scroll up to actually watch the video: As an advice, a few keyscreens (stillshots of imaginary usage) and make that work as a comic. – Aadaam Sep 6 '12 at 16:23

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

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