2

All my inputs have the options of passing as a prop a "hint", which is a text to make clear to the user what that field is about, how to fill it, etc. I decided this hint shouldn't always apear on screen, only when the input is focused, because in some screens I'll have large forms, and if all fields have a hint, the screen will be polluted.

Now, the problem I am facing is regarding spacing. As you can see in the image below, I have a small form with two fields that have a hint: the last two. The problem is that for the first one, the first input keeps a space prepared for the hint, which makes the UI weird because seems like things are misspaced.

I have considered expanding the hint from heigh 0 to auto to make it visible and not have any additional space when it's not visible, but for larger layouts where I'll have 4 inputs side by side with 4 lines of inputs, that'll cause a great shift in the layout, making all fields shift down by the height of text of the hint of an upper line input.

So, I am searching for better layout strategies.

Form

Improve this question
7
  • Not related to your question, but as this is a UX site.... your colour choices make this form almost unreadable, due to lack of contrast. Black boxes on a black background, with off-black borders and dark grey text... Modelled on the Disaster Area stunt ship, perhaps? Commented May 6 at 13:47
  • Oh, it's because I use an extension to darken my screen and the image quality also doesn't help. Commented May 6 at 14:00
  • 1
    @BernardoBeniniFantin, the image quality doesn't help – it even can't help more. You provided the screenshot as a losslessly-compressed image, so we see exact content of your screen. Commented May 6 at 14:10
  • Also, consider rewording “Redefine your password” to something like “Change your password”. Commented May 6 at 14:10
  • “I decided this hint shouldn't always apear on screen, only when the input is focused, because in some screens I'll have large forms, and if all fields have a hint, the screen will be polluted.” So you want to have a screen full of unlabelled fields? Commented May 6 at 14:11

2 Answers 2

Reset to default
2

Some error messages and long help texts will need more lines, certainly on mobile. So reserving space for help text underneath each field isn't doing any good. The problem described isn't an actual problem though. Use the same amount of space around fields and help text and error messages. If you keep the same margin between the help text and the next field as it is between fields, it keeps the form functional and all elements evenly close. I freely took your design and added an example for the login field.

enter image description here

You may like this or not, but it's functional and still well formed. It's normal for an artistic person like you to look at the whole composition. But users don't look at it like that, they scan the form, only interested in the fields to fill in, or diving into each field of the form directly. They don't look at the composition like it's a piece of art. You're a designer and design is functional in the first place. Make it a piece art if you will after it's functionally correct and helping your users at its best.

Improve this answer
3
  • 1
    Thanks a lot for the help! In fact, the hint/error message is always present on the screen, so white space in between fields is the height of the text (whatever the number of lines is). And that was actually a reason for greater concern for me because with huge texts, the space could get too big and varying between fields. But I guess there's not much I can do. I'll leave the space so it's functional first. Thanks! Commented May 6 at 12:08
  • "Ugly vs. neat" does matter, and well beyond the perception of artsy appeal: en.wikipedia.org/wiki/Aesthetic–usability_effect Commented May 9 at 16:42
  • Indeed, aesthetics are important in a design. By functional I mean as long as it helps understanding and using a product. Artistic choices that add nothing to that should be applied afterwards as long as they don’t undo it of course. Commented May 9 at 17:43
3

The easiest way we've used to address the issue you're discribing is always reserving the space required for hints or error messages underneath the text fields — even if a field will never display either.

That creates a clean layout cadence, and fields never need to shift to make room for them in case the space is not reserved.

What are reasons that this approach wouldn't work for you? If you do have fields of 4 ✕ 4 fields, does the average and/or minimum screen size that your users use (as per your analytics insights) not accommodate those easily anymore?

I'm not quite sure I understand why you'd prefer to move the fields closer together. But would love to hear more. :)

Improve this answer
2
  • 2
    Well, maybe I didn't make it clear, but it seems to me that this space on some fields and in some not makes the layout ugly. It's just about that. Commented May 5 at 23:33
  • 1
    Oh, I totally got that detail in your explanation, Bernardo. Taking your simple example in the image with just four fields, though, I can see error state for the two fields that do not have space beneath them: the user enters an invalid current password, and/or the user enters a new password does not contain both numbers and letters. Displaying the error in either cases would already shift the fields around in this simple example. Hence, we've been reserving the same amount of space between all fields, just in case. And that creates a cleaner design, overall. Commented May 9 at 16:27

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.