0

This is not a duplicate of this question since that one is about searching.

We have a simple form containing one text area and a submit button.

mockup

download bmml source – Wireframes created with Balsamiq Mockups

The user has to type at least 100 characters before she can submit the message. How can we inform the user about this restriction?

Sure, we can inform the user by placing the restriction below the field name. But, since users tend not to read text, we have decided do disable the button until at least 100 characters have been typed. The user still needs to know about this limitation.

How can we solve this in a user-friendly way?

2

Include the warning ON the disabled button, change the text to like "Send message" at the moment they reach the minimum characters and enable the button.

3

Requiring a certain amount of characters is not particularly user friendly. Before enforcing such restrictions it might be smart to look for alternatives ( against spam or poor submissions, I assume?)

There could be many instances of valuable feedback/text that are shorter than 100 characters, or people being forced to re-write text just to meet the 100 character requirement.

Disabled Send button: This could introduce doubt, making the user wonder why it is disabled. An improvement on AsheraH's solution would be to inform the user BEFORE interaction takes places. This reduces interaction effort. You could attach the amount of characters to the button unlocking. enter image description here

  • 1
    I liked this idea and tested it out on a few colleges down the corridor. Unfortunately, none of them did agree. They could not tell why, it was just an initial feeling so more research is needed. – Ilias Bennani Sep 21 '16 at 6:48
  • This suggestion combines 2 elements: information and interaction. TBH I prefer to always keep those seperated as it feels "off" and is often times confusing. A tweak would be to put the message underneath the button, or show up in a tooltip, but in that case the initial problem resurfaces: The users has to commit an error, before being informed on how to prevent the error :') – Tom.K Sep 21 '16 at 6:50
2

Disabled the submit button until the input area has at least 100 characters. Including a label next to the button simply saying something like "(100 character minimum)" is enough for the user.

The button being disabled is going to tell them something is wrong, and the label is giving enough information to let them know what that is.

  • Can I put a tootip / title tag giving the same information? When the user hovers over the disabled button, the tooltip will be visible. – Ilias Bennani Sep 20 '16 at 10:23
  • 1
    A tooltip would work for sure, but it requires the user to put in extra effort in order to see what they're doing wrong. Having the label might not LOOK quite as good, but it is definitely more user friendly. – fletch254 Sep 20 '16 at 10:29
  • 3
    I'm not sure what interfaces you are designing for, but remember that many (e.g. mobile, tablet) may not have 'hover'. Also, your user may visually realise the button is disabled and wonder why before they hover. I'd find a way of making the minimum character count clear without requiring any hovering. – Paul S Sep 20 '16 at 10:56
  • @Paul S great point about the hover on mobile. Something that a lot of people (including myself) forget with things like this – fletch254 Sep 20 '16 at 11:01
1

Copy StackExchange

A similar restriction exists on SE for the comment field. I think it is a high quality solution to your problem and it also aligns with some of the design decisions you've already made.

SE comment length restriction hint

Information

"Sure, we can inform the user by placing the restriction below the field name."

The field hint describing the character length restriction —"enter at least 15 characters"— is set under the text-box.

Error prevention

"... we have decided do disable the button until at least 100 characters have been typed."

Although The button isn't styled as a disabled control, the user cannot submit a comment until she meets the minimum character length.

Attention

While 'disabled', the button is given a secondary function i.e. to highlight the restriction. When the user clicks the button, the restriction flashes, drawing the user's attention and ensuring the user reads the text.

Progression

The restriction also updates as the user types letting her know when she has met the minimum character length.

SE updating comment length restriction hint

I think this updating hint could be improved by including characters after the number. If it's the first time the user is seeing the hint, it may take a moment for her to understand what the number represents.

1

A wireframe suggestion

Hi guys,

I would suggest to indicate the 100-character restriction:

  • first, by marking a grey area that fits exactly 100 characters
  • second, by explicitly writing that '100 characters required' next to
  • a Submit button that will remain disabled until 100 characters are reached.

Hope this helps!

Cheers, Nikos

  • I like this idea as well, but how do I determine how much space / pixels = 100 characters? Wouldn't this apply only to monospace fonts? – Ilias Bennani Sep 21 '16 at 10:32
  • Good morning Ilias, I believe that the grey area doesn't have to be precise. This means that you can measure how much space 100 characters would approximately occupy and show that to users. In my opinion, it would still give users a good indication that there is a required area to be filled in before submitting. Cheers, Nikos – Nikos Antzoulatos Sep 22 '16 at 7:19
0

Put the warning IN the box in greyed out ghostly writing "Please write enough to at least fill this text box".

This writing will disappear as soon as the user starts typing.

Match the size of the text box so that it takes 100 characters, before it starts to scroll.

(Reasoning: trying to guess what constitutes 100 characters is difficult. Users will often focus on just the one point on the screen, particularly in a familiar operation and will ignore written information at the edges of their focus)

0

You can always use the method seen right here on Stack Exchange. Not only does it let you know if the current comment is too long or too short, it also gives you an exact character count as you type.

If you hit "Add Comment" with an invalid character count, it flashes the text counter at you to draw your attention to it. Additionally, the color gets progressively more "aggressive" as you get close to the character limit to warn you you're about to run out of space.

Personally, I'd probably change the color of the "nn more to go..." text, but either way it does a pretty good job.

Several screen captures of the comment box on Stack Exchange, illustrating the above points.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.