User Experience Design: A text box designed for Chinese

I have always felt that the text box this thing, in the country that has input method, is the cup of our lazy people, the automatic completion of the text box function, in conjunction with the input method, is simply a chicken. Switch Ctrl+space again and again, whether have let you collapse want to knock bad keyboard?

The above picture has obviously made us feel three questions :

1. The automatic completion of the input method is blocked, I can't see.
2. Use the keyboard ↑↓ key can only switch the input method within the word, you can not select the automatic completion of the options. Want to use but not to use.
3. When you are annoyed with the intention to use the mouse to point to the automatic completion of the list of text, the cup has occurred, you find that you point, in fact, nothing. Your text box becomes a blank. (in Chrome, a variety of Chinese search engines have this problem, the cup is AH.) ）

Note: After the author tested a variety of search engines in different browsers of the rendering effect, these three problems occur in the same probability, but in chrome these three problems are very obvious. (Is there a problem with chrome rendering?) ）

On question One

There seems to be no solution under Chrome, and all search engine performance is as effective as the picture at the beginning of the article.

ie, most of the search engines have adopted a kind of stupid but the most effective way: Only text is fully entered into the text box, automatically completed before appearing, so as to avoid the problem of occlusion.

In FF, most search engines are also used in the same way as IE, Hidden automatically completed. of course, there are oaf: Baidu and Youdao, under the FF still still blocked.

About question Two

Because in IE and FF most search engines use the method of appeal to avoid the emergence of input methods and automatic completion, so this problem is mainly in chrome. From the actual test found that foreign search engine performance is better.

In chrome Google and Bing search, if you use the ↑↓ key, you can select the automatic completion, of course, your input word selection is also switched.

Of course, there are oaf: Chrome all Chinese search engine, as well as FF under the Baidu and Youdao, still can not use the ↑↓ key to choose automatic completion.

About question Three

OK, I will directly say oaf, this time the list is still Baidu and Youdao. But Baidu this time can be gratified: Youdao bottom. Youdao in the FF and chrome under the mouse click Automatically completed, the text box will automatically disappear. Baidu only has this problem under Chrome.

The explanation of these questions is not that I strongly despise Chinese search engines, on the contrary I prefer them. But the question we need to consider is whether we should take a more realistic view when designing text boxes: All Chinese users enter text boxes with input methods. Our operation is more complicated than the English user.

In the input, the Chinese user has a translation of the steps, the keyboard letters translated into Chinese characters. This is also the reason Chinese users prefer mouse operation, because the input of the work is too complicated, although our input method in recent years has exceeded the development, but for users, this threshold exists. At least my parents want to use computer to type, they have to learn pinyin.

So, in order to make the user less pressing once ctrl+space, let the user operate smoother, in the text box design, we must be more careful and cautious. My personal summary has the following several methods.

Disable IME

If some text boxes only allow the user to enter alphabetic symbols and numbers (such as the "username" of the login Interface), disable the IME.

NetEase mailbox Landing interface on the use of this method, the Web interface to achieve the means is very simple, just add in the CSS code: ime-mode:disabled;

Of course, many products at present the landing interface has been the same processing, may wish to dig more products within the text box. such as the validation code input box.

Response is provided after user input

Only the user can input text into the textbox to provide the response, this is mainly for some automatic completion and Instant Search (input after automatic search) function.

Windows7 's Explorer Search box is an instant search, but it does not start the search when the text is still inside the input method. This design makes the interface more concise and easy for the user to understand.

Provide the correct keyboard feedback

such as Google in front of chrome, or support the ↑↓ key to choose automatic completion, so at least to ensure that, in the use of input method, the user's some keys are still valid.

Of course, I have also seen a very stupid interface, he to enter the key perception error (enter key in Input method is commonly used in English letters), screenshots I can not find, but roughly.

Note: The image below is my PS to illustrate the problem case (because the case is not found), does not represent its actual situation as shown in the figure.

When you press ENTER, the system automatically responds to the default "login" button, but in fact I just want to enter the email address into the text box. Obvious keyboard feedback error.

Response is provided after user input

Only the user can input text into the textbox to provide the response, this is mainly for some automatic completion and Instant Search (input after automatic search) function.

Windows7 's Explorer Search box is an instant search, but it does not start the search when the text is still inside the input method. This design makes the interface more concise and easy for the user to understand.

Try to use phonetic recognition

There is no doubt that pinyin recognition can effectively help Chinese users, even if he did not use input method, but also may help him correct some Chinese character input errors.

The best Chinese text box ever?

I put this to the QQ Mailbox Letter page Recipient text box, for three reasons: no Input method, block structure, pinyin recognition. If you add a Chinese name to the contact person (Mars text is no way), try to enter 10 people's email address, how fast do you? I'm telling you, I only need 25 seconds.

As can be seen from the diagram, this text box is to support phonetic recognition, at the same time, he adopted a block structure, the mail address is deleted or added to the whole block.

Undoubtedly QQ design is worth learning.

The worst Chinese text box ever?

I'm going to give this award to Sina Weibo's Landing box, of course, they've improved the design recently, but this counter example is worth the lesson. (from fenng)

What if you have input boxes for input methods in this diagram? That's enough, OK, I think this is a classic example of text box design, and welcome to the cult of learning.

Written in the last

A text box is a very detail thing because he belongs to a valid control for user information collection. Our Chinese users deserve to have their own special text boxes.

In the design, we should take into account the user's input method state.

The test in this paper is used sogou Pinyin Input method Test, if there is not correct, please correct me.

Notes Supplement

The Search engine text box reflects the appeal question, according to the message of Jane's opinion. I also agree that, perhaps, this can be done through the input method for integration.

There is no such possibility, the input method can read the list of automatic completion of the search box, so that we just enter the time to press a toggle button, it can be intuitive to use the automatic completion of the function.

The following is my invention of the CCAV search brand