UI/UX Designing Buttons Forms and Input Fields

Every time a user clicks a button or fills out a form, they are trusting your design to guide them correctly. A poorly designed button confuses people. A bad form frustrates them so much that they leave your product entirely. This page teaches you exactly how to design buttons, forms, and input fields that feel good to use, are easy to understand, and get results.

Why Buttons and Forms Matter So Much

Buttons and forms are the places where users take action. They sign up, place orders, send messages, and log in. These are the moments that define whether your product succeeds or fails.

Think of a button as a doorbell. It should be easy to find, satisfying to press, and it should always do something predictable when you press it. A form is like a conversation — it asks questions and the user answers them. If you ask too many questions at once, or ask them in a confusing way, the user gives up and walks away.

The Anatomy of a Well-Designed Button

A button has several parts that all need to work together:

Button Label

The label tells the user what will happen when they click. Always use action words. Instead of writing "Submit," write "Create My Account." Instead of "OK," write "Save Changes." The user should know exactly what happens before they click.

Here is a simple comparison:

BAD BUTTON LABELS:
[ Submit ]    [ OK ]    [ Continue ]    [ Yes ]

GOOD BUTTON LABELS:
[ Send Message ]    [ Download PDF ]    [ Start Free Trial ]    [ Delete My Account ]

The difference is specificity. Good labels remove all doubt from the user's mind.

Button Size and Touch Target

On mobile devices, fingers are not as precise as mouse cursors. A button that is too small causes users to tap the wrong thing or miss entirely. Apple and Google both recommend a minimum touch target size of 44×44 pixels.

Think of it like this: imagine trying to press a tiny doorbell that is only 5mm wide. You would miss it every time. Make buttons large enough that pressing them feels effortless.

TOUCH TARGET DIAGRAM:

  Too Small (20x20px)    Correct Size (44x44px)
  ┌──┐                   ┌────────────────┐
  │  │                   │                │
  └──┘                   │   [ Button ]   │
  ← 20px →               │                │
                         └────────────────┘
                         ←     44px      →

Button States

A button is not just one thing. It changes depending on what the user is doing. Every button needs at least four states:

BUTTON STATE DIAGRAM:

Default     → Normal appearance. Ready to click.
             [ Save Changes ]

Hover       → User's cursor is on it. Slight color change signals it's clickable.
             [ Save Changes ] ← slightly darker or with underline

Active      → User is pressing it right now. Button looks "pressed."
             [ Save Changes ] ← pushed down visually

Disabled    → Action is not available yet. Button is greyed out.
             [ Save Changes ] ← faded, cannot click
             
Loading     → System is processing. Show a spinner inside the button.
             [ ● Saving... ]

Forgetting states — especially the disabled and loading states — is one of the most common mistakes in button design. Without them, users click buttons multiple times and wonder if anything is happening.

Button Hierarchy: Primary, Secondary, and Tertiary

Not all buttons are equal. On any screen, there is usually one main action you want users to take. That is the primary button. Other actions are secondary or tertiary.

BUTTON HIERARCHY EXAMPLE:

On an email compose screen:
  
  Primary   → [ Send Email ]           ← Filled, most visible
  Secondary → [ Save as Draft ]        ← Outlined, less visible
  Tertiary  → [ Discard ]              ← Text only, least visible

Visual weight goes DOWN from primary to tertiary.
You never want two primary buttons on the same screen.

Putting two primary buttons side by side confuses users. They do not know which one to click. Always give one action the spotlight.

Designing Forms That Users Actually Complete

Most users hate filling out forms. Your job as a designer is to make forms feel as painless as possible. The best forms feel like a natural, helpful conversation, not a government questionnaire.

Rule 1: Ask Only for What You Need

Every field you add to a form increases the chance that a user will abandon it. A study by Formstack found that reducing the number of fields in a form from 11 to 4 increased conversions by 120%.

Before adding any field, ask yourself: "Do we actually need this information right now?" If you can get it later, remove it from the form.

FORM FIELD AUDIT EXAMPLE:

Registration Form - BEFORE:
  First Name  |  Last Name
  Email
  Password
  Confirm Password
  Phone Number
  Date of Birth
  Company Name
  Job Title
  Country
  City
  
Registration Form - AFTER:
  Email
  Password
  
  ← Removed 8 unnecessary fields.
  ← Collect the rest after the user signs up.

Rule 2: Use Single-Column Layouts

Research from CXL Institute shows that single-column forms are completed faster than multi-column forms. Multi-column layouts force users to zig-zag their eyes across the screen, which slows them down and causes errors.

FORM LAYOUT COMPARISON:

MULTI-COLUMN (Slower, more errors):
  [ First Name  ] [ Last Name   ]
  [ City        ] [ State       ]
  [ Email       ] [ Phone       ]

SINGLE-COLUMN (Faster, fewer errors):
  [ First Name        ]
  [ Last Name         ]
  [ Email             ]
  [ Phone             ]

There is one exception: very short, clearly related fields like City and State, or Month, Day, and Year can sit side by side because users naturally expect them together.

Rule 3: Write Helpful Labels

Labels tell users what to type. Place labels above the input field, not inside it (as placeholder text). Placeholder text disappears when the user starts typing, leaving them confused about what they were supposed to enter.

LABEL PLACEMENT DIAGRAM:

WRONG - Label Inside (Placeholder):
  ┌──────────────────────────────┐
  │  Enter your email address    │  ← This disappears when user types!
  └──────────────────────────────┘

RIGHT - Label Above Field:
  Email Address
  ┌──────────────────────────────┐
  │                              │
  └──────────────────────────────┘
  example@email.com              ← Hint stays visible below

The label above the field stays visible the entire time. The user never loses track of what they are entering.

Designing Input Fields

An input field is the space where users type information. Good input field design reduces typing errors and makes the form feel easy.

Field Width Should Match Expected Input Length

The width of an input field sends a signal about how much the user should type. A field that is 10 characters wide tells the user to type something short. A field that stretches the full width of the screen suggests a long answer.

FIELD WIDTH SIGNALS:

ZIP Code (5 digits expected):
  Zip: [ 12345 ]     ← Short field = short answer

Message (long text expected):
  Message:
  ┌──────────────────────────────────┐
  │                                  │
  │                                  │
  │                                  │
  └──────────────────────────────────┘
  ← Tall, wide box = long answer welcome

Input Types: Use the Right Keyboard on Mobile

HTML gives you many input types: text, email, number, tel, date, password, and more. Choosing the right type triggers the correct keyboard on smartphones.

MOBILE KEYBOARD TRIGGERED BY INPUT TYPE:

type="email"    → Shows @ and .com buttons on keyboard
type="tel"      → Shows number pad (0-9)
type="number"   → Shows numeric keyboard
type="date"     → Shows date picker
type="password" → Hides characters as user types

Using type="text" for a phone number field
forces users to manually switch keyboards.
That is extra effort and causes frustration.

Error Messages That Help, Not Blame

When a user makes a mistake, the error message is your chance to help them fix it. Never write error messages that sound like you are scolding the user.

ERROR MESSAGE COMPARISON:

BAD ERROR MESSAGES:
  ✕ "Invalid input"
  ✕ "Error"
  ✕ "This field is required"

GOOD ERROR MESSAGES:
  ✓ "Please enter a valid email address, like name@example.com"
  ✓ "Password must be at least 8 characters — try adding a number"
  ✓ "Phone number is missing — we need this to send your receipt"

A good error message tells the user what went wrong, where the problem is, and how to fix it. All three pieces of information together make errors easy to resolve.

Inline Validation: Catch Mistakes Early

Instead of showing all errors after the user hits Submit, show feedback as they fill out each field. This is called inline validation.

INLINE VALIDATION EXAMPLE:

User types in the password field:
  
  Password: [ mypass ]
  ↓ Field turns red after moving to next field
  ✕ Too short — use at least 8 characters
  
User adds more characters:
  
  Password: [ mypassword1 ]
  ↓ Field turns green after moving to next field
  ✓ Strong password!

Inline validation reduces form errors by up to 22% according to research by Luke Wroblewski. Users catch problems while the field is still in front of them, not after clicking submit and having to scroll back up to find the error.

Checkboxes, Radio Buttons, and Dropdowns

Forms use several types of selection controls. Each one is suited for different situations.

When to Use Each Control

SELECTION CONTROL GUIDE:

RADIO BUTTONS → Use when user must pick exactly ONE option from a short list
  Payment Method:
  ● Credit Card
  ○ PayPal
  ○ Bank Transfer

CHECKBOXES → Use when user can pick MULTIPLE options or toggle something on/off
  Notify me about:
  ☑ New messages
  ☑ Promotions
  ☐ News updates

DROPDOWN → Use when there are MORE THAN 5 options and space is limited
  Select your country: [ India ▼ ]

SEGMENTED CONTROL → Use for 2-4 options when switching view or mode
  [ Daily ] [ Weekly ] [ Monthly ]

Using a dropdown when there are only 2 or 3 options makes users do extra work. Two radio buttons shown side by side are faster and easier to scan.

Form Feedback: What Happens After Submission

The moment after a user submits a form is critical. They are waiting to know if their action worked. Give them clear, immediate feedback.

FORM SUBMISSION FEEDBACK STATES:

1. PROCESSING:
   [ ● Submitting... ]   ← Button becomes a spinner
   (Prevents double-clicking and shows something is happening)

2. SUCCESS:
   ✓ Message sent successfully!
   We will reply to your@email.com within 24 hours.
   (Tell them what happens next)

3. ERROR:
   ✕ Something went wrong. Your message was not sent.
   Please try again or email us at help@example.com
   (Give them another path forward)

A success message that just says "Done!" is not enough. Tell users what happens next — when they will hear back, where to go, or what to expect.

Password Fields: Special Considerations

Password fields hide what users type, which means they cannot see their own mistakes. Two design choices help here:

PASSWORD FIELD BEST PRACTICES:

1. SHOW/HIDE TOGGLE:
   Password: [ ••••••••  👁 ]
                         ↑ Eye icon lets users reveal their password
                           Reduces typos when creating a new password

2. STRENGTH INDICATOR:
   Password: [ myP@ss123     ]
   
   Strength: [████████░░░]  Strong
             
   ← Visual bar shows password quality in real time
   ← Users understand requirements without reading a list

Designing for Autofill

Modern browsers save user information and can fill forms automatically. Design your forms to work with autofill, not against it.

Use standard HTML autocomplete attributes on your input fields. This tells the browser what type of data goes in each field:

AUTOCOMPLETE ATTRIBUTE EXAMPLES:

Name field:      autocomplete="name"
Email field:     autocomplete="email"
Phone field:     autocomplete="tel"
Address field:   autocomplete="street-address"
City field:      autocomplete="address-level2"
Password field:  autocomplete="current-password"
New password:    autocomplete="new-password"

When a form supports autofill, users can complete it in seconds instead of minutes. This alone can dramatically increase form completion rates.

Key Points

• Button labels must use specific action words — tell users exactly what clicking will do.
• Every button needs at least four visual states: default, hover, active, and disabled.
• Never put two primary buttons on the same screen — one action should dominate.
• Remove every form field that is not absolutely necessary right now.
• Place labels above input fields, never use placeholder text as a replacement for labels.
• Use the correct HTML input type to trigger the right keyboard on mobile devices.
• Write error messages that say what went wrong and how to fix it.
• Use inline validation so users catch mistakes before hitting Submit.
• Choose the right selection control: radio buttons, checkboxes, or dropdowns based on the number of options and selection rules.
• Always show clear feedback after form submission — success, loading, or error.