The main reason why I want to share this article is that in my recent project, I found that whether it be developing a low-fi prototype or discussing with the group, more often than not we will be distracted by a small keyboard:
While the page is loading, should we pop up the keyboard?
What’s the relationship between the keyboard and the text field?
When the keyboard pops up, should we still offer the voice input entrance?
It goes without saying that the keyboard is important as one of the media we tackle frequently every day. Every time we generate a chat with our friends, every time we check a flight ticket, every time we navigate to somewhere, the keyboard popups.
So based on my own design experience, I have summarized a couple of things to consider for a small keyboard.
1. When the keyboard pops up, please give me the exit as well.
When the keyboard pops up, the user mostly will go to a new page to search. Then how they can exit this page becomes an issue. There are many ways to indicate the users, for instance, we can use icons, or just put the text cancel, or we can just put a back icon to guide them out of the page.
With the flourish of the input method, for instance, there will be voice input and visual recognition input inside or outside the text field, which make me thinks about the problem about how the limited input space can be used. Therefore, in my following instance, I transform the voice input button into the delete button, because I personally think that when the user triggers the keyboard, the first thing they want to do is inputting instead of switching to another input method. Plus the voice input entry can still be in the keyboard.
2. When the keyboard pops up, recommend what user really want.
What might be the scenarios for people to start a search? Perhaps they have searched the same word somewhere else. Perhaps they just finished watching a movie and want to view more comments. Perhaps another more rational scenario is that the user is reading an article and somehow they see a word they don’t know before. So they copy the word and go elsewhere to find the answer.
3. When the keyboard pops up, going back is no longer going back
There usually will be a navigation bar at the bottom part of the phone, which varies a lot from phone to phone. Some keyboards will especially display a folding button as it displays. While some others will just make use of the bottom bar and rotate the back button a bit, turning it into a folding button. So if it is the latter case, do remember to distinguish the two status in your prototype.
4.When the keyboard pops up, step aside, placeholder.
The placeholder in a search box can indicate the users what they could search. Therefore the readability can be enhanced if they are aligned middle. Yet when the user has already focused on the text field and the keyboard comes out, the common sense is that people will type from the left side to the right side. So it would be better for the placeholder to be on the left as well.
5. When the keyboard pops up, half of the contents will disappear
This is the point that will easily be ignored. When the keyboard pops up and the users haven’t yet input anything, it seems to be a good chance to do recommendations. So we can put in bunches of information for the users. But if we consider the keyboard as well, we will notice that almost half of the contents have been covered by the keyboard. On apple WWDC2017, there is a speech called The Keys to a Better Text Input Experience, which mentioned a concept called adaptive content. And this concept inspires us to squeeze the contents when the keyboard pops up, thereby the key important contents can be displayed on the screen.