User Experience Stack Exchange is a question and answer site for user experience researchers and experts. It only takes a minute to sign up.
Sign up to join this community
I working on an internal user panel for a company that provide premium services. in their platform has lots of forms with too different inputs. It is so important to users to know where there are and what field is focused now. so I decided to use a very simple animate for labels, but I not sure for some pages what are just empty fields could be useful or not. any style/way you recommend?
I agree with what you are trying to do in spirit - but I think you may run into problems with the animation you're proposing. In addition to challenges relating to accessibility and mobile, tilting the label when the field becomes active obscures what is being requested of the user.
The example below is taken from Yahoo's user signup form and demonstrates tactics that may help mitigate your concerns, namely the use of color to indicate the active field (as well as to highlight validation errors).
When designing an UI, it is better to go as standard as possible -- don't try to reinvent the wheel. Use things that the user is familiar with.
Animations are a non-standard way to focus user's attention on a field, and may confuse the user which didn't expect it.
Furthermore, either you go for an animation that shortly ends (and will not serve its purpose if the user looked away for a moment and missed the animation) or you go on a looping animation (which will most probably annoy the user).
Instead, highlight the field background or draw a red border around it. This will work, it's much easier to implement, requires less resources, and is pretty much standard.
If you have lots of feilds in one form, its better to divide the form in different sections if possible. And put a completion status data. Suppose User is filling Account Section, Status must show, you are in Account Section.
You can use little animations in forms, what you are using is also good enough. if Field is selected, change the color of the feild. That will be recognized soon.
