Nailing the Layout

Cloud-based, HTML5 video player means employees and external audiences can access content everywhere, from any device. I spent hours with our Front-End developer developing a grid system so that the video player would be responsive, and that any time-sensitive interactives or video would be immediately in view when a page loaded. I developed a 3-level hierarchy:

1. Video and Interactives timed to the video - The video player and any interactives that are timed with the video, such as Slides, Polls, Checkpoints, and Q&A would always appear within the video player frame. This gave the producer complete control over what people are paying attention to, and when.

2. Chat and Interactives with a persistent history - While chat may be something a person uses throughout a video, it is not always necessary for a user to pay constant attention to the chat thread. When a producer enabled live chat, it would be to the right of the player, or collapsed, so that users could focus on the video.

3. Metadata and resources associated with the video - Things like the video title, description, and links to download additional resources lived below the player, however the video title would always be in view when the page was loaded. For this, our developer created a rule where the video player could be no larger than 80% of the height of the page.

Improving User Experience

One benefit that came with this re-write was that our new framework allowed us to manipulate the DOM without reloading the page. A huge frustration of our users in the past was knowing which interactives were accessible when. For example, if there were going to be polls during an event, the poll button always displayed. When a user clicked on it, the interface showed “there are no active polls at this time”, causing the user to have to exit out of that dialog. All the while, the video was obscured. We solved this issue for the user by:

1. Only showing an interactive’s icon over the player while the interactive was running

2. Automatically showing poll questions and poll results on producer’s cue

3. Making interactives just transparent enough to show the video playing behind, while still maintaining legibility within the dialogue

4. Allowing the user to dismiss poll question and poll results if they did not want to participate or were done viewing

Adapting for mobile

Scrolling containers within scrolling containers are a big mobile UX failure. For example, Sherpa’s live video chat feature. On a big screen, the chat dialog lives beside the player, so users can chat and watch video at the same time without needing to scroll up or down the page. But on a small screen, like a tablet or phone, you run out of space. Where do you put it? The Twitter bootstrap 3 solution to this is just putting the chat below the player. The issue is, when a user tries to scroll below chat by swiping up, they end up getting caught in the chat window, rather than scrolling down the page. Instead, I designed a collapsed chat UI, that could be tucked away when not in use. On a mobile device, you can see notifications for new chat messages & expand and collapse the messenger. This allows the user to scroll down the page, but still pay attention to chat when it’s important.