Catastrophic UI failure of Cloudflare’s sign-in page

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.

Figure 1
Figure 1
Figure 2
Figure 2
Figure 3
Figure 3

Please enable JavaScript to view the comments powered by Disqus.