Web International Awards

payday loan


MAR 2010 0

Enhancing UI with scrolling events – good or bad?

Screenshot of João Andrade's website header

Scrolling wheels are usually used to navigate up and down or left to right on a page that is larger than the default viewport of the browser. However, by using JavaScript one can enhance the user interface of a site or webapp and reprogram, if I may say it like this, the default behavior of the scrolling wheel.

Good scenarios

If a web document contains textareas or block elements with overflow set to auto and the content inside these elements extends the area of the element itself a scrolling bar will appear, be it horizontal or vertical. By default, users will be able to scroll inside these elements by pointing the mouse inside the element's borders and use the scrolling wheel. If positioned outside the element when using the scrolling wheel the entire page will scroll. This is a good feature. Moreover, it is what users expect to achieve given these circumstances. And this works without developers doing anything.

Bad scenarios

Many modern websites use inline slideshows or sliders to showcase more content in less space, from photo galleries to product features and more. However some sites enhance these sliders in such a bad way that they completely screw up user experience. Check out João Andrade's website and try to scroll down to the bottom of the page where a contact form is located — contact form which is the selling point of his website. Unfortunately you get stuck in the header of the site because there's an enhanced "awesome" slider which moves to next or previous slides based on how you use the scrolling wheel.

This feature is bad because it redirects the default behavior of the scrolling wheel away from the page scrolling bar, and if you're not quick in reactions you'd think that the site is buggy. This feature would probably be ok if the slider would be properly delimited from the rest of the page and the slider's numeric controls would stand out, just as a textarea or block element that overflow delimit themselves nicely due to the scrolling bar that pops out near the right border of the element. Currently, the slider on João Andrade's website blends in beautifully inside the page.

If you enjoyed this article you can stay updated to new content via our RSS feed or by email.

Further reading

Published on Tuesday, March 16th, 2010 at 12:42 pm in usability.

About Bogdan Pop

Bogdan Pop is a young Romanian entrepreneur who runs WebRaptor. He is a web developer with awesome design skills, who enjoys writing about everyday's work and usability. He relaxes by taking photos every once in a while and by mixing french electronic music. Connect with him via Twitter.

There are no comments. You can be the first to post one.

Save time next time! You won't have to fill out all these fields again. Register in just a few clicks and then login.

If you do not have a username, you can register in just a few clicks.