AJAX Annoyances to Avoid
The AJAX revolution has completely reinvigorated the web. Browsers are working hard to increase the speed of their JavaScript and rendering engines. Web Developers are working as quickly as possible to push the limits of the browsers even further. Users are feeling more entitled by the user experiences provided by AJAX-heavy websites like Facebook. Before you thrust your website into the world of AJAX, be sure you're doing it for the right reasons, otherwise you may run into the following annoyances.
Using AJAX Because You Can
If using AJAX doesn't improve the user experience, there's a good chance that using it will cause more harm that good. There are many behaviors and functionalities you'll need to account for (paging, scroll position, "back button", etc.) that the browser traditionally handles. Add to that things like browser bookmarking and there's a good chance that using AJAX may not be the best bet, especially if you don't want to put in the development and testing time to ensure that your users wont be led down an unreliable path.
Forgetting Scroll Position/Paging
A lot of websites now use a cute paging technique that loads more content once you've scrolled down near the bottom of a parent element. That's great and all but if I click a link, click my browser's "Back" button, and only the first "page" of content loads, I'll hunt down the site's webmaster and shank him. I'd rather wait for a full page load than continually need to scroll to the bottom of an element to get back to where I was.
Providing No "Feedback" Imagery/Message
There's nothing worse than clicking on a button and ...seeing...nothing...happen...Oh, there it is! Communicating effectively with your user is paramount to a good user experience. At least with a new page load the user would see the progress bar light up, the address bar change, and possibly even a different cursor. If you plan on creating an effective AJAX-powered site, use something like Dotter or another visual effect to communicate to the user that something is happening.
Too Many Things Happening at Once
Too frequently do I see AJAX-driven websites that have 100 things happening at once. If there are a hundred things happening at once, how can you effectively communicate that to the user? That's quite a task. It may be best to try to chunk requests together to better show your users "progress-by-volume."
Have More?
I know I'm missing a few annoyances -- share them! If brave enough, cite websites that are currently making these mistakes!
What the hell is that AJAX thing you are talking about?
Isn’t that a football club from Amsterdam?
Well, you mentioned this under the 1st section, but i think it should be a section by itself: if your site’s content loads with AJAX, or that a lot of it’s behavior and navigation is through AJAX – support back-button and history. support page refresh.
From a developer perspective, I should mention that not canceling requests is annoying.
Facebook is a big abuser of the “Forgetting Scroll Position/Paging”
Totally agree about the abuse of this kind of technology, i wrote some lines a few weeks ago at [http://www.panaghia.it/en/2010/03/16/sfatiamo-il-mito-ajax/] talking specially about some usability problems.
keep going with your great job!
Sergio
Yeah, the ones you have mentioned are really annoying. In fact, I had a project once for a client where he wanted to me “fix” what he referred to as a “major bug” in his site. He had hired a developer to build him a custom site, and when the developer put it together they had overly used AJAX for every single thing you can basically imagine. If you click “contact” it would load that over what you were viewing, if you clicked basically anything on the site it would load up the content on the same page through AJAX. The “bug” he referred to was how you the back button was rendered useless on his site “in all browsers” as he put it. hahaha, Little did he realize this actually wasn’t a bug per se, but was the way the whole system he had developed was coded. So basically when I came on, I didn’t use a single bit of the old code and instead just reverse engineered the whole site from scratch and only used AJAX when I felt it was relevant and helpful.
People really definitely do overuse it, and often use it in the wrong way. It’s use should be intuitive at all times, and it should really only be used in the context of 1) when reducing the load is important, or 2) when you’re building a web application. Using it for every link on your site is just plain stupid (not to mention really poor if you care about SEO).
A few other mistakes I frequently see (which are kinda just variants of what you’ve already described) is when content can be loaded over content in a DIV or element, without allowing you to restore the previous state of the element, when it may be desirable in some situations (basically the same as making all your links AJAX driven).
Another one I’ve started to see more often (though perhaps not necessarily just AJAX related, but JavaScript related) is when clicking something opens an overlay in which the only way to get rid of the overlay is by filling out the whole form or reloading the page. I’ve seen lots of new and trendy sites do this sort of thing with login menus for example – you click some login button or link to open a login menu overlay, and the overlay doesn’t contain any “close” or “x” allowing you to get rid of it in case you changed your mind or clicked it by accident. Sadly this is becoming pretty common, and when the big guys are doing it to, it’s only a matter of time before it spreads like wildfire (since we all know most web developers today have no creativity and just rip off the big name sites of the day).
/rant
I used to have Ajax site wide on my blog, I thought it would be cool but not really. And Ajax affects your page rank.
It doesn’t just affect your page rank, it destroys it. Another bad thing about ajax is that many developers now days don’t care about browsers without Javascript. While we keep this trend up, we will just go nowhere fast.
You should also add:
– Using AJAX Because Everyone Else Does
– Using AJAX Because Client Wants It
– Using XHR+html instead of simply toggling display: value for respective divs
and most of all:
– Not wishing to learn JS, and still code numerous sites with it.
@ctult: Oh yes, I agree. Most of the animations that I used for my site works without Javascript, just the special effects are missing.
The only part of my blog where Ajax is used is in the comments and the contact form.
Agreed, I really hate it when a site is fully AJAX and nothing happens when I press the back button. It still offers a lot of possibilities that weren’t possible before or simply misused other technologies like framesets. So now a site that plays music as its core functionality can keep that music playing while users browse their site, pretty ingenious if done right.
When I select some next, and some ‘helpful’ image/ form/ modal appears offering to search with that text or similar… kind of like on this blog actually.