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.

Here's a demo:

See the Pen Email Auto-Suggest by Stuart Tayler (@stuarttayler) on CodePen.

And a GIF in case you missed it:

Email auto-suggest pattern

Marginal gains

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 ‘’. 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:

Email optimised keyboard

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.

Spelling correction

Another solution for the same issue involves error alerts, along with the ability to correct:

Spelling correction alert

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 do not go to the same mailbox as the address ending in This meant that auto-completing to either or 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 ‘’ and ‘’. It also felt less intrusive if you were entering a work email address (like 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.

Default email list

I also added a spelling-correct feature (using a crazy algorithm) with the assumption that this would help mop up any additional errors.

Spelling correct suggestion

Further work

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:

Horizontal auto-suggest

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!


Stuart is a UX consultant who gets kicks out of seeing prototypes come to life, whether they be on a screen, made of foamboard or using a bunch of LEDs.