Ajax: Controlling the Scroll

By Deane Barker tags: front-end

This is going to seem obvious, but I hit on something today about Ajax. I knew this in the back of my head, but it jumped to the front today –

Ajax can do a lot, but the most simple and powerful thing it can do in certain, specific instances is eliminate the page scroll.

Page scrolling may seem simple and innocent, but think about it – when you post a form or click a link, the entire page reloads into the browser at the very top. So if the user was low on the page doing something, the page is now scrolled all the way up so they have to do something very frustrating: re-orient themselves to the data they were just looking at. (And anchor tags don’t help. At best they’re hopelessly inaccurate in terms of re-locating where the user was.)

Consider this scenario I’m working on –

I’m creating a simple Web-based file-browsing system where the user can explore a file and folder structure via a little Web interface. This interface, however, is part of a larger screen of data – it’s just a little window towards the bottom of the page.

If – when the user clicks a link to enter a subfolder in the list of folders he’s looking at – the entire page reloads, then the user has to scroll down to find the interface again, re-orient themselves to the space they were looking at. Usability goes out the window with this method. Not just because they have to move the mouse or spin the wheel to scroll, but because they have to “re-figure out” where they were.

(Not to mention the audible “click” in IE when you click a link. I think that click really snaps people out of any contemplation they were in. It’s a signal to them that something has changed and reset, so forget what you were looking at before and re-adjust.)

But with Ajax, I could quietly just reload that little section of the page, so the user’s focus never strays from the interface within the larger window. This is huge for the user experience. Yes, there are other problems (where you are in this interface is not reflected in the URL, for one), but those pale in comparison to the benefits for these situations.

Again, Ajax is capable of a great many things. But if the only thing you do with it is use it to isolate “mini-interfaces” within larger interfaces, you’ll still come out way, way ahead in terms of usability.

This is item #272 in a sequence of 354 items.

You can use your left/right arrow keys to navigate