This post has some amount of technical discussion.

Our team received a problem reporting that user tends to quit before clicking the final confirmation while using an online reservation system. We looked into the system, analyzed the whole reservation process and got several findings.
* Unclear action items
* Lack of user’s status in the process
* No error proof mechanism

We came up with solutions addressing these issues and took immediate actions.
* I redesigned the button, making it feels more web 2.o and as a result the button popped out from the page, successfully drawing users’ attention.
* I added reservation steps to the system. Step 1 to 5, giving users a clear visual clue of his status and what’s remaining.
* I employed onbeforeunload function to help with the error proof. Whenever user tries to close the window or leave the page, a warning dialogue will popup “Are you sure u want to leave the page? Press Okay to continue”

frbsf online tour registration system error proof

HOWEVER, my supervisor had a very insightful comment “What if the user intentionally click the back button to go back to previous page, the warning dialogue will be a hassel.” Yes, that’s quite to the point and I added a javascript function, detecting the x&y coords of mouse, deciding whether user tries to click the browser back button or to close the window. To make things even trickier, IE and FF have different mechanism/parameter for detecting x and y coords.

Some experts had a similar solution on the internet before and I tweaked the code a little bit, I would be really glad if my snippet can be of use to you.

var posx;var posy;
function getMouse(e){
posx=0;posy=0;
var ev=(!e)?window.event:e;//IE:Moz
if (ev.pageX){//Moz
posx=ev.pageX+window.pageXOffset;
posy=ev.pageY+window.pageYOffset;
}
else if(ev.clientX){//IE
posx=ev.clientX+document.body.scrollLeft;
posy=ev.clientY+document.body.scrollTop;
}
else{return false}//old browsers
document.getElementById(‘mydiv’).firstChild.data=’X=’+posx+’ Y=’+posy;
}
window.onbeforeunload = function (evt) {
if(posx>=350){
var message = “Please note: If you continue, your tour reservation will not be completed. “;
if (typeof evt == ‘undefined’){
evt = window.event;
}
if(evt) {
evt.returnValue = message;
}
return message;
}
}

BTW, my employer, Federal Reserve Bank of San Francisco offers very nice tour service, don’t forget to register online at the official website.

No related posts.