Good looking and usable are different features. This example looks nice, but is rediculously unusable. It highlights one of the fundamentals of UX Design.
Why This Is So Bad
I don't have to convince you that was commically unusable. In fact, if you actually got your email address entered, I applaud you!
But what underlying user experience and design principles were broken to make it so awful?
Your expectation of this direct mapping between the keys on your keyboard and the input is so ingrained that you didn't even think about it.
In The Design of Everyday Things Don Norman introduces the idea of a "mapping" between the inputs and the outputs of a system. There should be a clear mapping from each input to the associated output.
In the case of that horrible email form, the direct mapping between your keyboard and the input was deliberately broken. Push the "a" key, and get the letter "n".
When a mapping is commonly encountered, or even ubiquitous, we come to expect it from new interfaces that appear similar to what we have experienced in the past.
The email form above was familiar on a number of levels. As the user, you're familiar with text inputs, online forms, and especially email address inputs.
You expected the computer to simply map from your keystrokes directly to characters in the input.
In fact, your expectation of this direct mapping between the keys on your keyboard and the input is so ingrained that you didn't even think about it. You simply started typing your email address.
Regardless of your typing technique, or even whether you were using a physical keyboard or the touch screen input on your mobile device, you never conciously thought about it.
In the discipline of UX this is called habituation.
First, don't remap your user's keyboard!
Ok, seriously, of course you wouldn't do that ... for usual text input. But what about keyboard shortcuts?
Some shortcuts, such as Ctrl-S, are obvious conventions, and have been for decades now.
But other conventions are still emerging:
- Using / to focus the search input on a website (GitHub.com and DuckDuckGo.com both use this)
- Using Ctrl-K to open the search input in other applications (Slack uses this)
A few more examples of expected behavior:
- Underlined text in a different color is expected to be a hyperlink.
- Search interfaces are case-insensitive (except the ones used in software development-related tasks).
- In online interfaces, single-clicking opens the click target. It is quite confusing to encounter an interface which expects a double-click online...
Be aware of and study the other digital experiences your users are accustomed to; maintain the same behavior as thoses and meet your users' expectations.