• Róża Turowska

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.


Error message:

- 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.

My solution:

Error message:

- 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.

16 views0 comments