Testing optimized e-mail fields

In this article, we will be testing out optimized e-mail fields according to Baymard. It involves disabling auto-correction, getting the right keypad, and auto-capitalization.

Business case: Testing optimized e-mail fields

In this hypothetical scenario, we arrive at the following hypothesis:

“Because we saw that Baymards recommends optimizing the e-mail attributes, we expect that adding the correct ones will cause an increase in sales. We’ll measure this using conversion rate”.

To test this hypothesis, we’re going to apply the changes below:

We get the right keypad, remove auto-capitalization and remove auto-correct from the email fields
We get the right keypad, remove auto-capitalization and remove auto-correct from the email fields

Code

Now for the fun part! 

To execute the change, we run the following JavaScript code on the testing page. Try it out for yourself to see it in action! Scroll all the way to the bottom for the correct input fields.

var emailFields = document.querySelectorAll(".email");
function fixEmailFields(inputFields) {
  for (var i = 0; i < inputFields.length; i++) {
    inputFields[i].setAttribute("type", "email");
    inputFields[i].setAttribute("inputmode", "email");
    inputFields[i].setAttribute("autocapitalize", "off");
    inputFields[i].setAttribute("autocorrect", "off");
    inputFields[i].setAttribute("autocomplete", "email");
  }
}
fixEmailFields(emailFields);

Logic

var emailFields = document.querySelectorAll(".email");

We start by assigning all the input fields with the class e-mail to our emailFields variable.

function fixEmailFields(inputFields) {

Then we declare a function that will set all the settings of an array of input fields to the ones described on Baymard.

for (var i = 0; i < inputFields.length; i++) {

We need a loop to process our array of e-mail fields.

inputFields[i].setAttribute("type", "email");

This sets the correct type of input field. This way a browser will recognize what kind of data to expect.

inputFields[i].setAttribute("inputmode", "email");

Then we set the inputmode to e-mail to make sure we get the right keypad.

inputFields[i].setAttribute("autocapitalize", "off");

Research has shown that users like to autocorrect the first letter of an e-mail if it is capitalized because it doesn’t look right. This line prevent this browser behavior.

inputFields[i].setAttribute("autocorrect", "off");

Autocorrection is also a common annoyance when typing your e-mail. Some addresses might resemble a particular word and the autocorrect will make unwanted changes. This lines disables that.

inputFields[i].setAttribute("autocomplete", "email");

Autocomplete can also cause unwanted changes in the e-mail field. Let’s disable that.

}

Then we finish our loop.

}

And we finish our function.

fixEmailFields(emailFields);

We call the function with our desired input fields. Note that I only use the bottom two input fields on the testing page. The other one does not have the class e-mail.

Write a comment