Skip to main content

Designing The Perfect Web Forms

Vitaly Friedman
Your instructor
Vitaly Friedman
Tickets
Get a ticket ↓

Workshop includes:
  • 🔴  Live online sessions
  • 🗣  Active participation
  • 🎁  Workshop recordings
  • ✅  UX checklists

Workshop, 2×2h + Q&A Thu & Fri, November 17–18, 2022
09:00 – 11:30 AM PT (Pacific, US) (18:00 – 20:30 CET, Europe) Check your time zone

Nobody wakes up in the morning hoping to finally create a new account that day. Just because nobody loves filling in web forms: they don’t have a decent reputation, and rightfully so.

Very often they are inaccessible and difficult to use, with awkward live validation and notorious error messages; not to mention a birthday date-picker starting from 2021, a tiny newsletter checkbox, disabled “submit” buttons and horrendously evil CAPTCHAs in the disguise of street signs and crosswalks. So let’s fix web forms for good!


Here’s What You Should Be Expecting:

  • Interactive live sessions

    2 × 2.5h live sessions

  • Practical insights

    From filters and sorting, to search and autocomplete

  • Checklists

    20 checklists for everything from accordion to maps

  • Life-time access

    To all video recordings and examples

  • Dedicated Q&A time

    To ask all your questions

  • Smashing Certificate

    A well-deserved reward for your work


In this workshop, we’ll take a close look at everything around web forms — design, layout, validation, error recovery, user flow, common issues and the workflow to design web forms that people understand and positively respond to. Ultimately, this will help drive conversion and business KPIs. Plus, we’ll look into smart design patterns for web forms — on desktop and on mobile.

We’ll study 100s of hand-picked examples — all of them will be coming from user research and usability studies of real projects — proven to work or fail in practice.

$200 .00 $250.00Register for this workshop →2 × 2h live sessions + Q&A. Nov 17–18.
With all video recordings & slides. Get a ticket.

🎪  Save up to 25% on this workshop with a Smashing Membership.


We’ll Cover:

  • How people perceive and use web forms, with common usability issues and typical user behavior
  • Single-page-layout vs. multi-page-layout in wizards, checkouts and any multi-step-processes, incl. complex corporate forms
  • Input budgets, a strategy of measuring how effective and well-designed a form is
  • Required and optional input fields, with layout, design and copy, labels and placeholders, incl. floating labels and design of placeholders,
  • Radio buttons and checkboxes, when and how to use them to avoid misunderstandings and speed up customers in the process,
  • <select> menus, drop-downs, overlay menus and their alternatives
  • Disabled buttons, and how to manage it to avoid high abandonment,
  • Steppers, buttons and datalists, and in which situations they work better, and how to use them to speed up your customers,
  • Search, filters and sorting, with common mistakes and usability issues,
  • Sliders, with common problems and bulletproof solutions.
  • Date and time input, as input fields and widgets, in terms of design and layout, e.g. for a birthday picker, or a calendar.
  • Autocomplete UX, and what makes a great autocomplete in various settings, e.g. product search or country selector,
  • When address lookup widgets make sense, and when they hurt conversion,
  • The interface design and interaction design of the credit card input
  • Error validation, messaging and recovery, how and where to display errors to decrease abandonment rates.
  • How to get email and password input right, especially in terms of interaction design and timing.
  • Authentication patterns, with CAPTCHA and 2-factor-authentication UX patterns.
  • Extensive web form design checklists for your projects.

By the end of the session, you’ll have a comprehensive toolbox with practical techniques and strategies to address pretty much any kind of web form issue in no time!

Note: If you’ve already attended Vitaly’s “Smart Interface Design Patterns” workshop, it’s still worth attending this one. We’ll spend 6h exploring all facets of forms in detail, incl. filters, sorting, search and autocomplete, which we haven’t covered just yet.


Who is this workshop for?

This workshop is for interface designers, front-end designers and developers who’d love to be prepared for complex and time-consuming design challenges in web forms. You’ll walk away with a toolbox of techniques and examples of doing things well — in your product, website, desktop app or mobile app.

What hardware/software do you need?

You’ll need to bring a lot of creativity with your preferred coffee mug. We’ll be spending a lot of time drawing, sketching, designing and thinking.

Be ready to challenge your general view of design process and how our interface should look like. You’ll need a lot of sleep reserves since it’s going to be a packed day. Bring a lot of attention to detail and non-standard thinking to this one! ;-)

About Vitaly Friedman

Vitaly Friedman loves beautiful content and doesn’t like to give in easily. When he is not writing or speaking at a conference, he’s most probably running front-end/UX workshops and webinars. He loves solving complex UX, front-end and performance problems.

Time & Schedule

This remote workshop is split over two days. The schedule may change slightly based on how we are progressing through the material, giving time to answer questions as we go along. The workshop will be running from 9:00 AM PT to 12:00 PM PT on Monday and Tuesday on August 29–30.

  • Mon, August 29, 09:00 – 12:00 AM PT (18:00 – 21:00 CET)
  • Tue, August 30, 09:00 – 12:00 AM PT (18:00 – 21:00 CET)

You can always re-watch the sessions at a more convenient time and follow the workshop at your own pace.

$200 .00 $250.00Register for this workshop →2 × 2h live sessions + Q&A. Nov 17–18.
With all video recordings & slides. Get a ticket.

🎪  Save up to 25% on this workshop with a Smashing Membership.


Day 1

8:45 AM PT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:30 AM
We’ll explore how people perceive input and study drop-downs, radio buttons, checkboxes, address look-up widgets and complex forms.

11:30 AM – 12:00 PM
Q&A with Vitaly on the day’s material. Networking!

Day 2

8:45 AM PT
Virtual doors open, registration, chat and introductions.

9:00 AM – 11:30 AM
We’ll dive deeper into interaction design, inline validation and error recovery. We’ll also explore filters, sorting, search, autocomplete UX and authentication design patterns.

11:30 AM – 12:00 PM
Q&A with Vitaly on the day’s material. Networking!

$200 .00 $250.00Register for this workshop →2 × 2h live sessions + Q&A. Nov 17–18.
With all video recordings & slides. Get a ticket.

🎪  Save up to 25% on this workshop with a Smashing Membership.