Update 17 May 2009: The Volkside website has been redesigned since this post was written but the input prompt behaviour is still applied.
Key function on any business website is the ability to contact the company. Several pages on the Volkside website lead you to the contact information page, and having prospective customers get in contact with us is indeed the main “call to action” on this site.
The contact information page itself offers multiple ways of reaching us, one of the most obvious being the contact form (“Get in Touch”). It is critical that the form works well, so I took a look at how to improve it.
Here’s the previous version of the form:
The good: The heading is task oriented and the form collects all necessary information. All form fields are mandatory but luckily there are only three of them.
The bad: The icons next to each form field are small and low in contrast, so it’s difficult to tell which piece of information goes where. It is not obvious whether the fields are mandatory or not. The submit button label is ambiguous and it’s not completely clear what happens when the form is submitted.
“Prefill a text field or dropdown with a prompt that tells the user what to do or type. …
Why: It helps make the UI self-explanatory. … an Input Prompt is a sneaky way of supplying help information for controls whose purpose or format may not be immediately clear.”
I also renamed the submit button to “Send message” to make it clear what happens when it’s clicked. Mandatory fields and form error handling may still cause issues, which is something to address in another post.
Here’s the new version of the form:
Try out the new version of the form on the contact information page.
What do you think? Do these changes make sense?
How could this form be improved further?