One of the Worst Login Forms

published on February 8, 2011 in technical

Forms are all over the internet. Everyone wants our e-mail, name, address, phone number, and who knows what else. But if they need those, for marketing purposses, or whatever else, they might as well make those damn forms a little more usable. Here is one, that I hate.

 

Update: The ELMŰ has redesigned, rebuild part of their web presence, but the below has not changed. They kept all the mistakes...

1. What am I talking about?

The form I am talking about, belongs to a power company in Hungary, one of the biggest – ELMŰ. At a first glance, it looks fine, but I would mention that they are not familiar at all with the term of whitespace. It is cluttered, it hurts my eye. The text is small, almost unreadable.

2. Under the hood

What does a webdev do, when he finds something bad an ugly? Checks the sourcecode. That's what I did. And found something even worse. This:

<input type="Text" class="urEdf2TxtEnbl" 
autocomplete="off" size="40" maxlength="40" 
id="sap-alias" ct="InputField" name="sap-alias" 
st="m" tp="STRING" value="" 
onblur="sapUrMapi_InputField_Blur('sap-alias',event)" 
onkeydown="checkKey2Login(event)" 
onfocus="sapUrMapi_InputField_focus('sap-alias',event)" 
style="width:200;">

<input type="Password" class="urEdf2TxtEnbl" 
autocomplete="off" size="40" maxlength="40" 
id="sap-password" ct="InputField" name="sap-password" 
st="m" tp="PW" value="" 
onblur="sapUrMapi_InputField_Blur('sap-password',event)" 
onkeydown="checkKey2Login(event)" 
onfocus="sapUrMapi_InputField_focus('sap-password',event)" 
style="width:200;">

The purpose would be to give the user (let me tell you that these users pay for the company's services, that's how they are able to login) a possibility to login. Well, the above code is probably the most difficult way to achieve that. Sadly, I cannot paste in all the code, cause it is huge! But take a look for yourself.

We might as well say that it works. Which is not even close to what wee call a working form. It has a lot of problems, a lot of things that make the paying user's life a living hell.

It contains inline CSS. Ugly and bad. The browsers are not able to cache these pages properly, which is going to make it slower each time it loads. On the other hand, to defend a bit the programmer who did this piece of crap, let us accept that this way he ensured that it is going to be downloaded from the server every time, making it as fresh as possible.

The other thing is the size of the code. What the hack are all those Javascript binds in the HTML? All wee need is two damn fields and a submit button ona form! I understand that this is SAP (possibly, probably), but still. Unacceptable.

And here comes the worst: because of the smartness of the developer, my browser cannot save the password. And, they do not accept simple passwords, that can be remembered. Oh no, only Linux root quality passwords are accepted.

Then comes the click. Oh, I mispelled my password (people do that in the real world, I do too). The creep reloads the page, and after reload it capitalizes my user name. Who told the that this is the proper way of doing it? Where did they go to school?

3. Why are the above so bad?

  • the browser cannot save our data and help us next time we want to give them money
  • bad feedback, making the user name red and capitalized
  • huge code for a very simple task

4. A piece of advice

  • if we do a Javascript powered login, let us build it properly, so that the browsers can save our data
  • error reporting must be good and simple, never chage the test the user entered in any way
  • let us stick to simple techniques, it is best for everyone