October 14th, 2011

More than a scrollbar

The scrollbar has been around since the first (close enough) website. It is an essential element of the world wide web experience. Like a Wacom pen is to a designer, an umbrella to a Londoner, or in these sad times a Blackberry is to a rioter. For as long as I can remember a scrollbar has just been about viewing more information, and rightfully so given that is it’s function. Nowadays though things are changing, an advance in technology has meant that the scrollbar once solely meant for scrolling up and down has evolved. Here are some examples.

What goes down must go up (Dentsu Network)
This site is more a ‘What goes down must go up’. It instantly reminded me of Nike’s Better World website (that’s a good thing). Visually it is a treat to look at, and the subtle animations really enhance the experience. My personal favourite aspect of the site is the numbers animation on the ‘Our people’ segment. As you scroll down further the number increases. A nice touch, but a little confusing maybe give you a scrolling down as the number increases. This and the fact it is on blue suggests you are sinking!

Crafted, timeline treat (Union Station Neighbourhood)
Overall a beautiful website, crafted and considered and again the scrollbar plays it’s part in enhancing the experience. Where it really shines is on the ‘History’ page. At first glance it appears as normal but scroll a little further and it springs into action. The left hand side remains fixed as you scroll through the years in detail on the right. As you reach the end, the left hand side comes to life again and repeats the process. This is a real simple, subtle effect but one that changed my own experience of using the website greatly.

Giant Tetris Puzzle (Nizo)
When you’re site is this cool, you don’t need a navigation. The scrollbar plays a key role here, as you scroll down the page the various different audio elements animate in like a giant tetris puzzle, but what is particularly cool is the way the logo at the top and the content at the bottom meet as the scrollbar reaches its end. Timing that only the bullet train in Japan can match.

Minimalistic bliss (Tokyo Blue)
Speaking of Japan, Tokyo Blue is minimalistic in true Japanese fashion. The site is essentially a list of beautiful photos, but the ‘pizzazz’ of this site comes when you scroll down the page and see the google map square in the top left corner change to reflect the image you are on. I have no idea how that happens technically but it happens, and as a result makes the site really stand out whilst at the same time making me want to visit these places. As with the Nizo website, when you reach the end of the line (so to speak) the ‘back to top’ anchor appears. Again it’s a small thing, but it leaves me with a better experience.

Follow the white rabbit (Ala)
From minimalistic Japan to minimalistic Switzerland.. wait, this is anything but and completely trashes my trashy stereotype. Arguably the nicest site to look at on my list. It immediately entices you with the ‘follow the white rabbit’ animation, and who doesn’t follow white rabbits? So you scroll, and see a lot of icons panning around, scroll a little more and see postcards of polar bears and walruses panning, scroll some more and your pixel coach awaits you complete with a yoga set of moves. In short, keep scrolling and this site comes alive. This is a great combination of functionality and design coming together to create a great user experience. If this site was flat, it would still be a visual treat based on the nature of the content, but it really comes to life with the scrollbar.

Summary
I’m not too much of a maths whizz, but I do know one simple equation that works. Good design + good functionality = a great user experience. These sites push the boundary (and then some) on what is possible with a simple scroll up and down. The added element of discovery makes the user want to explore further, and as a result every one of these sites leaves you with a lasting, memorable experience, and the scrollbar becomes more than just a scrollbar.

…and last but not least: The exhibitionist (Mario Kart Wii)
I had to include this website on here, as it really is more than a scrollbar, in fact there is no scrollbar. It’s pretty radical I know, but when you see Mario popping wheelies on the page you know it’s gonna be. The sole navigation is rooted to the bottom of the page, and. The site scrolls along like a standard scrolling carousel but then it veers to an angle and you are reminded of a turning gone wrong on Mario Kart. The point is, this site changes the way you scroll completely. It’s very brave and the simplistic functionality marries together with the stunning visuals to create a lasting experience. One worthy of the title last but not least.

About the author

Marko is responsible for creating websites that are usable as they are beautiful. He is particularly interested in seeing massive typography look good online.
  • http://www.haldorado.hu/list_info.php?pid=283 site air jordan france

    It appears that you’ve put a first-class amount of effort into your piece and I demand a lot more of these on the World Wide Web these days. I truly got a kick out of your post. I do not have a bunch to to say in reply, I only wanted to register to say phenomenal work.
    site air jordan france http://www.haldorado.hu/list_info.php?pid=283

  • http://www.allsmallwindturbines.com/links.php?pid=4738 jordans shoes 6

    Thanks for posting this piece of writing. I’m without doubt frustrated with struggling to search out relevant and brilliant commentary on this subject. Everybody now goes to the very far extremes to either drive home their viewpoint that either: everyone else in the planet is wrong, or two that everyone but them does not in actuality understand the situation. Many thanks for your succinct, applicable insight.
    jordans shoes 6 http://www.allsmallwindturbines.com/links.php?pid=4738