Ajax Usability Concerns
Author of this post: Tara MacKay | About Blog Authors »At the Future of Web Design conference in New York, Ryan Singer of 37 Signals and Jonathan Snook of snook.ca led interesting seminars on web application usability and Ajax design, respectively. These subjects are very much related, as Ajax is commonly used to create web applications and so can positively or negatively affect usability.
Ajax’s biggest benefit to the user is its speed. If well prepared, Ajax apps on a web page will move very fast, because only small amounts of data will update or refresh. The whole page need not reload. The speed makes these applications, in general, more interactive and engaging.
AjaxDaddy.com has a wide range of demos that are both fast and interactive.
However, the speed and the fact that changes often only occur in small areas of a web page can actually pose problems from a usability standpoint. Every morning, I visit washingtonpost.com and read the comics, which are posted in an Ajax-based tabbed list. When I’m done with the comics in the first tab, I move to the second. Sometimes, the speed of the update and the similar appearance of the content confuses me, leaving me thinking that the change hasn’t occurred yet. I wait awhile only to realize that the new content has been ready and waiting for me all along.
The similarity of the content in the two tabs makes it hard to tell that a change has occurred.
The problem here is that users expect the page to reload whenever changes are made. When only a small part of a page is updated and the overall content or design is largely unaffected, new material can easily go unnoticed. Adding a small animated transition or even just making a static but noticeable change to the visual display of the content can usually solve this problem.
Other Ajax usability issues, like linkability, aren’t so easily resolved. Again using our comics example, let’s say I wanted to send a friend a link to the comics page, so that she could read the comics in the Web Comics tab. When she follows the link, my friend will only see the default content, which is that in the Editorial Comics tab. I’d have to tell her to click through to the second tab (though I’m sure she could figure it out herself); there is no way to directly connect her to the content I want her to see.
And what about searchability? The same problem exists here. While all of the page content is hanging out in the source code and is indexed by search engines, clicking a link from a search engine takes you only to the default content, leaving you to do more clicking if you wish to find the content you searched for.
As you might expect, this also wreaks havoc on site statistics. How can you know how many people are viewing the Web Comics section as compared to the Editorial Comics section, when both are in a tabbed Ajax app? It’s a mystery.
Some of these issues (and these aren’t the only ones) call to mind the days of frames and all the workarounds developed to deal with them. However, unlike frames, interactive web apps are here to stay, and rightly so, as they have ushered in excellent new designs. We can only hope that these issues are resolved in the future, because, for many sites, the benefits still far outweigh the drawbacks.
December 5th, 2007 at 3:21 pm
Hello Tara,
Thanks for the report.
SWFAddress (http://www.asual.com/swfaddress/) is a free library that is a great help in solving some of the usability concerns you have mentioned in your post, specifically linkability, searchability and site statistics.
Also, I like the way GMail and Remember The Milk highlight your last action, giving feedback that something indeed has happened, and allowing you to undo it.
-Nathan
December 6th, 2007 at 5:54 pm
Re: Washington Post tabs. I would use animation only in desperation given it may distract or delay user action. What’s the point of AJAX if it slows the user down?
The problem I see with the Washington Post tabs is that they don’t look like tabs. The labels are colored and underlined like links, so no surprise people expect them to work like links. Controls with distinctive effects should have distinctive appearances. In the case of tabs, the tab for the current panel should have the same background color as the panel (white, in this case). A border comprising the tab and panel is necessary so it appears as a contiguous object. Three-D visual cues can be used to make the current panel and tab appear to be in front of the others. In other words, a tab should look like a tab in a thick-client app.
That’s a general good rule of thumb: Copy the appearance of thick-clients controls. Most of these appearances have been tested and proven effective. Those that haven’t are at least familiar to many users. If you really think you’ve a better way than thick-clients (and surely there are better ways), then plan to test it. Don’t make it different just to look different.
Oh, and I’m suspicious about the use of tabs at all in this case. What sort of categories are those? How is a user supposed to know if a comic is “washingtonpost.com” or “web comic”? Aren’t there web comics that are also editorial? Where should a user look? I’d think the one thing the user knows is the name of the comic they want to read. I’d bet they’d be better off with a single scrollable pane of all comics sorted alphabetically.
December 9th, 2007 at 11:00 am
I would like to draw your attention to another alternative which is a paradigm shift for AJAX front ends. One should be aware that I am not, and do not pretend to be objective, never the less I believe that one can judge for himself. Visual WebGui is an open source rapid application development framework for graphic user interfaces of IT web applications. VWG replaces the obsolete paradigms of ASP.NET in both design-time and run-time which were designed for developing sites, with WinForms methodologies, which were designed for developing applications. Thus enabling designer that was designed for application interfaces (WinForms designer) instead of a word documents (ASP.NET designer). This provides the developer with an extremely efficient way to design interfaces using drag and drop instead of hand coding HTML. Visual WebGui is an AJAX frame work that doesn’t expose logic, data or open services on client requests and therefore is not as vulnerable as common AJAX solution.. VWG presentation layer is de-coupled and instead of standard browser it can, and will run Silverlight.
NO!!! Visual Webgui is not!!
Not a component library – It is a complete revised approach to developing web applications.
not a JavaScript generator – It runs on the server controlling the browser using a small static JavaScript kernel.
Not for developing sites – It was designed to provide for developing IT web applications GUIs.
Not a closed / locked-in framework – It has many extensibility features, which allow integration of legacy resources (ASP.NET or DHTML resources) and the development of custom controls and behaviors.
Worth a look at http://www.visualwebgui.com,
December 20th, 2007 at 3:23 pm
Ajax is tough to use when you are taking about SEO. Great article though.
January 9th, 2008 at 6:45 am
In SEO scenario Ajax is little bit tough. Great post, keep it up.
February 25th, 2008 at 6:19 am
Hi! Thats really a nice post. Search engines can not read AJAX and its better if we avoid it if we are targeting search engines.
March 25th, 2008 at 10:25 am
AJAX is not at all search engine friendly so it should be avoided.
April 24th, 2008 at 4:12 pm
Nice article. I think ajax should be used to ENHANCE the user experience.
Which means that everything should work if a user chooses to disable javascript or has a browser that does not support it.
Regards,
Open Source Pixels
April 25th, 2008 at 11:44 am
Hi! Ajax is a great technology and there is not doubt about that but its not a seo friendly language so i would suggest avoid it as far as possible.
Regards
Hermann
May 17th, 2008 at 7:04 pm
Paradigm shift is indeed a nice alternative and for me easier. The comment about SEO and AJAX is not making sense, if you build it right; every searchengine will appreciate it and take all your AJAX stuff for granted.