Content-Aware Kinetic Scrolling

Improving web page navigation on touchscreens with dynamic visual and physical feedback

Long documents are abundant on the web today, and are accessed in increasing numbers from touchscreen devices such as mobile phones and tablets. Navigating long documents with small screens can be challenging both physically and cognitively because they compel the user to scroll a great deal and to mentally filter for important content. To support navigation of long documents on touchscreen devices, we introduce content-aware kinetic scrolling, a novel scrolling technique that dynamically applies pseudo-haptic feedback in the form of friction around points of high interest within the page. This allows users to quickly find interesting content while exploring without further cluttering the limited visual space.


 
 
While scrolling on a long webpage on mobile and tablets, content-aware kinetic scrolling applies friction to important content so that it's more easily accessed and noticed. As the user scrolls on a touchscreen device, the scrolling speed decelerates around items with high degree of interest, as if a rubber band is pulling the item with force towards the center of the screen and the user’s line of vision.



Additional deceleration is applied after the user flicks the touch screen with a finger.



Quadratic deceleration model: content-aware kinetic scrolling adds a virtual hill that slows down the scroll head, whose deceleration is maximized at the peak of the hill.



 

Interactive Demo

Please open these pages from a touchscreen device.

Contact List

Discussion Forum

Blog Post

Social Wear

To model degrees of interest (DOI) for a variety of existing web pages, we introduce social wear, a method for capturing DOI based on social signals that indicate collective user interest. Our preliminary evaluation shows that users pay attention to items with kinetic scrolling feedback during search, recognition, and skimming tasks.
 


Example web pages with social wear applied:








People

Publications

How can I try it out on my webpage?

CAKS will be released as an open source Javascript library. You can simply embed the library and specify your DOI definition in the document.
The Github repository and documentation will be posted here soon.