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

  • http://twitter.com/IsaacHost Isaac Goldstein

    Chris do you need funding for this project? follow me on Twitter and send me a DM

  • Todd

    Nice idea!

  • Anonymous

    Reminds me of the scroll bar on MSNBC, which uses a similar format except does it in CSS. Check it out in any article there for example http://www.msnbc.msn.com/id/41883479/ns/world_news-mideastn_africa/

    It was introduced with their new pages: http://www.msnbc.msn.com/id/37643077

    • http://www.ChrisNorstrom.com Chris Norström

      Ah so that’s what they were, long ago when I loaded up Internet Explorer (very rare for me), MSNBC popped up and I saw them in an article, I didn’t bother clicking them at the time but must admit, they’re a nice idea. A lot more easy to implement than mine.

      Thanks for the headsup.

  • David

    Clever! I was glad to notice the visual resemblance to a mock-up of my own of a redesigned scrollbar that embedded the browser’s Back/Forward history. The resemblance is pretty superficial, but still cool. I wish I had thought to use transparent “window” idea.

  • http://whimsycoll.com Whimsy Collective

    Awesome! I’m sold on the idea.

  • Zecc

    The SausageJS plugin for jQuery implements a similar idea: http://christophercliff.com/sausage/examples/couchdb.html
    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).

    • http://www.ChrisNorstrom.com Chris Norström

      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.

  • http://twitter.com/chris5marsh Chris Marsh

    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!

  • http://lucb1e.com/ Lucb1e

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

  • http://simplicity-studios.com/ Roger Adams

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