form design

2022-02-22 ยท 4 min read

    Video: You Suck at Form Design

    10 Commandments of Form Design #

    1. Align form elements.
    2. Place labels above inputs. Avoid labels to the left of inputs.
    3. Input labels must stand out.
    4. Focused input must stand out.
    5. Hard labels rather than placeholders.
    6. Errors should go next to exact input.
    7. Invalid input fields must stand out.
    8. Cramped forms look bad. Use effective whitespace.
    9. Avoid wordiness. Move extra info to hovers/dropdowns/etc...
    10. Keep num. fields manageable. Either multi-step or group if too many.

    Examples #

    Alignment #


    1. The form inputs are not aligned with the heading.
    2. The form labels are to the left, which makes people's eyes zig-zag.

    Pasted image 20220222190514.png


    Pasted image 20220222190807.png

    Clear Input Fields #


    1. The single colored underline is not enough to show that this is an input field. People might mistake them for page breaks.

    Pasted image 20220222190924.png


    A subtle background color helps to make form inputs stand out.

    Pasted image 20220222191023.png

    Clear Input Focus #


    1. The currently focused input field does not give any indication that the user is inputting into it.

    Pasted image 20220222191145.png


    Add a highlight, underline, background color, etc... to show that this field is focused.

    Pasted image 20220222191240.png

    Use separate labels #


    1. This input relies on the placeholder to show what the input is for. However, the user might walk away and come back, or just forget what the field is for. Without a separate label that stays untouched, the user can get lost.

    Pasted image 20220222191432.png


    Pasted image 20220222191747.png

    Put placeholders outside inputs #


    1. When the user clicks on the input, the placeholder disappears. If the placeholder is conveying any useful information about e.g. formatting, then just put the placeholder outside the input so the user can always see it.

    Pasted image 20220222192006.png


    Pasted image 20220222192042.png

    Errors go next to inputs #


    1. All the errors are just dumped at the top or bottom.
    2. It's not clear which fields need to be changed.

    Pasted image 20220222192112.png


    1. Ensure each error message is as close to the source as possible.
    2. Ensure the problem fields are properly highlighted red so the user can quickly identify which fields need to change.

    Pasted image 20220222192216.png

    Minimize words. Move help to hovers/dropdowns. #


    1. Lots of words / explanation / supplemental info below the First Name field.

    Pasted image 20220222192708.png


    1. Move supplemental info into a hover text or pull-out thing so the actual form is clear.

    Pasted image 20220222192840.png

    Use effective whitespace #


    1. Inputs and labels are too cramped. Looks awful.

    Pasted image 20220222193025.png


    1. Just a little bit more whitespace makes things much nicer.

    Pasted image 20220222193102.png

    Avoid intimidating number of fields #


    1. Too many fields at once can be intimidating. Users will just give up and go elsewhere.

    Pasted image 20220222193243.png

    After (1):

    1. One option is to split the form into separate steps, so each step looks manageable.

    Pasted image 20220222193326.png

    After (2):

    1. Another option is to use some whitespace to group different inputs.

    Pasted image 20220222193443.png