The Foup Soup
One of the things that feel quirky about forms on an iPad, or for that matter any touch device, is that an on:focus event causes the page (web) to jump upwards. Upwards by a distance of up to ~300 pixels depending on how far below the horizon the field in question was. From a purely UX standpoint, that’s way too much movement for an eye to follow.
Users have to readjust according to the new position of elements on the page as the keyboard pops out from below — a problem that’s further exacerbated if there’s an element with style position:fixed somewhere on the page.
Even though focus centering done by iOS is smooth, and almost certainly unavoidable, the jump is particularly distracting at a time when the user is tasked to think about what to type and submit in the form. One is forced to wait for the animation to stop before considering what to transfer from the mind into the machine.
A flash of uncertain position — FOUP bug?
While keyboard sliding in and focus centering on iPad has certainly gotten better in the past few years, but the experience remains a bit jittery, especially for those who are introduced to the iPads and are fresh to note the jank.
Enter Touch login
Last week we considered a solution to get rid of FOUP entirely for certain parts of Bubblin. Logging in is one of them. Login form is one of the most used form field on any web application and it made perfect sense to think up a solution that made the experience somewhat better for returning users.
Enter touch login for web-apps.
Touch login is just a small tweak of remember_me functionality where the user is able to login via a persistent login_cookie, without having to type username or password again. Given that iPads are very ubiquitous among younger users and very much personal (even desktops?), we thought it would make sense to simplify it for returning users to login with just one tap on their screen. It just works!
To turn it off just a flip of switch is enough, and poof! the cookie is gone forever. Like it?