Design principles-Control balloons (balloon tip)

[Copyright notice]: The copyright belongs to the author Alite all, reprint when please use the hyperlink form to indicate the article original source and the author information and this statement: http://www.alitedesign.com/

Balloons (balloon tip)

Summary of issues

A balloon tip (Balloon) is a small pop-up window that notifies users of non-critical problems or that the control is in a particular situation.

Instance

Figure 1

Note: A balloon tip consists of an icon, a title, body text, and all of these parts are optional. Note: When a user attempts to commit an operation, any outstanding issues must be handled by its owner user interface. Note: Balloon hints are usually used with text boxes or other controls that use text boxes to change values, such as combo boxes, list views, tree views, and so on. Note: Maintain consistency between controls. Balloon hints no longer apply when inconsistencies are found. Note: If other types of controls are already well bound, balloon hints are no longer needed to give additional feedback.

When to use

Note: This information describes a problem or special case. Note: When you are entering or the owner control loses focus, the problem or special case can be detected immediately. Note: These issues are not critical. Note: For those special cases, it is legal, but it is probably not what the user expects. Note: This problem or special case can be described in exact language. Note: This information does not describe the control the mouse is currently pointing to. Note: This information is related to the user's current activity. By default, the balloon disappears after 10 seconds. Note: This information has a single, determined source.

To use before the input occurs:

1, such as CAPS LOCK key (Caps Lock) Open state, the balloon tip of the password box (see Figure 1). The owner control is in a state that affects the input, and the State may not be what the user expects, but the user may not be aware of the impact of its input. When special cases occur (such as exceeding the maximum number of input characters or opening caps locks), warning with a balloon tip at the first time can prevent a user from being frustrated. It does not change the input focus without forcing the user to operate while giving the feedback information. This is important because these special circumstances may be intentional. These balloons are especially important for password boxes because users can only get very little feedback when they enter in the Password box. This type of balloon tip has a warning icon.

2, enter the hint: only accept the digital input text box, it is best to give the prompt before the input when the focus is moved to the text box, the balloon prompts (see Figure 2).

Figure 2

This is used to report balloon hints for non-critical user input errors. Using a balloon tip to display an error message does not change the input focus, even when the owner control has input focus. To resolve the problem, users may need to make changes or re-enter them. However, if the owner control ignores incorrect input, the user may not be able to modify it at all. Because the problem is not critical, you do not need to use the error icon.

Use after the input occurs:

1. Pop-up balloon prompts when the user tries to exceed the maximum input length. In the following Figure 3 example, a balloon hint indicates that the user is attempting to exceed the maximum input length.

Figure 3

2, when the user entered invalid characters pop-up balloon prompts. Of course, it is better not to have such a limitation because it will weaken the security of the password. To prevent information disclosure, the balloon tip should refer only to information about valid password characters that have been written to the document. In the figure 4 example below, a balloon hint indicates that the password can contain only numbers.

Figure 4

3. For critical, short text boxes, you should consider displaying balloon hints for new users when attempting to exceed the maximum input length. In the Figure 5 example below, a balloon hint indicates that the user attempted to exceed the maximum input length.

Figure 5

Note: Do not use balloon hints as additional information for displaying controls, but consider swapping static text (static text), informational hints (Infotip), progressive expansion controls (progressive disclosure), or prompt text (Prompt).

Solutions

How to interact: When a user clicks a balloon prompt, close the prompt without displaying any other UI or effects. Unlike notifications, balloon hints do not have a close button. As shown in Figure 6, it is not a balloon tip.

Figure 6

But the Ali landing interface uses a very pure balloon-like hint, as shown in Figure 7.

Figure 7

Most of the above is the form on the control balloons (balloon hint) of the application, now give two in Taobao shopkeeper reputation and other Web site comments on the application, as shown in Figure 8.

Figure 8

The trigger condition here is when the mouse hover, triggering the balloons (balloon-like hint). Displays information about the reviewer. The application here is informational, but it is in the form of a balloon-like hint. There are similar hints in Amazon's product reviews, but it's not a balloon tip, where it carries more interaction and text chains. As shown in Figure 9.

Figure 9

Calm down to find, found that E-commerce site using control balloons (balloon hint) of the form of a lot of, such as the ebay home page of the two areas are reflected, such as Figure 10,11.

Figure 10

Figure 11

This image of the hint of a large number of applications in the Web interface elements, but also reflects its flexibility and practical. As a help and helper hint. Control balloons (balloon tip) does give us a lot of good user experience.

Accessibility Features:

Only balloon hints related to the user's current activity are displayed.
Make the hint text as concise as possible. This is easier to read for users with poor eyesight and minimizes interruptions caused by screen reading.
Re-display balloon hints when a problem or situation occurs again.

Text copy:

The title uses a clear, plain, concise, exact language as the title text, briefly summarizing the input questions or special cases. The title uses a piece of text or complete sentence without the end punctuation of the sentence. The title uses the sentence capitalization style. The title uses no more than 48 characters (English) to fit the needs of localization. The first sentence of the body text should state the problem or situation in a manner that is clearly relevant to the user. The second sentence of the body should state how the user can solve the problem or restore status. The body explains how to resolve the problem or restore state, even if the explanation is obvious, but omit the problem description and the duplication between the solution. The body uses a complete sentence containing the end punctuation of the sentence. The body uses the sentence capitalization style. The text uses no more than 200 characters (English) to fit the needs of localization.

Summary：

In general balloon-like hints, in the form of the application is very much, first of all, it can allow users to participate in the interaction can not participate, and not mandatory. Display time can be controlled, and can be set to finish processing errors disappear, which is the flexibility of the form hint, do a good job. Because it is floating over the page, it can save a certain amount of space. It is also because it is floating overlay on the layout, the hint effect is more obvious, more easily arouse the user's attention! Although the article has been the balloon hint of each state and use of the scene to do the most detailed description, because the example of the author did not find more particularly representative, so that the analysis of the effect of the article is not obvious, It is hoped that more examples of resources will be given to readers who have thought and research on balloons (balloon-like hints). Thank you for your support, I will continue to collect more and better examples and ued friends to share!

(Original source: HTTP://WWW.ALITEDESIGN.COM/ARCHIVES/67)