Form and function



The form has long been known to be a breaking point in web user experiences.

If there is one thing that will risk your users engagement it is the form. Even a perfectly formatted form will turn away some users. Even more so on a mobile device since form user interaction from the mobile is a trickier engagement compared to using a traditional keyboard. That is why it is such a surprise to us that a huge number of (mobile)forms out there are not even close to being optimised for mobile use. Even though doing so is quite a simple task. Of course there is more to the form then what we are about to mention. The space rhythm, the form color, size etc. The steps we are talking about here are fast and would take a developer minutes to complete. Hopefully having a significant (negative) impact on the drop out rate.

The trickier engagement for mobile user mentioned above comes from the keyboard size. Inputting data to a form from a mobile device is a lot harder. The sheer size of the keyboard is the biggest factor. That extra interactions are required to get to certain keys such as the ’@’ symbol and numbers for example. With the attention span of modern users those extra interactions might be deal breakers.

Enter the modern input types. Giving the input a type of email for example will tell the device to show a customised keyboard for the user where the @ symbol will be shown by default without the unnecessary extra key press to get to the ’@’ symbol. Also the first letter will not be uppercase. A small but important detail. Same thing if the input requires a phone number. The only options should be digits and + and # signs. A-Z buttons are not needed and should absolutely not be there by default.

Here is an example from when we were given the mission to overlook the web of Swedish beer producer Mariestads.

medbas medbas

The first image shows the keyboard before our involvement. The user is given an alphabetic keyboard when the required input is aga aka a number. After a small adjustment from our side the user now gets a numeric keyboard as shown in the second image. Does this really matter? Very much so!