3

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?

form animation

  • Assuming: 1: Not selected Feild 2: Selected Feild 3: Values in feild – Abhishek Sharma Apr 18 '16 at 6:55
  • Are they correct? – Abhishek Sharma Apr 18 '16 at 6:56
3

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

enter image description here

2

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.

  • I think it is self-evident why this is a bad answer. If you said "in a B2B app for power users, the UI should be as functional as possible" that would at least be logical, or showed examples of 'conservative UI' and explained why they are effective, then this would be a good answer. But stating all UIs should be 'conservative' is not user-centric. – Midas Apr 18 '16 at 17:04
  • Perhaps I did not explain myself well. I slightly modified that point. – dr01 Apr 19 '16 at 7:20
  • That's a lot clearer :) Other comments deleted, and vote updated accordingly. – Midas Apr 19 '16 at 9:30
0

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.

Not the answer you're looking for? Browse other questions tagged or ask your own question.