"Out of the box." Efficient text input frame design for mobile phone

The text input of mobile phone is restricted by the usage environment, network condition and the condition of the equipment itself, so the improvement of the user experience becomes a commonplace topic. Such as: has been in the improved input method, the new input method of exploration (voice input), and even try to do all kinds of ways to avoid input ...

Text input itself is a process from scratch, is to allow users to fill in the blank input box process, this article to avoid some usability testing has not been validated by innovative design, from my daily accumulation and practical experience, with a text input box as the design object, The two dimensions of helping the user to understand and simplify the user's operation are explored to find out whether these seemingly simple blank strips grow in great wisdom.

"Guiding words"--helping users to perceive

Mobile phone interface space can be described as an inch of gold, there are few blank areas. The user in the face of a blank area of the interface will often create a sense of urgency and even a bit overwhelmed. If you add some "guiding words" (i.e., guided descriptive entries) to this gap, users can quickly generate cognitive activity and quickly react and judge what they are going to enter.

In terms of landing interface design, users who face the interface without a guide may waste time thinking about what his username is. Is it his mailbox or his random nickname or his cell phone number? and how many of his codes are? Even wasting time on the writing format of the user name. The user with the second interface will be the first time to know the flashing cursor to enter the mailbox, the Password box in the "small point" is also the image of the user's password to inform the display of the form and length. The Visible input box to add the necessary guide words can improve the user's input efficiency.

The "guide words" are categorized according to the use function and the use scene as follows:

1. Templates for entering content

Provides a template for users to enter, and users don't have to spend more time thinking about how to enter them.

You@website.com is a common template for email addresses that can echo the user's mental model, and users can respond quickly.

2. Pieces of content to be entered

Some of the input content is often used or reused by the user, or is conventional, then this part of the content directly as a guide word, displayed in the text input box, on the one hand, you can prompt the user to enter what content, on the one hand can omit this part of the input operation, and thus improve the input efficiency.

"www." and ". com" and so is the user's knowledge of the URL protocol, in the input box to increase the guide to give users a visual reminder here is to enter the URL, and omitted the input of these characters.

3. Description of input content

Inaccurate user input will result in inaccurate operational feedback, and a brief description of the input needs to be added to reduce the risk of this misuse.

If you do not prompt to enter the name of the merchant or place, the user should not quickly find out what the frame should be entered, the user finally completed the input, but entered a wrong keyword, get is no results, it is difficult to imagine how frustrated users.

4. Input induction

In a multiline text input box, although there is a cursor flashing prompt user input box has been activated, you can enter, but in order to eliminate the user in the face of large gaps in the tension will also increase the boot text, the user input instead of the point back button exit.

"Say something ..." "Roar a sentence" These guide words will let the user have the affinity, causes the user to resonate emotionally, stimulates the user the operation desire.

"Additional controls"--simplifying user actions

To make text input more efficient, text input boxes can be associated with controls that simplify or facilitate user editing of input text. Some of the additional controls commonly used in the input boxes are summarized as follows:

1. Unit controls

Some specific conditions of the input itself is a unit, such as the recipient's e-mail address, the receiver's phone, the name of the friend. Converting each unit into a control button makes it easy for the user to edit the unit information.

In an input operation that adds a recipient, each recipient name is entered in one unit, separated by semicolons, and each unit text becomes a control button when the input box receives the focus again. Editing can be edited on a single unit, or delete, to improve the overall input efficiency.

The style of the unit control needs to be designed with a specific input, which can be either a button shape or another form. The position can be inside the input box or externally, depending on the situation.

2. Delete control

Typing difficult on the phone, delete large paragraphs of unnecessary text is equally difficult, in the design needs to be based on the user's use of the situation to fully consider this requirement, so that the input box to attach a key delete button.

The Address entry box in the browser's address bar often requires the user to empty it and re-enter the new address, so when the existing content's address bar gets the focus, a purge button is added to the input box to make it easier for users to quickly empty existing content and start new content entry.

In the process of writing Weibo, users often enter a text after the feeling is not appropriate, you need to re-enter, at this time, the purge button in the input box allows users to quickly clear all the text currently entered.

The delete control is located at the end of the input box. In a Single-line text entry box, to conserve space, the delete control can be hidden and associated with the text selection.

3. Reminder controls

There are many restrictions on the number of words entered in the mobile phone, such as the limit of 160 characters per SMS, the 140 characters of Weibo limit, and so on, users often do wrong operation because they don't know the restriction condition or forget the restriction condition, and waste time. Then add a reminder control in the input box to remind the user how many characters are currently available to enter, to avoid user input exceeding the word limit.

The control is embedded in the right hand of the input box, and the input content itself in color or font size to make a distinction between the design, not distracting, disturb the user's input process.

Conclusion:

Design Mobile text input box, the user needs as the starting point, combined with the use of scenes, in the blank input box style to increase the guide word, add some small control of the design means can help users to the content will be entered a better understanding and grasp, reduce the user input process in the error, It is convenient for users to edit and modify the input content, so as to improve the efficiency of user input.

Of course, these "out of nothing" design strategy, in the implementation should pay attention to the style of the display and interactive details, as far as possible to be concise, low-key, because the input text is the user in the input process needs to focus on the object, do not let the complex design disturb the user.

Article source: Baidu Mux