forms - Best UI to allow expert users to enter an ip address? (IPv4)

I am working on a web application which requires users to enter an IPv4 address (in dotted-quad decimal notation) for most of the primary tasks they need to perform. Our primary target "user" is a small business IT administrator. They are very familiar with IP addresses.

I am wondering which style of accepting form input is best? We are currently using Option 1.

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

Answer

Option 3 with no intrusive validation.

1 sucks because it's out of the norm. Copy and paste may or may not work. Tabbing to the next field may or may not work. People are good at correcting mistakes and the limited fields mess up their muscle memory. For example I might type

1912

When I meant

192

My fingers will nearly instantaneously correct that but the field that forces me to 3 digits means that I my pressing backspace twice then typing '2' to fix it ends up with '12' or ends up with 191 in the first box and nothing in the second. In either case I curse the UX designer who in trying to be clever made it worse.

Option 2 is really the same as option 1 just visually different. A space separating or a period separating. The same issues come up. Possibly more as now do I type periods or not? If I do what happens? If type period I then again, with muscle memory press DEL erase my mistake only to have it erase a digit since it didn't insert the period. Ugh!

Option 3 is best but validation should wait until I hit submit or at least validation should be unobtrusive. In other words it should appear somewhere else on the page, not be a popup or something that effects my typing for the same reasons mentioned above.

I might type

19w

When I meant

192

Because my fingers slipped but perception and my muscle memory is fast enough that I'll immediately try to correct it. If the validation interrupts my input then I'll curse the UX designer again. For example I've used forms with validation that when I type the 'w' an alert or modal dialog appears "Numbers only!" which ends up tripping me up since I was already in the process of fixing it.

While were on it, while aaa.bbb.ccc.ddd is the norm for an IP address why not not care what the separator is? If I type

1-2-3-4

or

1 2 3 4

Why can't those be just as acceptable? This comes up because it's so annoying when being asked for a phone number and being told it must be XXXYYYZZZZ instead of just accepting XXX-YYY-ZZZZ or (XXX)YYY-ZZZZ etc and having the computer figure it out. Similarly with CC numbers. Accept AAAABBBBCCCCDDDD and AAAA BBBB CCCC DDDD and AAAA-BBBB-CCCC-DDDD; in fact how about just extract the digits, then figure out if the digits make a valid CC numbers. Similarly for IP addresses. Maybe parse it by looking for

• zero or more non digits


• one or more digits


• one or more non digits



• one or more digits


• one or more non digits


• one or more digits


• one or more non digits


• one or more digits


• zero or more non digits

That way

[space]1.2.3.4[space]

will also work and not annoy the user with stupid messages about fixing their input when the computer is perfectly capable of dealing with it.