0

Lets imagine we have a textarea and a send button. The textarea contains a message that's sent by clicking on the button. When message is empty or exceeds the limit (e.g. 1000 characters) we should prevent a user from sending a message. So we either can hide the button or mark it as disabled (e.g. make it grey). We also implemented an animation on the button that slides it outside of area and simultaneously changes its opacity from 100 to 0.

So what I proposed is: - hide this button with that slide animation when textarea is empty (or becomes empty) - hide this button with the same animation when textarea contains too much characters. Thus both cases prevents user from sending a message and we have identical effects (I mean hiding the button) when sending is unavailable

What other folks proposed: - hide the button with slide animation when textarea becomes empty - make this button grey and disabled when amount of characters exceeds the limit

Is there best practices in my scenario or it actually doesn't matter and I am just being meticulous?

Improve this question
2
  • Honestly, this seems very over-engineered to me. What benefit is the animation? Also, what happens if people just press 'Enter' to submit and don't use the button at all? (Because for accessibility you should be able to submit things without physically clicking the mouse cursor on a button). Just disable the button, or just display an alert if you've overfilled the container and try to submit it (a bit like what happens with comments in Stack Exchange posts such as here).
    – JonW ♦
    Commented Jan 31, 2019 at 10:55
  • The question is, should there be multiple effects like hidden and disabled state. Or following the best UX rules button should have same effect for all cases. E.g. only hiding it or only disabling it. It seems to me like having multiple effects is a bad idea. As for me animation benefits by having a cool effect of disappearing that really looks very neat. It came from my designer. So I have to stick with animation anyway :( Btw it doesn't conflict in any way with sending message by simply pressing enter.
    – deathangel908
    Commented Jan 31, 2019 at 10:58

3 Answers 3

Reset to default
12

I would never suggest hiding a button. Disabling it, yes, but don't hide it altogether. If it's hidden then it's not clear to users why the can't submit the form. They'll go hunting for the button but not find it. If it's disabled then it's a visual indication that it's not currently available to use, but that it can be made active through some user action. (In this case populating / reducing the content of the field).

A button is also good feedback to the user as to the purpose of the page / area. "Ah, there's a button here so that means I can submit some content". If the button doesn't even appear until they start entering content then you lose that hint too.

Also, it should go without saying, but you should also be providing some messaging in place ('please enter content in the field above' / 'Content must be under 1000 characters'...) then that's enough to inform the user what they need to do.

Improve this answer
3
  • I'd go as far to say that even disabling the button is not a good idea as the user would wonder why it's disabled all of a sudden. Most users wouldn't care or notice a message that's under the textarea (the "characters left" under this comment textarea being the prime example). Better have the button enabled and pull the user's focus on the message when they click on it. Use an animation/color change/font bold-ing here. PS - I absolutely love how StackExchange changes the color of the message at different stages in an attempt to get the user's attention while typing.
    – Shreyas Tripathy
    Commented Jan 31, 2019 at 13:05
  • @ShreyasTripathy Yes, I'm generally not a fan of disabling anything as there'll always be situations and users who have issues understanding why. However, if the disabled state is intrinsically linked to the field (such as a T&Cs confirm button being disabled until the adjacent checkbox is ticked) then it's slightly better. Overall it's better to find a method that makes it clear to the user before they even want to complete that there is still some action needed on their part before confirming.
    – JonW ♦
    Commented Jan 31, 2019 at 15:06
  • True. If there's clear context for why the button is disabled, then it should be fine
    – Shreyas Tripathy
    Commented Jan 31, 2019 at 17:49
5

In line with JonW, I also recommend keeping the button consistently placed and visible regardless of status, with helpful messaging. That is straightforward and informative.

You might also consider adding a character countdown indicator with relevant messaging. I don't have data on its effectiveness, but I've noticed this method in a growing number of places.

Twitter's character counter might be a bit over-engineered for your needs, but it's one example (attached). I've also attached another example from react-textarea-count.

Twitter, initial character count

Twitter, character count exceeded

Character count gif, from react-textarea-count

Improve this answer
2

I totally agree to JonW answer, and just to add to this (I can't comment yet): it would be really beneficial for the user to help them control what they do, you can do it by adding a character counter under the textbox:

show 0/1000 under when it's empty, and 1056/1000 when it is 56 characters too long. In this scenario users always know how many characters they must remove.

Improve this answer

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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