Instantly Improve Your Conversion With Just A Few Lines of Code
Instantly Improve Your Conversion With Just A Few Lines of Code
These common mistakes can tank your conversion, but are very simple to correct
16 years after the release of the first iPhone, I still see far too many mobile apps and websites making this simple but devastating mistake. They don’t optimize their form fields to make it easy for customers to enter in data. Whenever there’s something that adds friction to customers entering information, there is going to be drop-off.
Data Entry is a Key Part of Onboarding
The most important parts of an onboarding funnel are customers entering in data: emails, passwords, name, phone number… you want to make sure these steps are as streamlined as possible. No one likes filling in the same data over and over again, especially on a tiny phone keyboard. The easier you can make this for customers by choosing the right keyboard and auto-fill suggestions, the faster people will get through your funnel and become customers.
The Onscreen Keyboard Innovation
When Steve Jobs unveiled the iPhone in 2007, one of the biggest innovations was an adaptable onscreen keyboard. Previous smart phones, like the Blackberry, had hardware keyboards with fixed buttons. In the book Creative Selection by Ken Kocienda, getting the keyboard just right was the major unlock that convinced Steve the iPhone was ready. This innovation has spread to every smart phone now, becoming the standard for over 16 years.
This is old news at this point, but typing on an onscreen keyboard is more difficult than a hardware one, but the pros outweigh this downside. Onscreen keyboards only display when needed and can be adaptive, like displaying a standard keyboard when typing in someone’s name or a number pad when entering a phone number.
Dynamic Input Fields
Treating all input fields the same and not displaying the right keyboard, settings and auto-fill suggestions both hurts conversion and trust. Every time I see these issues in an app or website, it makes me wonder what else the developers got wrong? If the developers couldn’t even bother implementing these simple lines of code, did they not use best practices else where too? Were other, scarier things, also not implemented correctly, like password and payment management?
These issues create friction and even mistrust. Both of which can lead to drop-off, lower conversion and thus fewer customers or engagement and revenue.
The Solution
Here is a guide you can use with your development team to ensure common input fields are optimized for user input. All major UI systems support these features, wether your app is written in Swift, Kotlin, Flutter, React or even straight html/css.
So there is no excuse! If you’re app is already setup correctly and you’re reading this thinking “no duh”, then thank you for following these best practices already 🙏
Name Input
Whether you’re capturing first name, last name or full name, these guidelines apply.
Set the content type to display an auto-fill suggestion. This property can be set on all sorts of fields to show auto-fill suggestions from the users address book. For example, here is the documentation for iOS input fields.
Auto-capitalize words this is a small one, but it is annoying to type your first name with auto-capitalization (the default input behavior) only to realize that your last name has not been capitalized and you have to go back and change it.
Here is how this looks in the Max Travel profile. One tap and my name is filled in!
Email Input
For most apps, email is one of the most important pieces of data to collect because it’s how customers will log in and how you can message customers outside of the app.
Set the content type again, set the right content type to enable auto-fill.
Use the email keyboard, there is a special keyboard for email addresses you’ll want to use that puts the @ and . symbols right next to the spacebar. This makes getting to these required characters much easier.
Disable auto-capitalization, auto-correct and spell check, if you notice your input field is spellchecking, autocorrecting or capitalizing the users input, it is a good idea to disable this as these features can hinder, not help in this case.
Here is how the auto-fill suggestion looks in Max Travel.
I took email input help even further when building onboarding for Acorns, adding auto-suggests for common email domains, sorted by popularity. We also added correction suggestions after noticing a lot of customers still entering their email incorrectly with common typos like gnail.com instead of gmail.com.
Password Input
Password input is one of the most important fields to get right to properly protect your users data and security. Passwords are notoriously frustrating. For most people, passwords are likely the most frustrating parts of using apps. I’m sure we’ve all had experiences helping a grandparent or parent try to do a 2 second change in an app only to spend hours looking for, trying and resetting passwords and credentials.
The better you make user authentication, the less user frustration and fewer support calls you’ll have. It is not uncommon for login and password support contacts to be a meaningful number of tickets and expense for your support team. There are real benefits to getting this right for your users, your support reps and your bottom line!
Use Secure System Inputs
All systems provide special secure input fields for passwords. You should use these instead of trying to create your own. Not only do these system provided fields configure things correctly, like showing dots instead of the raw text, but many systems also implement other hidden features like blacking these fields out in screen recordings and other reports.
Leverage Password Managers
With the introduction of password managers, especially system level ones like Keychain on iOS, leveraging these systems should be your first, and best, experience to help customer create secure passwords and easily get back into their account.
Setting this up can be a bit intensive to get all the right pieces in place. But it is still just a few lines of code and configuration files across your app and server to get it working.
Here is an example of the Max Travel onboarding flow with strong password auto-fill from Keychain. As soon as the customer lands on this screen a secure password is automatically populated by iOS, all they have to do is tap “Use Strong Password” and they’ll be setup and ready to rock!
To my point above about system inputs, I had to take this photo from another device because taking a screenshot automatically hides the bottom system sheet.
Disable Auto-correct Features
The system provided inputs should handle this, but like with email if you notice your input field is spellchecking, autocorrecting or capitalizing the users input, you should disable these features as they can make entering in passwords even more annoying.
Password Requirements
It is a good idea to have password requirements to help guide your users to more secure passwords. Whenever there are massive password dumps it is shocking how many people’s accounts can be access by using the most common passwords which are often “password” or “123456”.
Password requirements can be used to encourage and guide customers to creating unique passwords that are less likely to be breached through bruit force. Just be sure you don’t make the requirements too overbearing or incompatible with password managers.
Here is how we conveyed the password requirements for Acorns, with realtime feedback on which requirements had been met.
Here is another example of password requirements in Max Travel, inspired by Loom.
Phone Number Input
It is so frustrating when apps display the standard text keyboard for phone number fields. There is nothing worse than tapping into a phone number input and getting the text input keyboard and having to peck away at the tiny number keys.
Set the content type so the user’s phone number can be auto-fill with one tap.
Use the phone number pad keyboard, so the phone number can be easily typed in.
Here is an example from Max Travel of the phone number input, with auto-fill and phone number pad keyboard
Address Input
Addresses are split up over several fields, so it’s important to set the right setting for each, like street address vs zip code.
Set the content type to display appropriate auto-fill suggestions. On iOS for example, you can set different content types for each part of the address.
Auto-capitalize words for most of the address fields like street, city and state.
Use the right keyboard, this will be the standard keyboard for text input and number pad for things like zip code.
On both Acorns and Max Travel, we took this one step further, using the Google Address API to suggest and auto-fill all the address fields when someone starts typing.
If you come across an app or website that hasn’t implemented these features, feel free to send them this article. I also run a funnel optimization consulting agency and would be happy to help 👉 growthfunnel.agency