Form field
While working on a project redesigning checkout flow, I came up with a set of form interaction to achieve several objectives.
1. Users can see the types of information they are going to fill in at a glance.
2. Form is grouped in a chunk of related information.
3. Users can see the label of the input field, even after they type in the information.
4. Users can understand in which stage of the process they are in such as, section they are currently at, input of invalid value, and successful submission.
In the process, I tried to reduce unnecessary animation or features that slows down the process which does not serve the goal above.
This prototype is created using HTML/CSS and Javascript
*Individual input and label interaction was referenced from google material design