Object Lesson: Form Design

I was doing research for a project recently where I needed to calculate quarterback ratings off from 35-year old scanned in records. The records were produced with type writers back then, just trying to read them was quite some experience. We found a website that allows you to do the calculations. This is what it looks like:

 

 

In the middle part of the screen, there are two areas: one is for entering the passing stats, the other then shows calculation details that lead to the quarterback rating. Because the layout is adaptive and changes based on available screen real estate, the two areas are pretty far away from each other on the 24-in widescreen monitor that I’m using. For the above screenshot I shrank my browser to put them closer together.

So I painfully find the right stats on those blurry scans, transcribe them into the 5 fields on the left screen area, and then hit the button right below the fields. Which deleted all my entries. Which I didn’t like. Which motivated me to blog about this experience. After hitting that button I had to hunt down those stats again on the cluttered scans and reenter them. What a waste of time. And I also I felt stupid, because the button clearly says “Reset fields”. It’s just that I didn’t read that label at all. And I also didn’t take a closer look over to the right area yet. I assumed that this form would work like 99% of others where you work from top to bottom and then submit your entries through a click target positioned beneath the fields. What I’m supposed to do here is skip that button, move over to the right screen area and find the “Calculate Rating” button there.

Now, this is not a professional or commercial website, but just a side project from someone who’s a football fan and is nice enough to provide this calculator. Yet, it’s a nice object lesson on form design. Some things are really done well, for example right-aligning the labels to the entry fields which corresponds with Luke Wroblewski’s form design guide. Yet the placement of the “Reset fields” button is disruptive.

The first thing that comes to mind in terms of applying a more suitable design pattern is using a primary and secondary action approach (also see this blog):

 

 

This pattern emphasizes the action that a user would most typically or frequently execute while also providing a more subtle click target for the more infrequently used command. There may be other ways and better ways to solve this, but this one would be an improvement already.