How to handle the on-screen keyboard without messing up your app usability
10 Usability rules for handling on-screen keyboard in your mobile apps. Opening the on-screen keyboard is a common task for mobile apps whenever users are required to enter their details, select a number, type a passcode and more.
Unfortunately, bad practices involving soft input methods are a common thing and can be found in too many mobile apps.
Bad management of on-screen keyboard results in bad user experience and unhappy users.
Here are 10 mobile keyboard rules for designers, developers, QA engineers and product managers that will help you avoid common mistakes and streamline the use of virtual keyboards in your mobile apps. I believe that applying the below rules will improve your app UX and increase the satisfaction of your users.
1. Open the keyboard by default
When navigating to a view where typing is required - open the keyboard automatically and save 1 redundant tap on the first text field.
If the user’s main (or only) action in this view is to type something - the app should automatically place the focus on the first text field and show up the keyboard.
This is a basic rule and requires a very small development effort.
2. Scroll content to accommodate the keyboard
One of the worst user experiences in mobile apps happens when the keyboard shows up and covers the focused text field causing the user to type without actually seeing the text.
This is a bug, but since iOS doesn’t provide this “scroll up” functionality automatically - it’s important to pay attention to it and make sure the focused content always moves up when the keyboard is visible.
Here’s how to implement this important piece.
3. Highlight the focused text field
As cosmetic as it seems - highlighting the selected field can be helpful when long forms are involved or when the user scrolls up/down by mistake.
4. Use auto-correction and auto-capitalization
Relevant for most text fields - having both auto-capitalization and auto-correction turned-on can reduce typing and improve the overall user experience of your app.
Think about how many times you had to go back to the first letter of your sentence just because the auto-capitalization didn’t work.
5. Careful with auto-correction and auto-capitalization
Yes, this point creates a bit of a conflict with the previous one but both points are valid: some fields must never be modified automatically, and this includes capital letters and auto-completion.
Examples can be: emails (you don’t want a capital letter or any extra spacing when you type your email), coupon codes, serial numbers, early registration codes, etc.
Believe me, the outcome of such mistakes can be deadly to your product.
Shameless self-promotion ahead:
UX writing: a comprehensive guide for designing text in mobile apps
7 Best practices for developing backward compatible mobile apps
The painful truth about mobile ads attribution
6. Set the right keyboard for every text field
Many apps don’t pay attention to it, but users do: different text fields expect different types of inputs so it’s important to use the right keyboard layout for the job:
Numeric fields need a numeric keyboard, email fields need a keyboard with a built-in ‘@‘ key), URL fields, credit cards and so on…
Make your app "smart" by setting the right input method for each text field. This will create an optimized typing experience.
7. When dealing with forms - add Next/Prev + Submit buttons
Instead of moving the focus manually from one field to another - the user should be able to navigate using the keyboard itself with the help of the Next and Prev buttons.
When the form is complete, the user should be able to tap Done and submit the form (while automatically closing the keyboard).
This feature is so commonly neglected by app developers - I’m not even sure users know how to use it.
8. Emails and passwords should have an 'auto-fill' option
Email and password auto-fill simplifies login and account creation tasks.
With just a few taps, your users can create and save new passwords or log in to an existing account.
This, of course, can improve conversion rate, prevent human mistakes and help your mobile app become more successful.
9. Consider using a custom toolbar on top of the keyboard
When your app needs a set of buttons that highly relate to the action the user is performing (for example text formatting), you may want to have them all grouped together and placed on top of the keyboard in a 'sticky’ mode.
iOS has a built-in class for it called InputAccessoryView and Android developers can workaround this using standard UI components.
As smartphones are getting bigger, it's getting harder to reach the top area of the screen and there’s more real-estate to afford to have sticky UI elements - having a toolbar on top of the keyboard can improve your user experience and boost the performance of your mobile app.
Toolbars on top of the keyboard - iOS apps
10. In extreme cases, create a custom keyboard
In rare cases, none of the standard keyboard layouts provide a good fit for your needs.
In such cases, having a custom keyboard might help improving the user experience.
An example of such a scenario can be found in an app called: Strong - a Workout Tracker for Gym.
This app includes a powerful workouts editor. Editing long workouts might be tedious when done from mobile, but Strong combines a great layout with a custom keyboard with a lot of useful shortcut buttons that turns the editing experience into a pleasant one.
Custom keyboard in the ’Strong’ app
Bonus tip: using haptic feedback
Twitter has a perfect example of how haptic feedback can enrich the typing experience and increase usability: as you type your tweet and get closer to the characters length limit - short haptic feedback is invoked and draws your attention.
It’s a very small but clever feature and I think more apps should consider the use of haptic feedback when data input is involved.
So there you have it: 10 tips to help you boost your mobile app usability without spending significant design or development efforts.
Dealing with a mobile on-screen keyboard has always been a bit of an issue for non-technical users but with the right approach and a bit of extra attention - it’s pretty easy to streamline the overall experience.
For more UI and mobile development tips - be sure to follow my extremely active account on Twitter: @gilbouhnick or subscribe to the newsletter of the mobile spoon.
Comments
Post a Comment