Hi everyone, I’ve made some changes/modifications to my survey form and I’d like your opinion.
Should I change the top two dropdowns so that the question is above them? Seems like maybe I should as that would go with the flow of the rest of the page where the question is above and user responses are below it.
I do kind of like the way it looks now because the first 5 questions are personal information questions.
This reads very well and I like it. I esp like how you put the questions as part of the top border on most of the questions.
If I were going to change anything I’d change ‘Score each of the following…’ to be part of the top border and instead of having drop downs, I’d have radio buttons. But that’s being picky and it reads well as is.
I’d give the container a min-width so that there’s never a chance that things could fall out of it.
Overall, I like it but I think the inputs, buttons, and select boxes could use some more styling. e.g. on the inputs, border: 1px solid #ccc. Somehow, my survey form had a little similar design.
If I add that simple border it takes away from the styling I gave to my inputs and makes it plain. Plus I further added a background color to the required input areas.
On the buttons do you mean the radio buttons and checkboxes? Not much to style there but I’ve given a hover effect that I haven’t seen anyone else incorporate.
And it’s subtle but each of the three areas, personal info, gear and modification has a slightly darker background than the rest of the container.
I’m not sure what you mean by this. I think our forms are quite differently styled.
I just added that to make it stand out a little more, the main thing I did was remove the border though. And, I moved the transition for performance reasons & to make it always animate + changed the timing on it.
And I paste it into Visual Studio Code and use it’s auto-validation. I do use brackets for a few things, but the main one is vscode.
Since I don’t have the shadow there’s no border visible to remove…it’d be just bloat. With shadow a border is slightly visible so yes, then it’s good to remove it.
Since the transition is only done on hover, that’s why I did it there. I’ll have to research that a little more to see if there’s a value add to moving it to the button where it’s not used. Thanks for pointing that out.
Making the timing shorter is probably a good point since the user is going to click pretty quick and my one second transition may not even be noticed. Thanks again.
It’s quite a bit more common to use transition in the regular element (no pseudo-selectors) because it animates both ways. And the performance, it’s constantly setting and removing the prop but otherwise it would only set it once.
I’m not trying to be argumentative @ConnerOw1115, I’d like to understand what you mean by “bothersome”, (annoying, irritating, irking, vexing, maddening, wearisome, exasperating, etc).
Does it throw off the balance of the form?
Do you feel that the user’s comments shouldn’t be considered so therefore the textarea should be minimal to discourage any feedback?
My thinking was from a UX perspective the user should be given an area big enough to enter more than a couple of sentences without have to scroll up and down to review what they’ve entered. If a comment is asked for, giving a tiny input area makes it seem as though the comment is inconsequential.
Based on your feedback I’m looking at changing it from 100% width to 90% width. With that, on a small screen it lines up with the fieldset area above it giving it better balance.