videos <-> exercises

Last modified: 21 July 2011

The proposal for First Class Exercises introduces the idea that related videos should be accessible from exercise pages and vice versa. The idea is to expose more functionality to visitors and users who might otherwise miss these features or not know that they are immediately related. 

Presently, visitors may think of the site as two separate, but not explicitly linked portions: videos and exercises. The goal of this proposal is to suggest ideas and possible techniques for collapsing the space between the two. Hopefully, this will allow folks to engage with supplementary material they might otherwise miss.

Existing Strategies

At present, a video, if it has an exercise associated with it, has an "Exercises" button placed underneath the video adjacent to the other controls: subtitles, video energy points, download, share.
exercise link via video page

Additionally, if you show up at an exercise, you can see which videos are associated right underneath the title 
video links from exercises
in addition, a list of videos with energy counts shows up in the bottom right, near the answers and right above the hint.

The goal

The goal here is to 
  • reduce the effort needed to access exercises from a given video page 
  • reduce effort needed to review videos while working on exercises (vice versa) as this will.... 
  • get more people using the exercises and will also....
  • allow people to review videos while completing the exercises.


making video/exercise links more prominent

This is partially what First Class Exercises is suggesting (the page suggests this, but slightly more in depth although that proposal also suggests creating a separate playlist for exercises that lives alongside the regular exercise playlist)
  • Make it apparent on the front page that for a given video there are also exercises associated with it.
It may be confusing to have the markers on the left, people may confuse them for bullets and possibly, bullets whose immediate meaning is opaque. 
Even with the markers after the text, i.e.
it may be equally confusing. I'm not sure if this is an alignment issue or just a personal preference, but i think in this case, the empty box probably signals: "there's an exercise here" versus a video without a grey ? box. additionally, there's the issue that the icons are small. In the case that this is a separate playlist for exercises only, then presumably this is not an issue, but icons might just be problematic in this case.

the other thing is that this always implies a fork in the road: do you click the video or do you click the exercise?. It's not clear that by clicking on a video link that you'll be able to access the lecture or vice versa, that is, i don't know that either provides a good spatial model for going between corresponding exercise/videos.

placing a video carousel underneath the exercise area

It'd be relatively easy to place a video carousel underneath the exercise area for all the associated exercises, since this information is already well known (i.e. it shows up in the sidebar) and near the title of the exercise.

here there's probably more incentive (i assume) but only because you've got the actual poster frames rather than the idea of a lecture. We could append the text to be explicit about what happens when you click the poster image, like so:
Popping the video out of the page is certainly a nice idea, but it also be impractical because it requires you to have a somewhat large screen display for the two things to happen at the same time. This is because the website is itself a minimum of 1000px and the video player, for anything to be remotely legible, is probably ~400px wide, which is larger than a macbook laptop screen (not to mention some older computer that is likely using this). 

Still, the option could be useful as it doesn't disrupt the scratch pad or any of the other features on the page

an aside on context switching
i'm not sure what the numbers are like, i need to look at the google analytics figures, but my feeling is that it's not 100% obvious that this happens

go to exercise -> do 6 correct, get stumped on 7th -> clicking on a video link -> watch video, maybe skim it -> click exercises link beneath video -> you return you to your unsolved 7th problem

i think it's more likely that even if the user trusts that clicking on the video won't reset the streak, the user may not be entirely sure that when they return, the same problem will be waiting for them (however, seasoned vets will probably know this to be the case if they accidentally closed their window and returned to have everything the same)

still, this strikes me as potentially problematic for users and my gut feeling is that maybe a bunch of people don't click on the review videos because they're not exactly sure what happens when they go down that path.

making the exercise area a combined exercise/video page

The idea is to include a small video player within the exercise page. There are lots of ways we could potentially make this happen, here's an example: 
this layout makes several assumptions about the exercise, namely that it can fit in such a width. Most can, but there are a few of the angle exercises that make use of all the space allotted them.

If the video player were offset a bit more, this effectively becomes an app layout ala Adobe Lightroom, which has the main content sandwiched between two context-dependent panels. I'm not entirely convinced that this is the right thing to do, but it's a step in the right direction, namely, the ui here is basically saying: "hey, check out this video, you can watch it and nothing will change" because the idea of an embedded youtube video is, to my mind, a well-understood mechanism which doesn't change any of the properties of the page you're on.

allowing the video player to toggle between video and exercise

This is sort of different as it involves creating a separate container for the exercises and the videos, but this container would have knowledge of both and would let you toggle between video and exercise at the drop of a hat. I didn't actually make this happen in photoshop as it would probably take a while to mock this up there, but i doodled it and here it goes:
so, this is potentially a bit much at the moment (maybe the folder tabs are a bit on the literal side), but it also combines the exercises right into the video and you can know as you're watching a video if there are exercises available (due to the presence of a tab or not). the slide out sheets for solutions and hints are also sort of excessive, but they leverage the fact that this widget could take up a fair width, but also still have some room on the side to spare. Still, because the folder is itself quite large, we could probably place the solutions in the folder itself or even reconsider how they're arranged with respect to the assignment/exercise.

Because exercises also earn badges, we can place those over the tab if we wanted so that each 'dossier' (too much?) is branded with your past achievements. This is perhaps too literal a metaphor to build out, but i think the mechanism of providing an easy-to-toggle exercise-video is sort of nice and, to my mind, is also possibly more likely to get used.

i'm all ears,, if you have any feedback on this first draft of video/exercise integration.