Invention: Introducing The “Content Aware Scrollbar” UI

This new scrollbar design I made last week shows the user where content like videos, image galleries, customer ratings, and comments begin and end on a page and lets the user skip directly to that content without scrolling around and searching for it. It also lets users know what kind of content a page has so they’re more likely to stay.

It’s pretty self explanatory. But here’s an in dept explination of how it works and why it’s better.

  • Many websites have lots of different types of content all on one page. Blogs for example have an article that takes up maybe 1-2 pages, embedded videos that take up half a page, image gallery thumbnails take up another half page, and comments take up 12 pages.
  • Lets say you want to scroll directly to the videos. You don’t know where they start and end so you have to scroll around and search for them.
  • With my new scrollbar, the track of the scroll bar is no longer just one grey strip. It’s separated into different sections representing the different types of content on the page.
  • The top of each section has an icon at the top that lets the user know what type of content is in that section.
  • The sections are proportional to the content on the page. If there are a lot of comments, then the section that represents comments (with two talk bubble icons at the top of it) is very long. If your page has very few videos then the video section is short and so on.
  • Get it?
  • So it’s now much easier to navigate pages because you can go directly where you want.

Comparing the old scroll bars (of today) and this new design is like comparing Cassettes to CDs. CDs where awesome not just because of their quality but because you could skip directly to the songs you wanted to hear. Same with this new scroll bar design. It really empowers the user.

I’d really like to see Operating Systems eventually impliment this. But this would really be most helpful for websites like Amazon.com and Blogs. Both web browser developers and website developers will need to work on implementing this for sites. Hopefully this idea will spread around the internet far enough that Microsoft, Google, and Apple see it and decide to work on it.

I’ll probably never make a penny off of this but it would really make me happy to see this used by millions of people.

Icons used are from famfamfam.com