3

I want to show a character count beside a multi-line text field. Looking for any research or usability test findings regarding the location of that character count relative to the field (pic shows main options).

Four options for character count placement

Bottom right looks like the most common approach across the web, but is it the most usable?

Note that the field label will be to the left of the field by default, but responsively move to above the field on smaller screens.

  • This site has it in the bottom left for comments. – Franchesca Jun 27 '14 at 8:19
  • Since our visual system is wired to detect only changes out of the focal field, I think the important thing is to draw the user's attention to the counter when relevant. Nobody will notice the counter going from 399 to 400, but the change from black to red will be noticed. Maybe a warning (= orange) when 380 characters were entered is nice as well. – virtualnobi Jun 27 '14 at 12:47
  • I agree with you, virtualnobi, regarding focal field and changing the styling when running out of characters. Am planning to do this in addition to the counter, but still keen to optimise counter location if at all possible. – Formulate Information Design Jul 1 '14 at 3:15
1

The common practice seems to be to add it below. See e.g. the comment boxes on any Stackexchange site or Twitter.

The important part IMHO is that the number is visible to the user when the information is relevant. E.g. if your input field is big and goes below the fold, but you want to give the user feedback to add at least 15 characters (like Stackexchange does) then it's best placed at the top.

Contrary, if you want to display the maximum amount of allowed characters then there's no use to display it at the top if there's a chance that the user cannot see it anymore when she has entered the maximum amount. This is especially critical on small screens.

As an additional feedback it might be a good idea to change the font color, e.g. to red, as soon as the user hits the limit (again, Twitter does so). The change in color is a clear signal for the user that something's wrong.

1

Bottom is definitely the most common way that I've seen it displayed, and left/right is probably just dependent on the placement of your submit/save etc buttons.

You simply want to let people know when they are about to go over, or have already gone over. If they have gone over, you want to let them know how much they need to cut it down.

In this respect I think:

  • Changing font color of input text (red) and the font color of character count is a better solution than just disabling input after the limit is reached. This solves the placement issue, especially on a small screen because worst case scenario is that the user only sees the input field and not char limit - they will still see the color change immediately and realize that they are close to or over the limit.

  • Bolding or emphasizing the characters remaining number with respect to "characters remaining" text is the best way to draw enough attention to the moving character limit before a user starts input.

  • I do like the idea of showing negative characters when the user goes over so they can go back and find characters to delete or shorten, knowing exactly how much they need to cut it down.

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.