Is Aesthetics sometimes preferred in Forms?

Question

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 from me who is making it.

Answer 1

I don't see any reason why the phone input field can't stretch the entire width of the form.

^{download bmml source – Wireframes created with Balsamiq Mockups}

In my opinion "Base the input width on user's expectation" applies for the min width, not the max width. I can't think of any reason why above mockup would hurt usability, because the input is wider than necessary. Only in extreme cases where it fills the entire width of the screen (1000+ pixels) could it cause usability problems. In those cases it might be more difficult to keep an oversight on things.

I would like to add my personal opinion about the use of a middle name. I often see people using the combination of these three because others do it. In my opinion you have three option and you use each one for different reasons:

• First-, middle- and last name: use this when it's important you're able to sort on somebody's last name. Take my name. I would search for my last name in the list with lastnames starting with "D", not "V".
• First- and last name: ask for a first- and last name when you want to address the user with their first- or lastname. Hello Mr./Mrs. $middle_name $last_name is redundant and only adds an extra input you don't need. (Just read this article, or look at the GIF displayed below).
• Full name: use just one input field when you'll be addressing the customer with their full name. Like displaying the full name on the package your sending the customer (e-commerce).

Answer 2

In forms input efficiency is more important than aesthetics.

Why is that? Because no one likes to fill in forms. This is because they require a lot of mental resources to fill them:

1. initial processing of the interface,
2. plan generation (which form to fill in first),
3. recalling of information,
4. manual typing,
5. navigating between input fields,
6. rechecking the filled in data.

The brain is predisposed to save valuable mental resources. This is why people tend to get demotivated in front of labor intensive tasks. And mental work requires a lot of energy.

Therefore, if we had to choose between 2 tasks, (1 that requires high amount of work and one that demands less) the majority of times we will prefer to work less, in order to save energy resources.

Focus on making the forms easier to fill in than to look stylish.

Visual aesthetics play role only in the initial processing of the interface, so they don't save much workload of the brain. Therefore, users will prefer forms where they perceive they require less work over aesthetically pleasing ones.

Here are some links with tips on how to improve form efficiency:

• Best practices for form design by Luke Wroblewski
• How to improve usability of a form with lots of fields
• Website Forms Usability: Top 10 Recommendations

Answer 3

If you want the short answer:

Functionality always trumps design.

The longer answer is, that you will always have to balance the loss of UX-functionality against the presentation, and oftentimes problems with the design can point at faults with the layouting of the material.

For example you point out field sizes as a problem. To me this suggest that your input types often change in format (e.g. a date field followed by a name field, followed by a checkbox, followed by another name field). This actually reduces useability and as such function.

In addition make sure that you actually understand the intent behind each rule. Layout-rules are always to be understood in context, and an appropriate width for a form field can vary widely, depending on where you implement it.