When to prefer Aesthetics in Form?

Is there some instances where form design is preferred?

I already searched about the topic and the most common is: “Base the input width on user’s expectation”

But how about when the form looks really bad? Never found a topic about this one.

Not saying mine is bad but sometimes I feel like it is. I end up thinking about the design the whole day/night and hinders me from proceeding.

Then sometimes I end up not even changing it.

NOTE: I am alone and have no team. Most of the time when I ask some friends they will always say it’s just fine.

ANOTHER NOTE: Some of you might even say why not ask the users. It’s because it’s for a school project and there’s actually no users except me who is making it.

Sample

@jendimacapili
I don’t see any added value to presenting floating controls.
I would use a vertical alignment for all the fields giving them the full width.
This will prepare the content to be adaptive according to the break-points you want to match.
Phone field is also wrong
If you want to have the phone number in two fields you should provide two labels
The CTA looks not so prominent to me because has the same height of the field.

Good luck with it :wink:

The controls looks floating to you? hmm… that was just a grayish 1px border.

And about the phone, why two?

Thanks for notifying me about the button’s CTA issue.

But the question is still not answered :confused:

floating in terms that they are horizontally displayed
maybe it’s easier checking the sketch I did

2 Likes

wow. I just re-designed my form that way without even looking here first. I guess I made the right decision tho I was just fiddling around to see what I can do.

The difference was just I still use bordered input and yours was line at bottom (which actually might be a border bottom). Would using that eliminate the “base input width on user’s expectation” problem?

I don’t believe that this is a primary KPI to earn in designing a form.

During several usability tests (qualitative and quantitative) we noticed that users are much fast and good to accomplish the task when the form is built according to the human behaviour.
For instance, when you present yourself you say “hello I am John Doe” and not “hello I am John Adam Doe”.

If for some reasons you need to record the optional second name, maybe, you should think about a full customer page where you can display all the fields that you need. In an entry form, I don’t see any added value to go so deep into the details.

It’s because I am working on an Android app and the style-guide for such OS presents the form controls with this design, I’ve to say I’m not a big fan of that (I’m not a big fan of Android at all) :slight_smile:

Hiya,
Luke Wroblewski has some good stuff on form design. Some is from a few years back, but is helpful. http://www.lukew.com/ff?tag=forms

Good luck with your work!

As does @formulate https://www.formulate.com.au/blog/