Today I was checking my Cloudflare account (for analytics) as usual. I was accessing it on an iPhone SE. And I was unlucky enough to be so fast that I tapped ‘Log in’ before the password was filled by Safari (figure 1). Of course this resulted an unsuccessful log-in. The log-in page was reloaded and the password is filled (figure 2). However, I could not log in to Cloudflare by pressing ‘Log in’ and if I do that, the page will reload itself.
What was happening? I had no idea at the beginning, but soon I started to use my psychic power: ‘There have been so many log-in failures, shouldn’t I be asked to enter a CAPTCHA or something?’ I confirmed that by dragging the page — reCAPTCHA box is under the ‘Log in’ button. Of course by then I could log in to Cloudflare.
This bug (of design) is hardly discoverable, you have to:
- Use a touchscreen of a specific size (touchscreen so that scroll-bars aren’t visible)
- Have your password automatically filled
- Make the first log-in attempt fail (e.g., by tapping ‘Log in’ before the password is filled)
The second condition is crucial. If it were not met, I would have had to enter the password with a keyboard, dismissing which would have revealed the reCAPTCHA box.
That said, I still regard this as a catastrophic UI failure. Information is presented in a flow, and in the case of a log-in dialog, the information flow is top-to-bottom. The ‘Log in’ button should not appear until all necessary information has been presented. The same logic applies so that websites cannot put a secret clause of terms solely after the ‘Pay now’ button, nor should the signature field of a written contract appear before the body has ended.
Please enable JavaScript to view the comments powered by Disqus.