4 ms·
Honestly it seems terrible and wrong according to most popular user experiments on web forms. 1. Error messages are non existant, all that shows is a redish/pi
by dubcanada 7y ago
Honestly it seems terrible and wrong according to most popular user experiments on web forms.
1. Error messages are non existant, all that shows is a redish/pink badge on the left. Which a color blind person may have trouble finding a difference from the blue one above. Also gives no indication as to what is wrong? Email missing a ., shows a red. Hard to say what exactly the error is without further details. And honestly errors are the biggest and most important part of any form. Good quality errors with clear messaging will go miles above any other "improvement".
The number one biggest annoyance is filling out a form only to get an error with something you didn't know needed to be done or you did incorrectly.
Rules are simple
- Keep already in inputted date
- Try and indicate as clearly as you can what the error is
- Show the user to the error (if it's one maybe focus that element)
- Help the user fix the error by offering suggestions, things like if a user types @gmial.com maybe say are you sure it isn't @gmail.com?)
- If you are gonna hide forms in an accordion like checkout experiences, let me go back. And show something that indicates that section is good to go. Real time validation is really good. But PLEASE KEEP it the same as on the backend. Nothing worse then getting a checkmark on the front only to get an error after submitting from the backend.
- KEEP THE ALREADY ENTERED DATA EXACTLY AS IT WAS I cannot stress this enough. The amount of times I've closed a website after entering a form and having all my data cleared from an error is more then enough.
2. There is WAYYYY to much space between each element.
3. The font is small, you should be using larger then size 12px font on forms. At least 14px.
4. The implied "success" is a green border, however the dropdown does not turn green on selecting an option. So it does not look correct.
5. The hover/focus state on the buttons is a slightly bigger light grey box shadow. Hard to read, and hard to know what is focused.
6. Checkbox/radio group has no tab function, you cannot tab to it.
I could go on and on, and I'm not even that skilled with UX.
Also it breaks default styles for several other html 5 input elements, because it targets "input" rather than specific input elements.
Honestly if you want alright base styles that look good just use Bootstrap, at least it handles focus states correctly.
- bradley_taunt 7y agoI've been meaning to look-over Normform again (since it's been a while since I've touched it) and these are excellent points. I'll be looking to remedy these issues in the next iteration. Thank you!