Problems with sign up form from Dribbble
I wanted to sign up to Dribbble by e-mail. I filled the form, I also used Chrome's autofill - I always do it, it saves me time and prevents typos.
However, while trying to sign up I found some difficulties that made me abandon the whole process. I just felt frustrated at the end, I felt that this form could be designed much better.
My first problem was the error message. What does it concern? What do they want from me? What is wrong? I had some hard time to answer these questions while signing up.
- The placement of the message doesn't indicate the subject of the error.
- The word "error" is a strong word that builds the frustration. Why does the user have to feel frustrated and bombarded by errors that were clearly made because of unforgiving data format provided by Dribbble?
- It takes a lot of space.
- lack of "human touch" in the message
Lack of labeling of the input fields:
- It strongly relates to poorly executed error message. There is something wrong with the user name, but where is the user’s name? I don't remember :(
These were my main area of problems with this design.
- I placed it just under the input field it relates to.
- I removed to word error and changed the tone of the message to be more informative. Thanks to this error message got smaller.
- I decided to use a border around the input field to indicate the mistake. Colour blind people need at least one more indication of the feedback besides the color.
I added the labels above the input fields.
The new design got bigger only by 92 px but should be more mistake proof then the current one.