What layout to choose for input fields with units?

Question

I'm currently in the wireframing stage of a project with a medical background. Nurses, Doctors and so on use the interface to enter captured patient data, mostly measured values in different units. My goal is to make the layout more efficient when you want to enter all the measured values into the input fields - the users jump from field to field and quickly need to grasp the relevant input-information. Some input fields provide maximum values, I want to use these to adjust the lengths of the input fields respectively so that the length of the input field acts as an affordance for the user. Some fields don't provide maximum values, so I need to resort to a default field-length. All input fields need to display the unit.

I came up with two versions: Version A aligns with the standard model of NUMBER - UNIT, like 10 kg, 10 minutes, 10 cm. Nielsens heuristic »Match between system and real world« and »Consistency and standards« come to mind.

Version B offers a more structured approach. Users always find the unit in the exact same spot, eyes don't need to travel at the end of the input field only to go back straight afterwards. No matter how long the input field is, even if the entered value is just 2 characters long you still got the unit and value next to each other. Heuristics like »Flixibility and efficiency of use« come to mind.

What would you go for and why?

Answer 1

The best way I have found for this is to put them with the label (after the label in parenthesis) for example, label (unit) ________ This way the reading order is maintained in the sense that the user reads all instructions at once instead of reading the label at one end and looking for the unit at the other end then back to the middle to enter the value.

Answer 2

I hguess it depends on the country/region, but most western countries usually write it 100 cm or 500 €. It is pretty much just usual in the US to write $500.

So, go with a)

TL;DR:

X amount of Unit Y

1€

100ft

Simple test:

How do you speak out how much money you have left in your pockets? I am sure you say "I have 5 bucks with me" or "I have 20 pennies in my pockets". This is a good indicator to how to put it on your website and use it for forms.

Answer 3

Recognition is faster than recall, so go with what's typical or standard of similar forms.

Otherwise, if your users read top to bottom, left to right, it still makes sense to have the labels on the left because it identifies the following field, and that's important because tunnel vision and selective blindness might lead users to assume the label in a time-constrained environment.

Answer 4

My guess is version A is more natural to browse visually. However, I would recommend you showing this quickly to a doctor or nurse and see which version they like. Maybe the units are standardized across, so e.g. for measurement A it will always be in CM, so no need to check it says CM on the field.

Answer 5

Based on the scenario and users you described, I assume that the user of this app will probably repeat this task many times and do it frequently enough that the units aren't going to be the main focus every time they fill out this form.

It seems to me that having variations on input length is preventing the units from shifting positions without offering a big payoff for this loss of alignment. I'd go with option A and eliminate the width variations to have the units align nicely.

Answer 6

The design principle I like to follow in these situations is "See what Amazon does and copy it." Seriously though, if we see that a pattern is consistently used by companies that invest millions into UX, we're probably better off following it (unless of course our own user research and testing proves otherwise). There's lots of good reasons to follow established patterns which I won't get into now, but for now I'll try to figure out if there is an established pattern. A quick search shows that Amazon's placement of units corresponds with how things are normally written.

As marvinpoo mentioned, in the US dollar amounts are written as $###, so Amazon places the $ sign at the beginning:

But weight and dimensions are written as ##lbs, ##in, etc - so Amazon places them at the end:

I did a quick comparison with the only other UI I could think of at the moment with dimensions (Photoshop). Pixel sizes are written as ##px, so they place the unit at the end:

If it were my project, I'd probably check a couple more UI's (but only by companies that invest heavily in UX.. I wouldn't care about free online unit converters, etc). If you're convinced there's an established pattern I'd go with it, unless user testing revealed a reason to try something else.

Edit: I just reread your post and noticed your comment: "Nielsens heuristic »Match between system and real world« and »Consistency and standards« come to mind." So sounds like you are already well aware the benefits of following patterns, but were weighing those against the possible benefits of your alternative approach. My conclusions are still the same, I just may have worded my response differently :)