When I blogged about Auto Advance — GUI Design in June, I concluded with some theoretical examples of good implementations, but for this post I decided to document two well-done real examples. I enjoy acknowledging designers that are really thinking about their users and making their lives a little easier.

WINDOWS® IPv4 IP PROPERTIES DIALOG

When entering an IPv4 IP address on Windows® the focus automatically moves between the dots (from one octet to the next) within the address whenever a period is entered. This is the case for both Windows XP and Windows 7.

Figure 1 shows a screen shot of the Windows® XP Internet Protocol (TCP/IP) dialog. This dialog is invoked from Control Panel | Network Connections | Local Area Connection | Properties | Internet Protocol (TCP/IP) | Properties. I entered these values for the IP address without regard for automatic advance and they appeared correctly. As soon as the first octet had three digits, control was advanced to the next. It stayed there when I entered the dot because there was no valid value. When I got to the end, the focus remained in the last octet playing a tone for each invalid key I pressed. Very nice.

There are three ways to advance to the next section of the IP address:

1. Enter three valid digits (advances automatically).
2. Enter a dot after a valid entry exists.
3. Use the right arrow key whether valid values exist or not.

Figure 2 shows a screen shot of the same dialog (with an error) just after I entered the digits “678″ in the second octet of the Subnet mask. It accepted the first two digits without a problem, but detected that the next digit made the value too large. The value was automatically changed to the maximum (255) and the error message was displayed. It would have been better not to remove my entries, but at least it caught the error as soon as it happened. The last digit probably should have been entered into the following section. If it detects three digits and advances, then it should also advance when it detects a value that is too large. In general, though, the error checking is good, including a tone that is played when a non-numeric value key is pressed.

Figure 3 shows a screen shot of the Windows 7 Internet Protocol Version 4 (TCP/IP) Properties dialog. This dialog is invoked from Control Panel | View network status and tasks | Local Area Connection | Properties | Internet Protocol (TCP/IP) | Properties. This GUI functions identically to the XP version as far as I can tell, including the fact that the following keys work as though there were no dots or divisions between the sections of the IP address:

1. Backspace and Delete.
2. Left and Right Arrows.
3. Up and Down Arrows (I have mixed feelings about this one because they act the same as Left and Right Arrows).

Unfortunately, the IPv6 dialog on Windows 7 is a serious step backwards. Figure 4 is a screen shot of Internet Protocol Version 6 (TCP/IP) Properties dialog.

Because of the new design, the text fields no longer show the dots for the different sections of the IP address (which provide great visual clues for the desired entry). Also, this dialog no longer performs any error checking until the focus leaves the field. That includes alphabetic characters. Not awesome at all. What’s worse is the fact that once an error is detected, the Cancel button will not dismiss the dialog. Instead, the entire invalid entry from the text field must first be deleted before selecting the Cancel button. Wow.

So often I’ve seen designs where every detail was carefully considered at first, but then the reasons for specific design decisions are lost to those who maintain or update the code in the future. The “improvements” result in a backwards step. I hope you have the pleasure of using IPv4 and not IPv6 on Windows.

Of course, the reason for the “update” was so that either a DNS name or an IP address could be entered, but the added flexibility resulted in a loss of practicality.

AMERICAN EXPRESS® CARD REGISTRATION

Here is an example of a form that does exactly what I suggested was the correct implementation in my previous post: The correct time to automatically advance is not when the correct number of digits is entered, but rather when the next digit is entered. Figure 4 is a screen shot of a portion of the American Express® Card Registration form available on americanexpress.com®.

When four digits are entered into the first text field for the 15-digit Card Account Number the focus does not advance, even though there is a maximum of four digits allowed. Instead (yeah!) when the fifth digit is entered, the focus advances to the next field and the digit is entered there. This means that editing can take place with the first four digits as required. Something else interesting is that if a digit is entered in the middle of the first four, then not only is it entered as desired, but the last digit is then pushed into the following field. Very well done. That is a natural implementation.

SUMMARY

Microsoft had it mostly right with IPv4.

Hats off to American Express. (I think that’s twice in the last three posts that I’ve complemented americanexpress.com.)