Towards an easier way to enter email addresses
Here at cxpartners we’re interested in examining best practice around common UX patterns and also challenging the conventional wisdom around them. I’ve been looking at the humble email field and how entering an address could be simplified, through auto-suggesting the domain (e.g. gmail.com).
Here's a demo:
And a GIF in case you missed it:
Thinking about such small components and their ‘micro-interactions’ may seem insignificant, but we believe there is a business value behind them.
Giles has spoken before about the theory of ‘marginal gains’. It’s the same theory behind the success of the British cycling team in the London Olympics. Before a race, they would rub the bike tyres with alcohol. This would remove a thin layer of dust that would cause the tyres to fractionally slip on the starting blocks. A tiny change that would only save 1000ths of a second. But as Tim Harford points out in his fantastic talk Innovations that matter: “By figuring out all the things that you can make work just a little bit better, you can turn all of those improvements into something that really matters”.
Entering your email address
So, back to email input fields! These must be one of the most common inputs on online forms and I personally get a little frustrated whenever I have to manually type in ‘gmail.com’. Therefore this seemed like a good pattern to look at.
Luke Wroblewski’s video 'How to reduce E-mail Input Errors’ was an excellent starting point. He firstly recommends certain html attributes to reduce errors (type=email, autocapitalize=off, autocorrect=off). On mobile, this brings up a keyboard with the @ symbol and stops any unforeseen ‘corrections’, as shown below:
He also has a couple of ideas for preventing errors. One involves inline validation to check for spelling mistakes of popular email domains (e.g. gmail.com):
Another solution for the same issue involves error alerts, along with the ability to correct:
The first idea apparently reduced email hard bounces by 50% - pretty significant for a relatively small change! However, watching this made me think – can’t we do something before a user makes the mistake, rather than after?
Auto-complete and the 'hotmail' issue
My first idea was an auto-complete email address field. This would fill in the form field with common email domains as you type. I did a quick google search and there’s actually quite a few jQuery plugins for doing just this. I took some code from Chris Yuska’s plugin, a list of popular emails from Mailcheck's plugin and started playing around with it.
It felt quite efficient and natural. At this point I spoke to our in-house form-guru Joe. He in-formed me of the ‘hotmail’ problem. Emails sent to an address ending in hotmail.com do not go to the same mailbox as the address ending in hotmail.co.uk. This meant that auto-completing to either hotmail.com or hotmail.co.uk could actually increase errors. Also, the design didn’t really accommodate spelling mistakes if the user carried on typing.
So the next iteration used an auto-suggest rather than auto-complete. This allowed for the display of both ‘hotmail.com’ and ‘hotmail.co.uk’. It also felt less intrusive if you were entering a work email address (like cxpartners.co.uk). The nice by-product was that as soon as you typed ‘@‘ you had a list of common email domains to select from. The original list was quite overwhelming, so I reduced it down to the more popular ones.
I also added a spelling-correct feature (using a crazy algorithm) with the assumption that this would help mop up any additional errors.
The prototype doubtless needs further work and could be further optimised. The list of emails would probably need to be customised for different countries; the initial list of most popular emails could be populated based on real statistics. Also, the mobile view could be more space-efficient by displaying suggestions horizontally:
This auto-suggest idea has similarities with Chrome’s auto-fill feature. However, when I use this I always end up having to delete an address from five years ago. It also doesn’t work if you aren’t signed in to Google.
But I guess the point isn’t about being an original idea – it’s about sharing thoughts and questioning best practice. Making these small changes can then make us all feel a bit more like Chris Hoy!