Feedback for invalid selection of the text

Question

In my application user is allowed to add objects in text (represented as HTML tags) by selecting a part of it. Something like in the rangy.js demo but the object is being added immediately after users selects the text:

However, there are some restrictions for selections, for example:

• selected text must be shorter than X characters
• selected text must not contain another, already added object
• selection must not go through multiple paragraphs

How to notify user that his selection was invalid? I can think of some options, neither of which appeals to me:

• do nothing (i.e. deslect the text and do not add the object)
• show an alert / a dialog with error message (which would be too distracting, I think)
• display an error message above the whole text or in top/bottom right/left corner of the screen
• a tooltip "attached" to mouse pointer saying what went wrong

Any ideas?

---

The whole context looks like this:

^{download bmml source – Wireframes created with Balsamiq Mockups}

Users can add objects in the Content.

Answer 1

1. Train your users Start by letting your users know how to use the system, and define some common notices. For example:

2. Explain the process Now, you can tell them that if they do something unexpected, they won't be able to do the task. You can also add a right click notice to explain EXACTLY what is wrong (and of course, tell them "right click on element for additional help". You could also use a snackbar or toast if needed, specially if you're concerned about color blindness (or you could simply use safe colors as well)

3. Let your users use your system You will probably use a highlight color for your selection, let's say green. If the selection matches one of the conditions above, you can change the highlight color to the appropriate error color, otherwise, the user will be able to perform the action

4. Reinforce knowledge Once users start to play around with your system , they might get one or two errors, but after a very short while, they will know what to do and how to do it . Depending on your system's needs and how playful it is, you can congratulate your user, tell him/her there were no errors and stuff like that . However, the important thing is to provide an adequate visual code to easy understand what's going on

Answer 2

Perhaps a div at the top or bottom that expands when an error has been detected, and collapses when a new selection is made or a close button has been pushed? Animation, color choice, and sizing would be key to ensure that it's noticed, but isn't overly obtrusive.

Answer 3

I wouldn't show nothing and prevent the user from continuing - That will only create confusion and frustrate the user.

• The best method for handling user errors is preventing them in the first place. You can't always do this entirely but usually there is something you can do, build some logic in your application that means the user won't have to deal with validation for common mistakes. There does need to be a balance here, with preventing user errors (systems perspective) and what the user will expect to happen, in your case not triggering a selection until its XX characters or more could be a good way of avoiding that error, but for the other ones (text must not contain another, already added object) I don't think that approach would work
• Explain your systems rules explicitly and clearly - talk in language the user will understand, the user needs to understand these rules in order to get past the validation. Ensure your copy does not confuse the user further.
• Forgive mistakes - don't make the user feel stupid, consider the tone and content of your error messaging.
• Display the error alert in the appropriate context, in most cases this should be as it's happening (visibility of system status) and where it's happening - inline, instead of displaying a modal or an alert at the end of a form.
• The user should not be able to break the system, always ensure there's a path for the user to recover from an error and get back to their original task or goal