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

1,014 Comments

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

  2. Todd says:

    Nice idea!

  3. Marie Janssen says:

    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

  4. David says:

    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.

  5. Awesome! I’m sold on the idea.

  6. Zecc says:

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

    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.

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

  8. Lucb1e says:

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

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

  10. Valentin Anohin says:

    Крутой скролл)) Хочу такой же

  11. “Very good post.Really thank you! Much obliged.”

  12. funciona says:

    Major thanks for the blog post.Really thank you! Awesome.

  13. I truly appreciate this article.Thanks Again. Really Great.

  14. Appreciate you sharing, great post.Thanks Again. Want more.

  15. Thanks for sharing, this is a fantastic blog.Thanks Again. Awesome.

  16. Sex says:

    Appreciate you sharing, great blog article.Thanks Again.

  17. Great, thanks for sharing this post.Thanks Again. Cool.

  18. Im grateful for the blog article. Much obliged.

  19. Thanks again for the post.Thanks Again. Awesome.

  20. download says:

    Im obliged for the post.Really thank you! Much obliged.

  21. Really appreciate you sharing this blog post.Thanks Again. Fantastic.

  22. I appreciate you sharing this blog post. Cool.

  23. Really informative article post.Thanks Again. Really Great.

  24. I truly appreciate this blog post.Thanks Again. Great.

  25. Thank you ever so for you article post.Much thanks again. Will read on…

  26. BrettMoice says:

    wh0cd904260 [url=http://levitra.college/]how to buy cheap levitra online[/url]

  27. Bennygal says:

    wh0cd904260 [url=http://levitra.college/]cheap levitra online[/url]

  28. Im obliged for the post.Much thanks again. Keep writing.

  29. Fantastic article.Much thanks again.

  30. BillyGax says:

    wh0cd57020 [url=http://levitra20mg.us.com/]levitra[/url]

  31. StewartKiz says:

    wh0cd57020 [url=http://buyamoxicillin.us.com/]amoxil[/url]

  32. BrettMoice says:

    wh0cd57020 [url=http://nexium.us.com/]nexium[/url] [url=http://buytetracycline.us.com/]Cheap Tetracycline[/url] [url=http://trazodone.us.com/]example here[/url] [url=http://buyproscar.us.com/]proscar price[/url] [url=http://lisinopril.us.org/]url lisinopril hctz prescription[/url]

  33. BrettMoice says:

    wh0cd57020 [url=http://buyprovera.us.com/]provera[/url]

  34. Bennygal says:

    wh0cd57020 [url=http://genericadalat.store/]adalat[/url] [url=http://anafranilforocd.store/]anafranil cost[/url] [url=http://acyclovir.band/]price of zovirax[/url] [url=http://wellbutrin.tips/]wellbutrin[/url] [url=http://prednisolone.pet/]home page[/url] [url=http://retina.pub/]retin-a[/url] [url=http://propeciacost.shop/]how much does propecia cost[/url] [url=http://genericrevia.store/]revia cost[/url] [url=http://nolvadexforsale.store/]buy nolvadex without prescription[/url] [url=http://zithromax.promo/]zithromax[/url] [url=http://clonidine.doctor/]clonidine[/url] [url=http://viagracheap.store/]viagra[/url]

  35. AlfredDib says:

    wh0cd57020 [url=http://metformin.doctor/]order metformin online[/url] [url=http://phenergan.doctor/]phenergan[/url] [url=http://furosemide.doctor/]furosemide[/url] [url=http://trazodone100mg.store/]trazodone 100mg[/url] [url=http://tadalafil.rent/]tadalafil[/url] [url=http://buyreviaonline.store/]revia[/url] [url=http://toradol60mg.store/]toradol 60 mg[/url] [url=http://retinacream.store/]retin a cream[/url] [url=http://zestril.store/]zestril[/url] [url=http://metformin.pet/]metformin[/url] [url=http://metforminhydrochloride.shop/]website here[/url] [url=http://metformin.blue/]metformin[/url] [url=http://valtrex.toys/]valtrex[/url] [url=http://prednisonesteroid.store/]prednisone steroid[/url] [url=http://antabuse.college/]generic antabuse[/url]

  36. wh0cd57020 [url=http://doxycycline.pink/]vibramycin 100 mg[/url] [url=http://retina.toys/]retin-a[/url] [url=http://lasix.pink/]lasix[/url] [url=http://bentylotc.shop/]drug bentyl[/url] [url=http://zithromax.doctor/]zithromax[/url] [url=http://diflucan150mg.store/]diflucan[/url] [url=http://kamagra.pet/]generic kamagra[/url] [url=http://lasix.band/]cheap lasix[/url] [url=http://yasminonline.store/]recommended reading[/url] [url=http://anafranilclomipramine.store/]anafranil for ocd[/url] [url=http://tadalafil.blue/]tadalafil tablets[/url] [url=http://albuterol.vip/]albuterol[/url] [url=http://zithromax.promo/]buy zithromax azithromycin[/url]

  37. wh0cd57020 [url=http://tadalafil.promo/]tadalafil[/url] [url=http://lexapro.fun/]lexapro[/url] [url=http://lisinopril.doctor/]lisinopril[/url] [url=http://prednisone.rent/]prednixone tables for sale[/url] [url=http://kamagra.toys/]kamagra[/url] [url=http://prozac.rent/]prozac[/url] [url=http://lexapro.promo/]otc cipralex[/url] [url=http://xenical.blue/]orlistat over the counter[/url] [url=http://colchicineonline.store/]colchicine online[/url] [url=http://synthroid.ninja/]synthroid 175[/url] [url=http://albuterol.doctor/]albuterol inhaler cost[/url]

  38. Great, thanks for sharing this article post.Really looking forward to read more. Cool.

  39. chouqin says:

    There are some fascinating points in time on this article however I don抰 know if I see all of them center to heart. There’s some validity but I will take hold opinion till I look into it further. Good article , thanks and we wish extra! Added to FeedBurner as properly

  40. Aaronnus says:

    wh0cd57020 [url=http://buyproscar.us.com/]buy proscar[/url]

  41. Aaronnus says:

    wh0cd57020 [url=http://buyseroquel.us.com/]seroquel online[/url] [url=http://buynexium.us.com/]buy nexium[/url] [url=http://nexium.us.com/]esomeprazole[/url] [url=http://tenormin.us.com/]Cheap Tenormin[/url] [url=http://buylevitra.us.org/]levitra[/url]

  42. Aaronnus says:

    wh0cd57020 [url=http://buycialis.us.org/]buy cialis without a prescription[/url] [url=http://ventolin.us.org/]ventolin[/url] [url=http://genericviagra.us.org/]viagra mastercard[/url] [url=http://buymethotrexate.us.com/]buy methotrexate[/url]

  43. Aaronnus says:

    wh0cd57020 [url=http://buyatarax.us.com/]atarax tablets[/url] [url=http://buyviagraonline.us.com/]viagra online[/url] [url=http://viagra.us.org/]buy viagra online[/url] [url=http://buydiflucan.us.com/]Where To Buy Diflucan[/url] [url=http://robaxin.us.com/]buy robaxin[/url]

  44. Bennygal says:

    wh0cd57020 [url=http://acyclovirbestprice.us.com/]aciclovir[/url] [url=http://synthroid.us.com/]Synthroid 50 mcg[/url] [url=http://augmentin.us.com/]augmentin[/url] [url=http://cymbalta.us.org/]cymbalta 60 mg cost[/url]

  45. Michaelnup says:

    wh0cd57020 [url=http://buyfluoxetine.us.com/]prozac[/url] [url=http://albuterolprice18.us.com/]albendazole 400 mg[/url] [url=http://arthritispillsnow.com/]cheap celebrex online[/url] [url=http://albuterol18.us.com/]albuterol[/url] [url=http://amoxicillin2018.us.com/]amoxicillin 500[/url] [url=http://buyamitriptyline.us.com/]amitriptyline online[/url] [url=http://buysildalis.us.com/]buy sildalis[/url] [url=http://antabusebestprice.us.com/]ANTABUSE[/url] [url=http://clonidine.us.org/]clonidine[/url] [url=http://buyabilify.us.com/]buy abilify[/url] [url=http://buywellbutrin.us.com/]wellbutrin without prescription[/url] [url=http://augmentin.us.org/]Order Augmentin[/url] [url=http://costofviagra.us.com/]cost of viagra[/url]

  46. Michaelnup says:

    wh0cd57020 [url=http://buspar.us.com/]Buy Buspar[/url] [url=http://provera.us.com/]Provera[/url] [url=http://serpina.us.com/]BUY SERPINA[/url] [url=http://tadalis.us.com/]tadalis no rx[/url] [url=http://buysuhagra.us.com/]buy suhagra[/url] [url=http://buyseroquel.us.com/]Seroquel Visa[/url] [url=http://buyalbendazole.us.com/]Generic Albendazole[/url] [url=http://amoxicillinbestprice.us.com/]amoxicillin[/url] [url=http://cheapviagra.us.org/]Cheap Viagra[/url] [url=http://buymethotrexate.us.com/]Buy Methotrexate[/url] [url=http://buylevaquin.us.com/]cheap levaquin[/url]

  47. wh0cd57020 [url=http://sildenafil.us.org/]SILDENAFIL[/url]

  48. Michaelnup says:

    wh0cd57020 [url=http://buymedrol.us.com/]medrol online[/url] [url=http://allopurinol2018.us.com/]purchase allopurinol online[/url] [url=http://serpina.us.com/]purchase serpina[/url] [url=http://buyseroquel.us.com/]SEROQUEL ONLINE[/url] [url=http://buyaugmentin.us.com/]BUY AUGMENTIN[/url] [url=http://buysuhagra.us.com/]Suhagra Online[/url] [url=http://buyampicillin.us.com/]buy ampicillin[/url] [url=http://amoxicillin2018.us.com/]Amoxicillin Prescription[/url] [url=http://buyviagra.us.org/]best viagra[/url] [url=http://buyfluoxetine.us.com/]buy fluoxetine[/url] [url=http://antabuse2018.us.com/]antabuse[/url]

  49. AlfredDib says:

    wh0cd57020 [url=http://buycytotec.us.com/]buy cytotec[/url] [url=http://abilify.us.org/]Cheap Abilify[/url] [url=http://tadalis.us.com/]Tadalis Sale[/url] [url=http://neurontin.us.com/]neurontin online[/url]

  50. wh0cd57020 [url=http://benicaronline.shop/]generic for benicar[/url] [url=http://diclofenacsod.store/]diclofenac sod[/url] [url=http://retina.toys/]retin a tretinoin cream[/url] [url=http://doxycycline.college/]doxycycline[/url] [url=http://baclofenonline.shop/]buying baclofen online[/url] [url=http://phenergan.doctor/]info[/url] [url=http://diflucan150mg.store/]diflucan 150 mg price[/url] [url=http://indocinonline.store/]indocin 50 mg[/url] [url=http://viagratablet.store/]viagra[/url] [url=http://sildenafil.rent/]sildenafil[/url] [url=http://tadalafil.vip/]tadalafil[/url] [url=http://doxycycline.tips/]doxycycline[/url] [url=http://prednisolone.toys/]prednisolone[/url] [url=http://valtrexonline.shop/]valtrex[/url]

Leave a Reply

Your email address will not be published. Required fields are marked *