skiFFie Making Drupal Mobile!

This page is inspired by a recent visit to a major web site and the problems that I faced while browsing / interacting on site. The article may well seem like a rant but this is an example of some the issues that myself and others are trying to irradicate. Listed are some of the pitfalls of AJAX based pages and dynamically created URLs.

For those not in the know, AJAX stands for Asynchronous JavaScript and Extensible Markup Language. It can save bandwidth and can make web pages feel like full applications. It certainly has its place, but there are a number of drawbacks.

Due to the nature of the beast, the JavaScript is essentially making XML requests for information. As you may have noticed with pages rich in AJAX scripting much of what is returned has little no formatting - basically just raw information. This information is then displayed on the browser screen in hidden containers (div or iframe). This can of course reduce bandwidth as there is only one http request and the whole web page itself does not refresh. However, what happens if the user isn't paying attention or doesn't notice any changes or the script itself doesn't work for one reason or another?

I have been to many sites and click on links and wait for things to happen. Half the time you are not sure whether you have actually clicked on the link or if anything indeed is happening. Being a "developer" type of person I have lots of debugging tools installed within my browser. However errors, or lack of events, rarely throw any errors and you are just made to wonder what is going on.

This site uses little, if no, AJAX - certainly within the main content of the site. However version 2 did and http://227net.com currently does. However both of these examples degraded pretty gracefully in browsers that didn't support JavaScript of this nature. On this site, the menu block which was hidden, but expanded through JavaScript, appeared for non-supported browsers. The links on http://227net.com all work with or without JavaScript enabled. The method is shown below. I am calling the JavaScript function site() in the example. This could actually be excluded from the HTML and included within the JavaScript but it is more for illustration purposes.

<a accesskey="1"
href="http://227net.com/site.php5?id=home"
onclick="site(this.href + '&js','main');return false;">Home [1]</a>

I actually do a check to see if the page has been opened using the JavaScript event or not using PHP. If it hasn't I just encapsulate the code within my full templates. This reduces the number of redundant pages and also allows the site.php5?id=home page to still be bookmarked.

<php
if ( !isset($_GET['js']) ) {
// show in template
}

Back to the rant at hand though. I was looking for jobs on this large global company's web site and had a torrid time. Firstly the jobs/careers section is within the common work flow of the site generally but as soon as you start your search the trouble begins.

From selecting an option from the drop down lists of countries or job type and clicking search you are then presented with a list of results. My personal preference is to be able to open multiple tabs at the same time. For example leaving the results on one page, a specified job opens in a new tab. But "oh no!" Not on this site. You get an error saying you have another window open and the job after the job description is teasingly flashed before your eyes.

OK, so no tabs then. I didn't see any jobs of interest on the first page of results, lets go on to the next page. So the URL has not changed and the page has - the job listing is now at the top of the screen: are we actually on a new page? The answer is no - we have just jumped up to an anchor. But I like the jobs on this page - I should save this for later. I can't!!

Oh well, let's investigate an actual job. This one looks good. Let's save it. Surprise surprise - I can't. Still got the same URL in the address bar. Wait. I can keep the job id and search for that later - easy. No. There seems to be a lack of job id there too. How can you search for job id when they are not included in the job advertisement.

But wait, I have found it. I was going to send the job to a friend. When hovering over the link I noticed that one of the parameters was job id. Brilliant! Well I suppose they are looking for technical people and everyone knows how to interpret URLs right? And where is the back button. Sorry, my bad. Didn't see the "return to job list" link. Maybe that is an obvious one.

The "send to friend" thing opens a new window. No messages about what they do with e-mail addresses and certainly no indication of whether the message has been successfully sent or not. The pop-up window does close though...

Upon receiving the HTML email I do get a job id too. So this is, in fact, the easiest way to "bookmark" specific jobs. Take the job id from the mail and search for it. Not really very practical is it?

Simple solution to make the site more user friendly is to print the job id on the advertisement and be able to access the jobs directly though domain/careers/job_id=whatever - this is not rocket science!

I haven't been through the candidate profile or job application process yet. Just trying to find suitable jobs was hard enough without the palaver of filling out yet more forms online. I cannot be the only person to have experienced these problems - perhaps the web site does not invoke any usability testing before site launch. Overall a very disappointing experience.