Booklet

author

Lisa Martinovska

Design

User Interface: The Anatomy of Inputs

design

Design

|

User Interface: The Anatomy of Inputs
The basics & tips

No matter if your inputs are outlined, lined, or filled, the anatomy is pretty much the same.

Container:
The container should always be recognizable as an input and have some white space in it.

Input Label:
Label text should always be visible for users to know, what they are filling out. Avoid long text.

Placeholder:
Placeholder is here to help or guide users. It's color have to be different from filled input text.

The Icon:
Might be useless in username, but is very handy, when it comes to show/hide password or clear field.

Helper/Feedback
Providing additional information about the field, like f.e. when your password is incorrect or it's guidelines

Several examples for default and filled state.

Thank you for reading!
Raise completion rates thanks to better-built forms.

More booklets by Lisa Martinovska

More Design booklets

Your recently viewed booklets

  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
  • booklet-slide-images
See all booklets