Possibly the most common web form we encounter these days is the ubiquitous wifi password login. Almost every organization that provides wifi – public or password-protected – requires that we accept their terms of use before giving us interwebs access.
With any interaction, designers must present information and actions logically. In this case study, that’s the fail.
Why is “connect” still gray?
After I dutifully typed the (fairly straightforward) password into the form field, the “connect” button remained grayed out. I clicked it a couple of times before my eyes moved back up and to the left and saw the terms of service checkbox, with pretty much unreadable text.
This login form breaks at least two design best practices.
First, when the functional area is a box floating on top of a photo like this one, everything required for connection should be inside the box. Our eyes will not attend to anything outside of the box, because the box frames the task.
Second, be certain that any text has sufficient contrast and size to be legible.
A logical redesign
The redesign is quick and straightforward. We need to move the “accept terms” condition into the floating box (logical sequencing), and we need to think about both type size and contrast (legibility). Also, if there is no obvious reason to change link colors, make an unvisited link a readable shade of blue.
In this case, I used a blue that mirrors that of the Travelodge logo. I don’t think that a underline is essential given that “terms of use” is a standard document online.
The connect button should still require that both check box and password field be completed before it lights up. But with this visual sequence, the user should not type a password and then wonder why she still cannot connect.
