7

7 Tips
for Designing +
+
+
+
+
+
+
+
+
+
+
+
+
+
+ + + +

Better Forms
+ + +
+ + + +
+ + +
+ + + +
+ + +

+ + + +
+ + +
+ + + +
+ + +
+ + + +
+ + +
+ + + +
+ + +
+ + + +
+ + +
Top-aligned Labels
Top-aligned labels require a single fixation to take in both
input and fields, reducing complexion

Name
Name Christopher Christopher
Single Column
Multiple Column disrupts a user's verticle momentum.Keep
onw field on top of other.

Label Label Label

Input Input Input

Label Label Label

Input Input Input

Label

Input

Label

Input
Separate Placeholders
Avoid using placeholder text as labels,as it makes it harder to
remember what information belongs to the field.

Label
Label
Input

Label
Label

Label Input

Label

Input
Placeholders
Give the user an example on what information goes on that
specific fieild. It's a friendly way to assist them.

Email Email

Type email@gmail.com
Active Fields
Highlight active fields to inform users that the field is selected
and that they can proceed to fill it out.

Label Label

Label Label

Input Input

Label Label

Input Input
Field Length
The length of the field should show you the length of the
answer. This brings more clarity on information type.

Zip Code Zip Code

12345 12345
Avoid Dropdowns
Try to avoid dropdowns on small forms, this way all options
can be easily seen and reduces interaction steps.

Gender Gender

Select gender Male

Male
Female
Female

Prefer not to disclose Prefer not to disclose

Was that helpful?
Follow us for more information