gLog

“How’s he doing?”

“He’s stable but he’s going to need more work. It’s going to be a long road.”

“Look. He’s waking up.”

Where am I?

“You’re safe now. Can you tell me what you remember?”

“The last thing I remember was yelling something about required fields. I must have blacked out.”

“We think someone gave you some bad JavaScript last night. A kind we haven’t seen since the 90’s. Don’t worry though, we treated you and gave you an immunization so that won’t happen again. But we do need to tell you something.”

“What?”

“Well, there’s no easy way to say this.”

“Is something wrong with me?”

“It’s your face.”

“What?”

“Get me a mirror. Don’t worry. We can fix this. This might not be easy for you to see.”

What have I done? I don’t even look like myself. All of my borders are gone! You can’t even tell where one field ends and the other begins. Everything is disorganized. I don’t know which field is for what. Why me? I thought those people were my friends.

“We found you outside. We’re not sure who did this to you but you’re safe now. If it’s o.k. with you, we’d like to get to work putting you back together.”

Why is the room spinning?

When we last left our protagonist, he had just been introduced to JavaScript and we learned one of the ways JavaScript shouldn’t be used. Unfortunately, since he spent the night sleeping on the street, some vandals got to him. What follows below are a few form design decisions, I see from time to time, that I’d love to correct given the opportunity.

Missing Field Borders
Often, I see forms where the borders have been removed from input fields. While stylistically this may match a certain look, removing these borders may actually have a negative impact on the field’s affordance. You might think, when there are a bunch of white rectangular boxes on a screen, most people know they should click on them. The problem is that by removing elements like this it forces people to think. Why not choose a border color that matches the look you’re trying to achieve instead of slowing people down?

Lack of Focus
Some may not agree with this one but If the purpose of a page is to fill out a form, and the first field is a text field, why not set the focus on the field? This helps people get started by: putting a blinking cursor where they’re supposed to type; saves a mouse move and a click; and helps guide them toward form completion. I also like to slightly darken the border of each focused field. Not too much as to be jarring, but enough to help reinforce the current place on the form.

White space
It’s important to have white space between form rows. When there isn’t white space present it’s hard to distinguish between where one field stops and the other begins. If the form fields don’t have borders it makes it even worse.

On other forms, labels are too far away from their fields. This is often a symptom of putting a form into a two column table that has 100% width. This decision makes it very difficult for people to discern which label belongs to each field. This decision also slows people down and causes them to do extra work to complete the form.

To be continued…

Posted in: Interaction Design