4

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.

Sample

  • I'm not quite sure what you are asking: Do you want to know wether functionality can sometimes be ignored in favor of aesthetics, do you want to know if aestethics play a role in form design at all, or do you want to know what looks aesthetically pleasing in a form? – TheSexyMenhir Mar 16 '17 at 12:24
  • What is bothering you in your example image? – Paul van den Dool Mar 16 '17 at 12:26
  • @TheSexyMenhir the first one. The other question you said if answered will be helpful for me in the future also. – jen Mar 16 '17 at 12:50
  • @PaulvandenDool that's just what I currently have. It is not done yet. I have a form paper that I'm turning in to a web form and it is quite long. For sure if I'll be basing the widths based on user's expectations, they'll be out of balance – jen Mar 16 '17 at 12:52
  • 1
    (This might not help you with this particular problem but I have to nitpick...) I don't think any of us will suggest "asking users." That doesn't produce valuable data for UX Design. What we'll suggest instead is to observe users. Just watch them use your prototype. See what they do and where they have trouble. A think-aloud test (google it) is so much better than asking people what they like. Sorry. Proceed. – Ken Mohnkern Mar 16 '17 at 13:31
2

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

mockup

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).

enter image description here

  • about the "... applies for the min width, not the max width.", got a little confuse by that. I mean, for example if an input should be 7 characters/digits only why make it wider than that? See: designmodo.com/wp-content/uploads/2013/01/… why make expiration longer than that? – jen Mar 16 '17 at 13:38
  • If the design of your form allows for a wider input and there is no usability loss, you might just as well make it wider if it improves the look. In your designmodo example image I would have made the security code input a bit longer so it would align with the input above it. – Paul van den Dool Mar 16 '17 at 13:43
  • @PaulvandenDool Except when a smaller width indicates the type of input (e.g. a very small input dropdown to denote a numeric field vs a wide input dropdown to denote a textual input). – TheSexyMenhir Mar 17 '17 at 9:40
1

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:

0

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.

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.