Facebook Twitter Gplus LinkedIn RSS
 
 
Home » Blog » Combating the Impatient App User

Combating the Impatient App User

Published on April 8th, 2012

Recently my father reported a bug in Demotivate where the screen would get stuck on a page with no navigation. He wasn’t the first to report the bug either. I’ve also experienced it once before, but thought I had squashed it. Bugs can be a funny thing. When you are the developer, you know how the App is supposed to work. You tend to be patient, and understanding. You know where to click, and sometimes more importantly, where not to click.

However, when you aren’t familiar with the App, and the App isn’t responding as expected, what do you do? Well, apparently you do what a majority of other people do, which is tap around on the screen. It makes sense, of course, but this is an Ajax programmer’s nightmare! Due to the asynchronous nature of Ajax, tapping around on the screen can queue up tons of routines that all try to fire off at once. This can create some weird behavior, which almost always results in a crash.

This is what was happening in today’s bug. I never found it because I generally don’t go tap crazy on the screen. However, hand your App to someone else, and watch, 9 times out of 10, they are very impatient. If they tap a button, and it doesn’t immediately respond, they assume they didn’t tap it, so they tap it again. Now the routine fires off twice.

So how do you combat this? Simple, once you know what you are fighting. You disable all the controls on the screen as soon as the request fires off.

Here is an example jquery sample of a simple “touchend” event.

1
2
3
4
5
6
7
8
9
10
11
12
$('#myButton').bind( 'touchend', function(event) {
     event.stopImmediatePropagation();
     event.preventDefault();
     $('#myButton').unbind( 'touchend');
     // put navigation code here
     $('#myButton').bind( 'touchend', function(event) {
         event.stopImmediatePropagation();
         event.preventDefault();
         $('#myButton').unbind( 'touchend');
         // put navigation code here
     }); 
});
$('#myButton').bind( 'touchend', function(event) {
     event.stopImmediatePropagation();
     event.preventDefault();
     $('#myButton').unbind( 'touchend');
     // put navigation code here
     $('#myButton').bind( 'touchend', function(event) {
         event.stopImmediatePropagation();
         event.preventDefault();
         $('#myButton').unbind( 'touchend');
         // put navigation code here
     }); 
});

The odd thing here is that you have to rebuild the same function back to the button, and this can often be awkward, especially if your code is huge, effectively doubling the size of the bind. This works fine in a small program, but in a larger program like Demotivate (it is large for me), this won’t do. This App has some 80 different “touchend” binds throughout the code. To get this same effect, I bind all my “touchend” functions when the “pagebeforeshow” event fires, and then I unbind these “touchend” events on “pagebeforehide”.

My testing shows that if your “touchend” function has navigation involved, this works perfectly since the “pagebeforehide” function will effectively unbind all of the controls before your impatient user taps on the screen again.

Here is the same example again:

1
2
3
4
5
6
7
8
9
10
11
$('#thisPage').live( 'pagebeforeshow', function() {
     $('#myButton').bind( 'touchend', function(event) {
          event.stopImmediatePropagation();
          event.preventDefault();
          // put page navigation code here
     });
}); 
 
$('#thisPage').live( 'pagebeforehide', function() {
     $('#myButton').unbind( 'touchend');
});
$('#thisPage').live( 'pagebeforeshow', function() {
     $('#myButton').bind( 'touchend', function(event) {
          event.stopImmediatePropagation();
          event.preventDefault();
          // put page navigation code here
     });
}); 

$('#thisPage').live( 'pagebeforehide', function() {
     $('#myButton').unbind( 'touchend');
});

Now when you tap “myButton”, when the navigation code triggers, “pagebeforehide” will unbind the button. Your impatient user can tap the screen all he wants, and nothing will happen until the animation to the new page has completed.

About the Author: Sprawl

Stephen Russell is a Mobile App developer and all around IT geek that spends his days running data centers and his nights coding. This site is the go to place for all of zSprawl’s work and the infamous development blog. In his free time, he enjoys tinkering with web code, playing video games, and otherwise plotting to take over the Internets.


 

Leave a Reply

© 2012 zSprawl's zApps

Fork me on GitHub