Abstract. Small screen sizes and limited interaction possibilities appear to be the main challenges when developing video browsing interfaces for mobile devices, such as smartphones and PDAs. In this demo, we present several pen-based designs for interactive video browsing on a PDA. Each implementation enables users to skim a video along the timeline at different speeds and granularity levels. Using the whole touch-sensitive screen as input area, different pen movements are mapped to different browsing behaviors, offering more functionality and creating a better user experience.

W. Hürst (Utrecht University, contact)
K. Meier and G. Götz (University of Freiburg)

Proceeding of the 16th ACM international conference on Multimedia, pp. 993-994, published 2008, ISBN:978-1-60558-303-7 [Download PDF]

Comments on the video: Your speakers are not broken. This video is silent, so you can enjoy the full beauty of the images ;) It shows four interface designs for timeline-based navigation in a video at different granularity levels. Here are some comments on what you can see:
  • MobileZoomSlider. This approach features timelines with different resolutions that depend on the vertical position of the pen. First, the regular slider is used, illustrating the jerky feedback which appears because not all frames from the long video can be mapped onto a position on the slider. Then, the virtual timeline at the bottom of the screen is used which has a similar resolution as the original slider and thus results in a comparable browsing behavior and user experience. Finally, a virtual timeline at the top of the screen is used, featuring a much higher resolution and thus realizing a finer navigation.
  • ScrollWheel. In this approach, the timeline is mapped onto a circle (cf. an analog watch). In the video, it can be seen how scrolling speed differs if the radius of the circles made by the user change because of the different granularities of the circles.
  • ElasticSlider. This technique uses the rubber band metaphor known from elastic interfaces. A larger distance between thumb and pen results in a higher tension on the rubber band and thus a faster navigation. At the end of the scene, thumb and pen are kept very close to each other, resulting in a low tension and thus, slow navigation which even allows you to access individual frames.
  • iPhone-style flicking. In this final approach, first, the pen is flicked over the screen. The resulting scrolling speed slowly decreases as soon as the user stops flicking. In contrast to this dynamic behavior, the end of the clip illustrates how the user moves the pen over the screen without flicking it, resulting in a navigation which is similar to a timeline-based slider. This second kind of interaction is particularly useful for fine adjustments, e.g. to access an individual frame.

For further info about our work on mobile video browsing, please refer to the mobile video browsing research page.