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 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


  1. Zecc says:

    The SausageJS plugin for jQuery implements a similar idea:
    And you haven’t mentioned this, I don’t know if you had given thought to it, but clicking a section will make the scrollbar jump directly there (instead of just scrolling a bit in that direction).

    Oh, and why not present a miniature view of the whole page, like in Photoshop’s navigation panel or the RockScroll plugin for VisualStudio? You could put a color-coded overlay over it.

    • Woah…. very nice. I never realized how many different and creative implementations there can be of just one concept. His are already achievable, same with the MSNBC version. I just wish his showed the descriptions by default without having to mouse over the sections.

  2. Chris Marsh says:

    Google Chrome has a (much less fully-featured) version of this that I already find useful. When you search for something on a page it highlights in the scrollbar where your search term is on the page. This looks like a really good idea!

  3. Lucb1e says:

    This looks amazing! Can’t wait for a big website to pick this up, triggering further use elsewhere.

  4. Wow that is a really great idea! Thanks for posting.