A technique to prevent Phishing

When I come to think of it.. stealing a persons credentials through phishing sites is going to be one of the biggest and most dangerous threat on the Internet.

Websites need to do  more than merely display warning messages on their sites in order to prevent phishing or alteast bring down the instances.

I think the basic concept is for the website to authenticate itself before the user puts in his/her passwords.

A simple technique that I thought of is described below

The login screen first displays only the textbox for the username, once the username is entered, the site makes an AJAX call and fetches the persons name and displays a message saying ” Hi Vinci Rufus” or some other info from the person’s profile before he/she can put in the passwords.

Well this does add an additional step, but I think it would be worth that extra step than losing your Internet Identity forever.

I’ve put up a small example of the above technique at this url

www.vinznet.com/labs/phishing/first_step.php

username : user@user.com     [ you can also hit tab]
pass: user

username: admin@admin.com
pass: admin

This is surely not a foolproof method and if the user doesn’t bother to look up on the screen to see if the site managed to get the correct info then there is nothing that can be done about it, or if the username is very similar to the persons name then we’ll need to pick up some other info like the birthdate or something.

So let me have your thoughts and ideas on the comments area and we can have a discussion.

I’m also thinking of another solution involving flash/flex based hologram kind of a thing.. but I’ll talk about it in another post.

Validations kill Usability

I’ve always been telling developers.. don’t go overboard with validations. The problem is developers and more so the Quality Control Test Engineers are so obsessed with validations that they completely miss out on common sense and Usability..

Here is a classic example I came across today on the Kingfisher (India’s second Largest Airlines) website’s Homepage . I’m sure this is going to get fixed very soon.. but it highlights what I’ve been telling all this while ” Commonsense is not Common” and “Too much of validation kills Usability”

Simple Effective Captcha => the Honeypot

Captcha now a days are starting to become a pain in the neck.. many a times the images are so skewed up that even after multiple attempts you never get it right .. making you feel less human.
or the new maths or general knowledge based questions can get so annoying that they make you feel like a fool.. In our war against the bots we seem to have taken our site visitors for granted !!

I’ve always hated CAPTCHA and yesterday while generally loitering around sitepoint.com I came across this very interesting article on CAPTCHA and the Honeypot technique, which is so simple and unobtrusive to the user.. that you’d feel like a lemming to have been following those image based CAPTCHA techniques.

The Honeypot technique is really simple.
Create a form with regular form fields and add an additional field and disguise it with a field name something like “fname”.. We hide that extra field called fname using basic CSS.. so that regular visitors can’t see it but is seen to spam bots who will interpret it as one of the Necessary fields. You could also put in an asterisk sign to fox the bot into thinking that the fname is a mandatory field.
The next step is .. on submit simply to check if the fname field is blank, if so then do whats needed, but if the fname field contains some post data then ignore any further processing.

Here is a simple code I came up with to explain this concept

This is the form:

<form action="submit.php" method="post">
<p>Name* :
<input name="name" type="text" id="name">
</p>
<p>Email * :
<input name="email" type="text" id="email">
</p>
<p class="honey">Fname* :
<input name="fname" type="text" id="fname"> <!--  The extra field -->
</p>
<p>Phone* :
<input name="phone" type="text" id="phone">
</p>
<p> <input type="submit" name="Submit" value="Submit"></p>
</form>

This is the CSS that hides the extra field from regular site visitors

<style type="text/css">
.honey {
display:none;
}
</style>


and here is a basic PHP script that checks to see if the fname field contains any post data and shoo away bots incase it does.

if($_POST['fname']==''){
echo 'Welcome to Humanity';
}else{
echo 'Shoo away bots';
}
?>


This technique has already been documented before by Ned Batchelder and Phil Haack and they claim significant success in stopping automated comments  submissions.

Well this technique does have it draw backs.. for one screen readers, would read your additional field and the user would fill it in unless you put in a clear description explaining them not to fill in that field.. However I’m told now that the latest versions of JAWS and other screen readers ignore content that has a CSS display:none applied to it so hopefully they would ignore that field.

The other drawback is if someone is specifically targeting your site, and spends a bit of time and energy trying to see whats happening here.. they could write a custom bot that would ignore the additional field and get past it easily.

Well agreed this is not bullet proof, but at least for the majority of the time it would keep your users happy and keep the bots away.

Usability in Forms: 8 Simple Guidelines

Face it.. if you are spending 70% of your Internet time, reading content on web pages, you are probably spending the rest 30% of your time filling up forms on the Internet.  It could be from a simple Login page, a registration page, a comments box on a blog or a discussion forum or that one big search box on the Google homepage, through which you usually start your Internet session with. At the end of the day they are all nothing but forms.. and Usability in forms is something which probably is ignored by most developers, and which can be an frustrating experience for your users.

Here are some points to ponder upon while building forms

#1 User name of email for login
Should we ask our users to enter a username or email with password to login.. a very insignificant thing.. and usually most of the sites are divided 50-50 when it comes to using a Username or email to login. But just think of it.. usernames tend to become very difficult to remember when you have a different username for each site. Also trying to have a common\ username across multiple sites isn’t quite possible because while a username is available on one site. it may not be available on the other and you finally end up adding some numbers or your date of birth to the username you originally wanted.. An email on the other hand is obviously unique and since my email  IDs are few and something that I can easily remember it helps a lot while trying to log into your site.

#2 Confirm Passwords
Ok now do you really need that confirm password thingi..how many times has that confirm password box prevented you from putting in a wrong  password. The most common error while putting in passwords is leaving the capslock on and this box doesn’t really help with that.
Moreover you still have the ‘forgot password’ thing to get back your password even if you put it wrong. Well I could live with the additional text box or confirm password. but lately I’ve started seeing a confirm email address along with the confirm password box.. Wow.. I thought we were trying to make things simple by keeping lesser number of fields for the user to type in.. I guess the day isn’t far when we’d have something like
Name: _________
Confirm Name: __________________

Email:_____________________
Confirm Email:__________________

Address : ____________________
Confirm Address_________________

Jeez please do trust your users in having some bit of intelligence and sanity.

#3 Country State:
OK from the list of countries I select Canada, when I go to state… why on earth are you showing me those 50 odd US states and right down after that the Canadian states for me to select from.
Why wouldn’t you use a simple AJAX script to display only the Canadian sates based on the Country I selected.. saves the user a lot of time

#4 Username Availability  check using AJAX
In the event you do really have to use a username as login.. try and use AJAX again to check if that username is available.. Don’t make the user fill the whole form submit it and only then be told that the username is already taken.
Here is a small tutorial I wrote on how to use AJAX with CakePHP to get this done. http://vincirufus.wordpress.com/2007/12/09/user-availability-check-using-ajax/

#5 The Reset Button

Ok have to admit.. there is a little bit of lemmings inside all of us. We saw the Reset Button being used ages back on some form and we continued to put it into our forms. Give me an honest answer how many times did you use the Reset button in your Internet life, if you didnt use it why give it to your users. Also imagine the frustration when you fill up a really long form and the mouse slipped and you hit the Reset button which is always so close to the Submit.  Why would some one use the Reset Button in the first place.. I either hit the browser Refresh or only change the data in the fields I want to change…

#6 Submit on Enter key:
This is a really small thing.. but it drives me crazy when on some sites.. I fill up the whole form and hit enter only to see the page refresh and come back with all blank text boxes.. why because the programmers didn’t really write the code to post the form on the Key press event. I’ve seen this mostly when people want to use images as buttons and simply write the code for an onClick event and not the key press event. Making sure your form submits on the Enter key is a huge relief to many of your users.

#7 Tab Indexes:
Usually this doesn’t come into play if you have the fields in a single column. but if you have your form designed in two columns or from my experience forms designed in Flash.. tab indexes play a vital role.. Imagine your users’ frustration as the cursor jumps around instead of going through a sequence while hitting tabs

#8  Save form data:
Yeah again a simple thing which I guess gets implemented in asp.net applications automatically thanks to ViewState.. suppose the user fills up a form and then after submitting comes back to it for various reasons.. please make sure you capture and display his/her filled in data when they return to the form. You dont’ really want to agonize your users by showing them a blank form each time they return due to some error!!

Acid2 test: Creativity in Simplicity personified

The other day I was reading about the Acid2, which is a browser test to see how close your browser comes to meeting the web standards.

From what I know the web standards is a huge list of guidelines, rules and recommendations on how a browser should render various elements and tags. With that in mind I was assuming after taking the Acid 2 test I was hoping to see a long list of the various guidelines with a result saying whether my browser succeeded or failed in that particular test, however after visiting the url I was surprised to see a smiley smiling back at me. It took me about a minute to realize that the fully formed smiley meant that my browser cleared the Acid 2 test. (Kudus to Safari and Opera).

Reading further I saw how each of the elements that went into forming that smiley actually tested for the various web standards. You can read more about it here http://www.webstandards.org/action/acid2/guide/

I’d say this is one of the best examples where, something so complex can be converted into something so simple and creative.

From what I checked out last , Safari and Opera cleared the Acid 2 test, while Firefox 2.0 comes close, and the good new is IE 8 too has cleared the test, so the future looks a lot more stress free for web designers and developers.

Too simple to be usable?

Simplicity is always associated with Usability, however sometimes we can get so obsessed with simplifying things that, things don’t remain quite usable.. Here are two examples

 

The apple Mac Book and the Mac Book Pro are amongst the best laptops available as of today. Everything is classy about it, right from that cute camera and mic on the top of the display screen, to the magnetic power connector. The only thing which might probably annoy many new mac book users is that single broad click button on the track pad instead of the regular two buttons. During my early days with my mac book, I was really annoyed not being able to do a right click with the track pad. I don’t remember how many months I spent cursing the Apple guys and being 100 % dependent on an external mouse. A discussion with a fellow mac user over a cup of coffee, led to the revelation that the right click was possible with the mac track pad. It was as simple as using two fingers on the track pad and hitting that same big broad button.. Now how on earth would a simpleton like me ever think of that. Using two fingers instead of one for a right click was just too simple for me to ever think of.

 

Another example which struck me was during one of my conversations with Blaize (a.k.a. Zi). It seems during the very early days of Google, while it was still being run from one of the Standford University labs, The Google guys wanted to do a usability test on group of users before their launch. If you remember during the 1990s, website homepages were full of content, and the more crowded the homepage, the bigger and popular the site.. During those days, a website whose homepage had one image, one large input box and two buttons under it, was of kind of unheard of…

Anyways getting back to my point. So the Google guys had a couple of university friends test out their new website. While they were observing the people go about using the software, they noticed one person, sitting in front of the computer staring at the screen not doing anything.. While he continued to stare for some more time, the Google guys decided to ask him if something was wrong.. The guy looked up and said, “I’m waiting for the page to Load”.

 

So here we are two of the world’s best innovators and the pioneers in usability still had people who wouldn’t use their software that well, just because they were too simple. The truth is complexity has become a part of our day to day life and there needs to be a bit of complexity in our software so that it remains useable to people like us .

Unexpected error 0x8ffe2740 occurred.

The other day, I tried to start IIS 5 and came up with this really cryptic looking error like this

Now what.. like all sensible people, I go to Google and search for it and the very first link is the Knowledge Base at the http://support.microsoft.com.
Ok so… it tells me that my default port 80 is being used by some other application.
And under Resolution it says” Stop the application that’s using Port 80”. Now how do I find out who is using port 80?
Oh good under “More Information”, they ask me to download some other software which will tell me who is using port 80.
Wow if you’d ask me that’s a lot of hard work.

Now lets see how do a bunch of guys, writing Free Software handle this. I use WAMP 5 which is a setup tool to get Apache, PHP and MySQL running.
So when you start and Apache fails. There is a menu right there which says “ Test Port 80” and when you hit that.. you get a Command Window… and this is what you see.

It doesn’t look polished, doesn’t have that cool look, but it gets the job done. Now thats what I call sensible software.
OK so I shut down Skype , try starting Apache again… it starts.. all my services start… and I’m off …

I don’t get this.. I’m sure M$ must have hired the best Usability experts to test their application, but no one thought of putting in sensible error messages? We had SP1, SP2 come and go by, and I still need to use Google to find out more than half the error messages that come up.
When the guys who build free software do it.. why can’t M$

Writing in Space – a Complex Problem

This is something I read long back in my teens, and since then it has stayed with me as a classic example of how some of the most mind boggling problems have the simplest of solutions.

During the early days of Space Travel, a very simple thing such as writing or taking notes in space has been troubling the people at NASA. The issue was the regular ball point pens, would never work in space because there was no gravity to push the ink fluid down. Perplexed by this issue, NASA setup up a team of research scientists, to come up with a solution. However in spite of spending over a millions dollars, and a lot of man hours, they weren’t getting close. Someone from the team popped the question “Why don’t we ask our Russian counterparts, what do they use to write in Space?

A Russian astronaut when asked this question looked surprised and replied “We use Pencils!!”.

Well I did some searching on the net recently and found out that.. the US Astronauts do have a solution now.. they (and now even the Russian guys) use something called a Space Pen or a Pressurized Pen which is hailed as a ‘technological novelty’.. but I still don’t think it beats the simplicity of a pencil.