6

We have text descriptions of video content with corresponding links to the timeline. Is there a proper way to show such sections to the user, so one could see all the sections and navigate with them? Are there any examples?

The question is not technical, as we're not limited with implementation details. It's just about player mechanics, the UX. Does anyone know any good practices how chapters of the video could be shown? More, it should be possible to see them in both landscape and portrait.

UPD: more details of my issue

  1. The video is a recordered lecture, and the chapters are the corresponding topics covered by the lecturer. So you can interpret them as static bookmarks. Approximately 10 chapters for 90 min video.
  2. It's mobile product, designed for phones and tablets. While tablet size lets to show list of chapters in side menu, it becomes problematic for the phones (4.5" - 5.5"), especially for the portrait orientation.
  3. We want the user to see the content of lecture, navigate to the interesting part and to be aware of the new chapter beginning while watching.

I'm leaving some pictures here as existing examples of such behavior, that I m trying to make:

here the comments are marked on timeline here the comments are marked on timeline

here the whole list of chapters is hovered above the video here the whole list of chapters is hovered above the video

UPD2: about Udacity android app

Their implementation is straightforward - you have activity for the lesson topics list and another activity for video. One does not simply access the lesson description without closing the video, though one can switch chapters serially with next-prev. Switching activities and video takes time and results in non-smooth behavior. screen1 screen2

  • 1
    First, this question probably belongs over at stackoverflow.com since it's more technical in nature. Second, you need more details. What are you using to play the video content? Flash, HTML5, YouTube...? – Andrew Jun 10 '16 at 16:33
  • 1
    @Andrew, I'm updating the question in order not being misunderstood – Dmitry Gryazin Jun 13 '16 at 21:40
  • Good question, @Bagzerg Are you referring to sections in terms of the timeline of the video? – Swapnil Borkar Jun 14 '16 at 6:01
  • @Swapnil Borkar, yes, it's about timeline. Sections, chapters, i dunno which term is the most appropriate – Dmitry Gryazin Jun 16 '16 at 12:19
  • From the update in your answer, you could refer how Udacity divides the lecture content into "Nodes". They however, have separate videos for each node, you could cover it in the same video by setting a timeline for each one to the left. For example- udacity.com/course/developing-android-apps--ud853 – Swapnil Borkar Jun 16 '16 at 13:00
6
+50

IMHO, it depends on the origin (bookmarks by you, or comments by users?) and quantity of markers, as well as amount of text (within the markers) and length of video. Think about how these variables influence one another.

I see you already adopted soundcloud's pattern for comments on a timeline—which is beautiful—but it's clearly more appropriate for commenting or for breakpoints that can be added sort of freely:

hovering/tapping on a avatar shows the comment

If this is the case, perfect. If not, it might not be the best approach. It might be frustrating for the user to have to hover (IF they have a mouse) in order to identify the text that corresponds to what they're looking for.

So for navigating within the video, a table of contents format is surely favorable. User "hacks" on sites such as youtube shows how users use and favor a pattern:

enter image description here

Skillshare uses a sidebar, although in their case it's technically a playlist for different videos:

sidebar always visible with playlist of classes

So a table of contents pattern is probably the best, although some affordance may be needed to show the user where he's at. Also, the possibility to open/close the ToC may optimize screen space. A quick example:

enter image description here

Hope this helps!

UPDATE 1

I'll comment on your points:

• The video is a recordered lecture, and the chapters are the corresponding topics covered by the lecturer. So you can interpret them as static bookmarks. Approximately 10 chapters for 90 min video.

If the markers are chapters, IMHO it's safe to assume the user won't have a need to interact with them constantly. I think the chapters could be hidden behind a button that opens an overlay, like I suggested. The orientation of the screen for these chapters doesn't matter much, since they could be presented in front of everything else and adapt to the available viewport. You could, though, think about font size and subtitles to each chapter, to make it clearer to the user what they're (quite literally) jumping into.

• It's mobile product, designed for phones and tablets. While tablet size lets to show list of chapters in side menu, it becomes problematic for the phones (4.5" - 5.5"), especially for the portrait orientation.

• We want the user to see the content of lecture, navigate to the interesting part and to be aware of the new chapter beginning while watching.

This presents new problems and possible patterns. If it's a lecture video, then you could think of two main ways of interacting with content:

1) landscape mode: video fullscreen, so it's easier to read content inside the video; and

2) portrait mode: video occupies the top 1/3 of the screen (maybe fixed, if you need them to be able to read content and see the video), so user can look through content while watching. Think of how youtube app presents a miniature video fixed on the bottom right corner. Except in your case you would present it full width, in the top 1/3 of the screen. Tilting to landscape would make the video fullscreen without other content.

I think it's important to note that the "Table of Contents" might be secondary here. I think it should not be displayed at all times, as you already have too much content to show. I believe it's much more important, in your case, to solve the multitasking of watching video + reading content.

UPDATE 2

Yes, I see a few problems with udacity, that's why I chose not to mention them. Having to close the video to read description is something Youtube solved ages ago.

The implementation of prev/next buttons is interesting for you, although if you're scrolling withing the same video it might not make sense. In your case it might confuse the user as to whether the buttons advance within the video, to the next marker, or to the next video, in case a playlist exists.

Lastly, you're probably going to have the same issues with chapter switching: preloading. Unless you're willing to spend a lot of money with bandwith and allow every user to download a 90 minute+ video even if they only watch 2 minutes. And even if you do, you're depending on the users having a lot of bandwith to be able to jump to other chapters without interruption.

I'd argue that the preloading (and using youtube's DASH technology, if possible) is a smart and necessary compromise.

UPDATE 3

A side note. I just realized something: Google has already solved the in-video comments part. They're called Annotations. Although only the creator includes annotations on the video (in the case of youtube), it's probably better to put the annotations ON SCREEN than in the timeline, so that users don't accidentally click an annotation when they want to scroll, or vice-versa.

The model of annotations on the timeline, that Soundcloud uses, is probably adopted only because there's no more space to annotate in.

Speculating a bit more: if you're going to allow comments as annotations on the video, it's probably smart to limit the number per-user, allow the user to hide them and make them all a fixed size (such as 44x44 px), low maximum number of characters (maybe half a tweet?) and appear with a fixed-duration (such as 10 seconds). That way you diminish the impact of trolls. And no links.

Of course, if you have a low number of users and can invest a bit more, it's probably a good idea to moderate comments.

UPDATE 4

About comments in (journalism) websites, there's a lengthy discussion as to the usefulness of comments, and the effort involved in making the comments section a healthy and civilised space. Pedro Burgos has a very good intro on the topic:

https://medium.com/@burgos/goodbye-comments-hello-conversations-a64482caea4a#.ajoumpf64

  • 1
    Nice answer! Please, see the update in question, maybe you'll find something more to add. – Dmitry Gryazin Jun 16 '16 at 12:20
  • Thank you. Glad to help. I've updated my answer to address the points you explained. – Lucas Cerro Jun 16 '16 at 22:27
1

In terms of user experience it would be better to do a sidebar or similar as Lucas suggested, but there are ways of showing chapters on the timeline directly. (I apologize for the poor design quality in these mockups)

First you can start with chapter dots on the timeline to give the user some idea of where each chapter is.

Bar with chapter notes

Then the user is able to drag the timeline up to view the chapters.

Chapter numbers listed

And when the user drags over the chapter numbers, the title of the chapter is shown. A description of the chapter could also be added.

Chapter Title

This generally would allow for the chapters to be shown directly on the timeline but its not without its usability issues:

  • The user can only see one title at a time
  • Its not very intuitive
  • It takes up a lot of screen space

But there are some benefits to it too:

  • There is room for a description
  • Its integrated into the video timeline
  • You can provide a preview image for each chapter


Anyways I thought that an alternative view might be helpful. The other option is probably the better way to go (tried and true method), but if you feel like something a little offbeat would be helpful, you can try this design.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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