Ellen Beldner

Jakob says (http://www.useit.com/alertbox/action-object-closeness.html):

One of the oldest principles of human-computer interaction is that things that are close together on the screen are seen as related. (Similarly, users view as related those things that are the same color or shape, that move or change together, or that reside within an enclosure, such as a box.)

I wrote about how to apply the closeness gestalt principle to GUI design in my 1993 book Usability Engineering, but it was well documented long before that.

I didn't see a save / confim button and thus assumed that Outlook was using AJAX to record my choices. So I clicked a link to navigate elsewhere and go about my business, and got a confirmation dialog. I thought "WTF, is OWA so dysfunctional that they forgot a SAVE button but somehow managed the confirmation dialog?"

I wanted to scream / sob / break something when I realized "my" mistake: the SAVE button, with white background and body-sized black text, is in the lower righthand corner of my massive 30" monitor:

• 2,200 pixels away from where I looked for it (immediately beneath the form fields; at the bottom of the page; both left-aligned)
• 2,000 pixels away from the locus of my attention (the textarea I had modified)
• 1,200 pixels away from the closest form element otherwise on the page.

I didn't notice the confirmation dialog at first, either, because even that was about 1,000 pixels away from the locus of my attention -- the left nav bar, where I had just clicked.

Design guidelines to avoid this problem:

• When you design a form, align the primary action (the CTA, the SUBMIT, whatever) along the dominant lefthand margin of the form.
• The submit button should be visually grouped with the items it acts upon -- separate with a couple of lines of whitespace, horizontal rule, or other appropriate visual treatment; but group them together.
• Dialog boxes, popups, etc. should appear near the locus of the user's visual perception -- in other words, the onscreen position should be calculated from the mouse event's X and Y positions. Don't just locate the popup in the mathematical center of the screen.

Further reference: Nielsen on the durability of usability guidelines (since HCI work of the 1970s) plus some of the guidelines he evaluated.

Addendum:

Aaaaand I've just noticed this now as I'm looking at the screenshot: why is the option to "automatically include my signature on messages I send" unchecked by default? Isn't that the point of the signature? Didn't I just edit my signature, thereby implying that I probably want it to show up more often than not (otherwise I'd just type my sig manually when I want it)? And isn't inserting it by default a much easier-to-recover-from error (I select the text and hit DELETE on the occasional messages where I don't want the sig) rather than what happened to me, which was more like "Huh, I could swear I remember adding my sig to my preferences, I wonder why it isn't showing up in this message I'm composing? Oh well, it's not worth my time to try to figure out what the problem is."

For the record: The answer to this problem is not "Oh, well when someone fills out the sig field, but doesn't check the box, flash a notification or an alert when they compose a message to tell them that they didn't check the 'always include' option, and do they want to insert their sig."