How to warn a user they are approaching the character limit for a text input field with a soft maximum?

Question

I'm writing an internal web application to generate subtitle text for videos. Part of the requirement for this project is that each line not exceed X characters, except where circumstances warrant.

I don't necessarily want to prevent the user from entering more than X characters, but I do want to show them that they are approaching (and then possibly exceeding) that number.

Ideally, they won't normally go over the limit. The application is to be used in-house by those who have received some level of training in best practices, or who have done this type of work before. I attempted to bring my own experience to the project, as I have done this sort of work before myself.

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

Method 1 - Counting Up

I implement a character counter beside the text input field which counts up from zero, restyling to show that they are approaching the limit, and then again in some dramatic way to reflect that they have gone over the limit.

Method 2 - Counting Down

I implement a character counter beside the text input field which counts down from the limit, and then restyles to show that they are going over their limit by n characters (say, by using negative numbers)?

Method 3 - Purely graphic cues

I implement a progress bar underneath the input field which fills to the soft maximum number of characters and which then restyles to show that they have gone over the limit. In this method, the exact number of characters by which they have gone over can be concealed from the user.

I have a strong preference for the progress bar, or for counting up, mostly because captioning is extremely cognitively taxing and I don't want the user to be overly distracted by exactly how many characters they have left until it actually becomes a problem. Furthermore, after 2 or 3 inputs, the user has developed a good idea of how much they can type, reducing the need for this warning mechanism.

^{download bmml source}

Additional:

Regarding Ben Brocka's comment: Twitter and SE's comment counter is exactly what I don't want to emulate, actually. In both, you enter only one message which you can craft carefully over a few minutes. In that circumstance, having a counter is appropriate because you have a strictly-enforced maximum, and every single character matters. In my scenario, users have mere seconds to enter text and shouldn't (really, ever) have to drag their eyes across to a numerical counter. My case is also different in that it tracks a soft maximum: we don't really care if it sometimes goes over by 3 characters.

Additionally, the only reason the style change of SE's comment box character counter is obvious without looking directly at it is because it contains the words "characters remaining", making it a fairly large area whose colour change can be perceived without looking at it directly. I should have mentioned originally that the layout of this page will probably end up being fairly tight.

Edit 2: Now that I think about it, a large number beside the input field (the red 16 in my mock-up) is probably perfectly easy to read.

Answer 1

Something I have seen code syntax highlighters do is to indicate long lines of code by changing the color of text that exceeds the limit, something like the below:

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

The advantage of this method is that it takes up no additional space. However, it doesn't give any indication of how close they are to reaching the limit, but I think users will quickly get a feel of how much they can enter before reaching the limit.

Answer 2

Since the soft limit seems to be based on available space and not an actual character count, why don't you just display that visually? Give them a full text box to work with and an overlay that displays the limited space.

Answer 3

the text field should be wide enough to accomodate the recommended amount of text, and no wider.

i'm assuming that the limit is meant to be about equal to the width of the video player, so style the input field so it matches the font size and typeface of the displayed text, and make it the width of the video player. when the text starts overflowing the entry field, the user will know they've gone too far

any cues like colour or progress bars are going to have to be learned, and a countdown will make it hard to communicate that it's a soft limit. limiting the actual size of the input is immediately obvious.

Answer 4

let me start with saying that the count down is wrong from my point of view. The problem I see here is that you count down to 0. This would suggerate the user that he reached the absolute limit. As you just want to indicate a proposed max. that's not what you want.

I like the other two ideas - and find the progress bar interesting, though it might e quite unconventional (which doesn't mean bad :) Make sure you inform the user about the suggested character max. in form of a static label above the entry field. indicate the characzers already used and put them into relation - in both directions - even if the user goes over the limit. In case of the bar, the scale should still grow when more characzers are used as recommended.

In general, I think use of colors would make perfect sense here

Answer 5

I've used a progress bar in this type of situation with mixed results. Most people seem to understand the purpose of the progress bar, but they are upset when it's not exactly precise due to technical limitations of measuring variable width fonts. Also, progress bars have a hard limit metaphor built in.

Answer 6

JavaScript to display number of available characters left as you type?, follow Twitter UI and denote a "soft" exceed with a "-" sign.

Blah, this is me typing

(-6 characters, too long!)

Answer 7

Why not a simple text?

Suggested maximum amount of characters left (x) (i)

The x represents a counter, and the (i) represents an icon that, when clicked, gives more info and a well designed/worded example of why this soft maximum is there. Make the counter number green when OK and orange when going over the soft limit. That's not as dramatic as red, but still grabs attention.

I have a feeling you/we are maybe trying to over-engineer this one. Especially since you mention on the job training. These are people (I imagine) that have some affinity with the work they are doing (writing/typing subtitles).

Answer 8

Have you thought about providing commentary as users type? When users hit or approach the soft limit, perhaps a small, unobtrusive, yellow callout with:

"be careful, this caption is probably too long to fit on the screen"

If they continue onto an unreasonable level of characters:

"this text will not format on screen correctly, if possible, cutting back is advisable"

Ideally you'd want the callouts to fade away if the user continues to type, perhaps changing the input box border to yellow/red to indicate the issue, and show the callout on a long hover of the input box.

The advantage of this is that you're upfront with users on why this is an issue, so even an untrained user will understand not to caption too long unless absolutely necessary. It also makes it clear that you're only advising the expert user, rather than dictating their behaviour.

Answer 9

I thought of the coloured text idea before I read Na7coldwater's answer which was exactly that - a text colour change in the input box would be real nice - ** I really liked Na7's idea**.

I think something we use in everyday life and in-grained into us might be good solution.

Traffic lights or stop lights depending on where you're from.

I DID NOT rip his/her idea off and you have to trust me on this, it just popped into my head before I saw his/her answer which is why I bothered to spend around 45 mins answering this question!