Inputting percentages - in decimal or whole number form?

Question

I've come across a situation in a form where one group of people is expecting an input field for a percentage value to be whole numbers, whereas the other expects decimal values. Either way when the control lost focus, you would show the whole number formatted with a percentage symbol in the field. (Side note, for this specific situation we also have increment/decrement arrows next to the fields to increase the value of the field by a predetermined step-size.)

Think like this:

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

I can see the merit of both, I'm just curious if there's any guidelines or if someone has done research on anything related? My intuition says decimal value.

Answer 1

I think it's undesirable to change the format/contents of the entry field upon getting-focus and losing-focus, which would be the case if "0.1" was converted to "1%" upon losing-focus.

I would put a "%" immediately to the right of the entry field and make the entry field not accept "." or any other non-integer input, basically disallowing any inappropriate input. This would then not require any format/content changing upon get-focus or lose-focus, and would make use of the entry field easy enough to figure out (and require less in less typing from the user).

Answer 2

Edit:

Responding to a request for written guidelines, I suggest checking out this site, it seems to have the best content and is very easy to read, with examples:

http://www.lukew.com/ff/entry.asp?1502

Further reading here:

http://websemantics.co.uk/tutorials/accessible_forms/

The tricky thing is, the question is asking for guidelines applying to specifically percent-formatted numbers of text fields. Most guidelines tend to apply less specifically, stopping around the alignment and arguments for and against default text or hint text. I'm a fan of hint text! Hint text, of course being that default text that disappears when the cursor is placed within the field.

Original: I would upvote obelia's answer except I'm new to this stackexchange site, and this is the first Q&A I've found. And I really like obelia's answer :)

But, must add my own useful and complete answer: As obelia said,

1. having a % at the right of the entry field would be very useful
2. disabling of the period/decimal point as input would add to the clarity.

But these are not perfect

1. If you're left-aligning, as in your sketch-up, a percentage on the right isn't as pleasant. Bah, sometimes it feels awkward to force a right-aligned number entry on a form user, because textboxes default to left, and I bet 90% of number entry fields on the web and in paper are filled out left-aligned. oh well. Spreadsheets are my friend for right-alignment. :)
2. If you want something more precise than 1%, like 0.5%, disabling the period is a no-go.

The solution I'd use is a default value in the field before focus, with a percentage sign at the end. Depending on implementation, this approach does not NEED to be hint text that disappears on-focus, it can be left in the field or removed at your discretion. And of course, assuming it is left in, then just do field validation when the field focus is lost. Then you can assume the person knew the proper style to input, and has entered what they want in the proper way. Plus, after the field validation, if they see a value that surprised them, they can edit again.

Anyway, it's unlikely a person who sees:

[ 0.0%     ] ^v

then submits:

[ 0.1      ] ^v

will ever be thinking "I want to enter 10 percent".

Answer 3

I cant dig up any research on the pros and cons of using whole numbers vs decimals, you have to look at the use case of when people are not sure what the decimal value equates to in terms of percentage. For example we can easily calculate that .1 is 10% by multiplying it by 100 but unless someone knows how to do that, they might get confused.

However it also depends on your use case too. If you are going to tell users to multiply the decimal value into another number to determine what that 10% percentage or .1 value is and you want to make it easier for users, then you should look at keeping it at making the process easier (and here using percentage fails since users would have to the percentage value/100 which is additional work and might confuse someone who is mathematically challenged