Usability

I've been working part-time on refactoring a larger application (200+ pages), focusing on developer maintainability, scalability, and also look and feel. The maintainability is pretty simple; adhere more closely to style guidelines in the code, make more logical use of design patterns in the layout, and make sure the code is written for the long run.

The look and feel - aesthetics and usability - are trickier beasts. They're the bottom priority, since you *can* sell an ugly duck of an application as long as it does work; you can't ethically sell an application that doesn't work, but looks like it was dipped in floor wax... unless you build video games, and have the ability to patch after release, I suppose. (Here's looking at Sierra for some of their adventure games that replaced the text interface with a mouse, and were unbeatable until v1.1 came along.)

I'm slowly building a comprehensive set of rules to guide the developers building the new pages, but meanwhile, am having to make and justify a huge number of minuscule decisions. When there are large gains to be made in reducing server load for the same number of users, it's hard to justify a fifteen minute discussion on how to indicate onscreen that a field entry is required.

So, let me put that here.

First: *
Second*:
*Third:
Fields with a * are required.

The first three - and most common - choices are here. The first one is visually cleanest; the required * is easy to pick out, but doesn't distract you visually. The second one seems the most logical to me, as it follows sentence structure; the interface is telling me what to enter, whether it's required, and then letting me enter it.

So let's justify the third by knocking down the other two. If someone's using a accessibility device - magnifier or a full screen reader - they may stop entirely at the label then the entry, and not pan right (or read right) to get to the required *. Or, all of the boxes may be the same length, so adding an extra * to the right might throw off our column layout.

As far as throwing off a column layout, I'm a pretty big fan of the right hand side of a label (First, Second, Third above) being lined up with the labels above and below it. It just looks sharp.

Test
Example
Another Example

vs.

Test
Example
Another Example

My current preference might actually be bold or italics:

Fourth
Fifth

Depends on your font; with Blogger's default bold, I don't think that's visible, and the italic isn't much better.

The other thing to mind, used successfully, is having regions of the screen required, and other regions optional. Giving a quick example:

Required Fields
First Name
Last Name

Optional Fields
Age
Sex FemaleMale

That last one isn't bad, but works better for a single page of form data, while not working nearly as well in an application with many pages of input.

In the current application I'm working with, the original Three above wins; asterisk to the right of the input field. It's a wide interface, with plenty of room to each side of the form label and form input. It's also a closed commercial interface never meant for a wide release, so the odds of incompatibilities with screen readers are low.

What are you using for required fields? What's the preference?