Sometimes form overshadows function. As web designers, we have access to numerous bells and whistles: Javascript, Ajax, or plain old CSS. It can be easy to jump at the opportunity to try out some new techiniques at the detriment of the usability of our interfaces. We recently worked through this issue while working on the sign-up form for Eat at FORGE.
The task was a seemingly simple one: Allow the user to select the day that they want to come over for lunch. Easy right? Well not so fast. This sketch shows the first iteration of the form:
I really liked the idea of letting the user open and close the accordian to browse from month to month. It would allow us to encorporate some Javascript wizardry. Also, showing the chairs and tables and color coding them to denote availability would be fun to make using only CSS; no images allowed. The pros were abundant. It was a design and HTML playground, but there was one con: it was incredily hard to actually use.
After spending some time coding the form and doing some usability tests it became apparent that the form failed for many reasons. Mainly, the layout suffered from the problem of showing too much information. While developing we were amazed at all the cool ways we could think of to display all this data. Never did we ask if we SHOULD display all this data. As we thought about the form and its functionality the answer we kept coming back to was no. Did people need to see dates that were unavailable? No. Did people need to see all the months’ data at once? No. So with our newfound usability results and new thinking we hatched a new sketch for the same form:
We decided to prompt users based on two criteria: month they are interested in and the number in their party. We then run that through our database and display only the month of interest, and only the available dates in that month. This gives users a nice clean interface to select a date from. If they want to see other months they can toggle with the arrows or submit a new month in the dropdown. The changes increased the usability of this specific form exponentially.
The lesson we learned was not to ask HOW to display data, but SHOULD we display the data in the first place. This has lead us to create much more usable and beautiful forms.
