1

enter image description here

How should I do this? Should the error replace the input description, should it go under?

Please give your opinions and reasoning. I would still like users to see the description, but I feel like adding an error under the existing description text makes it look overwhelming.

What are some other options?

2

enter image description here

Google material design states error text should replace helper text until the issue is fixed

1
  • Is this the same for iOS and other platforms? – Midas Feb 19 '19 at 14:19
0

I wonder if this is the best pattern to use for a field as it isn't recommended to use the placeholder as the label. I would suggest something like this:

Option 1

Automatically triggered tooltip Here the tooltip gets triggered automatically when the field becomes active and there's a "Star" to indicate that the field is mandatory. The bottom space is solely present to display the error

Option 2

Clickable tooltip Here the tooltip is less intrusive in nature. The user needs to click it to see the info. Again, a star to indicate that the field is mandatory and the bottom space is always available for the error message.

2
  • 1
    On mobile, width is limited, I don't see these options as viable for mobile. Have you got any other ideas? – Dominus Vilicus Feb 19 '19 at 6:34
  • You can move the labels to the top of the field and the tooltips can expand downwards. – Shreyas Tripathy Feb 19 '19 at 12:12
0

If you place a label above the field, you can put the input description inside of the field as a placeholder text.

A label above the input field makes it more easy to scan for the users too.

If you use proper whitespace you can integrate the error message without making things jump etc. and make it less "overwhelming".

enter image description here

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.