One of our redesign goal for the Form Builder was to provide as much direct editing as possible. Here’s what happens when you add a question to the form:
– screencast – add question, edit label.
You add the question, you can see the input box, and edits its label.
This simple interaction is critical. It’s the one that’ll be repeated by thousands of times by our users and it’s very important that we get it right.
Our early iteration looked like this:
– screencast – add question, edit label (early version)
If you disregard the difference in style, the user interaction is very similar. Yet, it had a critical usability issue that we quickly discovered in our usability tests.
Our first testers were actually quite confused here. They assumed that they had to enter text in the input box. In hindsight, that should have been obvious to us, but we so deep in the intricacies of form building software that we could not see that input box as anything else but the part of the form they’re building and not an interface element.
We made 3 small but important changes to address this issue.
1. We set the focus on the label as soon as the field is edited. This saves a click so it’s faster, and it helps indicate more clearly where the user is supposed to type.
2. We disabled the input box. If you click on it and try to enter text, the focus is automatically moved to the editable label.
3. We reworded the default label to be less confusing.
Details matter. We’ll go
Back
