The case of the moving touch zone

User experience can be a finicky thing at the best of times so it’s down to us, as designers, to create the best experience that we can to make sure that users enjoy the products and services that we create for them.

One particular thing has been bugging me silly recently, it’s in the iOS Twitter client. I call it the case of the moving touch zone. Take a look at the animation below. The red circle represents your finger tapping just after the UI has settled.

The tweet loads up and then after a few ms of being on screen the buttons move down to reveal some more information above them. This is a pain because you end up tapping where the button was, rather than where the button is. A minor thing but very frustrating and you end up having to tap twice instead of once. A simple solution would be to add in the information below the buttons instead of above.

This is not unique to this particular app but it does offer a good example of the case of the moving touch zone. I’ve seen this happen when sites are slow to load as well, for example you might be able to see the item that you want to click on whilst the site is still loading up, then as the browser loads more and more content around your click / touch zone it moves around to accommodate the new content which has just loaded in above it, moving your click / touch zone away from where you were aiming. It’s always worth thinking about this, users are impatient and we can’t expect them to have to wait until your layout has settled down and all of your fancy animations have finished playing before they click onto something else. Be direct and make your UI predictable.