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.

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.

• Thu, November 17, 09:00 – 12:00 AM PT (18:00 – 21:00 CET)
• Fri, November 18, 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.

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!