The following translation from the copy finishing off the team, only to learn communication, G-off iDoc is to support collaborative product design artifact smart labels and cut chart .
Today I want to talk about UI design one of the most commonly used design elements - input field. Allows the user to input text entry field in the UI. They usually appear in forms and dialog boxes.
This article will give you the best Secret entry field as well as elements of design skills, with a look.
Input Field contains the following six parts:
1. Container Field
2. leading icon (optional element)
3. label text
4. placeholder / input text
5. Close icon (optional element)
6. Help text / error text (optional element)
1. Container Field
The size of the container should be proportional to the input intended by the user
Field in a single line, when the cursor reaches the right edge of the field, than the text automatically scrolls to the left input of the governor. The more users eyes hidden text, they validate the input of the greater difficulty. Ideally, users should see all the typing, without scrolling input fields.
Left: tight container. Right: an appropriately sized container
Field width is also required to meet user expectations - it conveys how much you need to enter the field. For example, if a form has a ZIP input field, and you know the ZIP should have five digits, it is best not to make the field too wide.
Containers should be easy to find
Should highlight the input field and instruct the user to enter information. You should have enough contrast between the vessel and the surrounding areas.
Users should understand at a glance the state of the field
Enter the text field can have one of the following states: default, focus, error and disabled. It should clearly distinguish between all states.
Enter the default and disabled status field
Do not designed to be a text field and a button similar
The visual appearance of the UI element plays a key role in explaining its meaning in the process. The appearance of an item allows users to understand how they interact. That is why let the input field to look like an input field, rather than buttons or any other UI elements, this is crucial.
Do not let the search input field looks like a button
The UI design of the application, the corresponding selected visual style container
Rounded or square corners should use it as a container? The problem is not the answer to a standard. You should choose the most suitable for your application visual style of the product.
2. leading icon
While in some cases, leading icon is an optional element, but it can create a better user experience by introducing the relevant icon next to the input box. Good icons help users understand the meaning of a glance the field (users do not need to read the label).
This requires a user ID input field
3. label text
Text label information for notifying the user of the text field of the request. Each text field should have a label.
Clearly labeled
The ultimate goal of the label is to help users understand at a glance the information needed. Therefore, the preparation of clear labels is always right.
Word Count
Label is not help text. Avoid long label; use simple, short and descriptive tags (a word), so that users can quickly scan your form.
The label should always visible
Label text, there are two common methods:
Align top tab - tab located near the top of the vessel.
Floating label. When a user interacts with the field, the label at the top of the container.
Both methods are very good user experience, you should choose the method best suits your style.
Label text should not be cut off
Users need to spend extra time to decode the meaning of truncated labels.
The label should not be more than one line of text
If you need additional information in the context of the field, consider using the help text.
4. placeholder / input text
Placeholder is the user interaction before the field to see the text. User input text is the text entered in the text field.
Note the use of placeholder text
Choosing the right placeholder text is very important. For example, if you require the user to provide the city, please do not name the city as placeholders. It will mislead users think is a placeholder text entry.
If necessary, to provide input format
Do not make users guess field which format they should use. Pre-specified information.
Left: This field is not clear what format yes. Right: placeholder provides the correct format
In some cases, it is preferable to use an automatic format - this field automatically adjusts the user-provided information (depending on the format). It makes it easier to verify the information in the form.
Focus state
You need to use visual effects to highlight the active field.
When the field is active, the cursor is always displayed. The cursor should indicating the current location of the user in the field. It is possible to prevent unnecessary operation of the user.
Providing the prefix / suffix
When the field has some measure of, prefixes and suffixes is effective. For example, the amount of input fields (prefix or suffix may represent a currency) or weight (suffixes may represent a mass units).
Set Default
Best to avoid static default value, unless you are absolutely sure the majority of your users (for example, 95%) would choose a specific value. Especially if the information from the field is important to you. why? Because people quickly scan a form, many people have ignored field value.
The only exception to this principle is the intelligent defaults. Intelligent default settings allows the user to quickly and accurately complete the form. For example, according to the user's geographic location data the user pre-selected country / region. However, you should still be careful to use these, because users tend to retain pre-selected field.
5. Close icon
Close icon is a small icon with powerful features - it can help reduce interaction costs.
'Clear' Close icon
This icon is displayed in a single click can help users to delete text field.
Note that the right side of the container "cross" icon. When the user clicks the icon, the input will be deleted
'Cross' or 'check' icon
If you use inline verification, you can use the close icon to notify the user valid / invalid input.
When a user provides incorrect information, you can also display an error message. Error messages should be displayed at the bottom of the container. Prior to fix the error, you should see an error message.
Note: Good error messages should not only explain the fact that the user enters an invalid; it should provide a context for instructions on how to solve the problem.
The eye icon
For input fields to collect passwords, you can display the "eye" icon to allow users to see what they've typed.
Voice input icon
Microphone icon indicates that you can provide users with voice input.
6. Help text / text error
Help text acts as a secondary element - it provides additional information about the input fields, such as:
- How to use the information provided by the user
- Information requirements (ie password setup guide)
In some cases, help text can be exchanged with the error text that prompts the user (i.e., providing an error message in the user see when erroneous input).
Help text can be multi-line
If there is not enough space to clearly describe the context, the long message may change to multiple lines.
Learning tool, but is not limited to a tool. G-off iDoc, efficient collaboration, from product development to, as long as a document, your team and efficient collaboration!
Related Reading:
2019 Best pop / pop-up box design with tutorials [20 cases]
illustration design are popular, 10 reasons to tell you how to enhance the user experience relied on
full-stack designer must have Mac software recommended