StackOverflow2013

Note that there are some explanatory texts on larger screens.

plurals

POHow can I improve the responsiveness of buttons in an iPad kiosk web app?
text
Body
copied!<p>I developed a web app for our iPad 2 kiosks that just went live today. Pretty much all of our clients are having problems using the touchscreen. They are pounding on the buttons and the app is not registering a touch.</p> <p>I had never thought there would be so much difficulty for a user to interact with the touch screen. I am wondering if there is anything I can do as a developer to make this more user friendly. There is a slight lag between the touch and it actually getting registered - which is making it that much more difficult for the user to know they have pressed a button.</p> <p>I can safely say, the buttons are plenty big - in fact probably larger than what the iOS guidelines would be (again this is a web app - it isn't written in Objective-C, rather PHP and jQuery). All the action is happening in the web app - which is accessed using a simple UIWebView iOS app that simply connects to the site.</p> <p>To clarify, there are 2 problems:</p> <ol> <li>Touch not registering at all - clients press progressively harder in frustration</li> <li>For touch events that are registered, there is a lag</li> </ol> <p>Thanks to some suggestions in the comments below, which eventually led me to this <a href="http://forum.jquery.com/topic/how-to-remove-the-300ms-delay-when-clicking-on-a-link-in-jquery-mobile" rel="nofollow">link</a>, I was able to greatly improve the responsiveness of the web app. But I know my code could still be improved. My app uses a combination of backbone.js and jquery outside of any of the backbone mvc.</p> <p>Here is an example of a jquery event I altered to prevent the default touchend behavior (it originally was a click event).</p> <pre><code>$('body').on( 'touchend', '#s-id', function(event) { event.preventDefault(); $('form[name=client-login]').submit(); }); </code></pre> <p>And an example of a backbone view, which also originally used a click event</p> <pre><code> var CounterView = Backbone.View.extend({ el: "body", events: { "touchend #b-q-prev": "qPrev", "touchend #b-q-next": "qNext" }, qNext: function(e){ e.preventDefault(); this.model.qIncrease(); this.qShow(); }, qPrev: function(e){ e.preventDefault(); this.model.qDecrease(); this.qShow(); },...etc... </code></pre> <p>Implementing these techniques solved both my problems, as the app essentially doesn't care what you do after you originally touch a button, once you release it considers the original button you touched was pressed. This allows the haphazard taps my clients use to trigger the events. It also is way faster, solving issue 2.</p> <p>I am not confident I have implemented this correctly. One major downside is now that when I do testing with a non-touch device, no events register because I removed all click events from the java script. Should I be looking at multiple events, not just blocking the default touch end? Based on the research I did, there is no clear solution to this - as jquery mobile hasn't event implemented it yet?</p>

Querying!

Guidance

An individual column

Larger individual text columns get their own page to allow for proper reading.

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload