Menu Search
Jump to the content X X
Smashing Conf San Francisco

We use ad-blockers as well, you know. We gotta keep those servers running though. Did you know that we publish useful books and run friendly conferences — crafted for pros like yourself? E.g. upcoming SmashingConf San Francisco, dedicated to smart front-end techniques and design patterns.

Posts Tagged ‘Forms’.

We are pleased to present below all posts tagged with ‘Forms’.

Useful Ideas And Guidelines For Good Web Form Design

The input form is an essential element of almost any website or application these days. Input is a core method of interaction, and in many cases it represents the hard conversion point between success and failure. With the amount time and effort we put into bringing users to our sign-up and contact forms, it’s surprising that we tend not to spend a proportional amount of time on the forms themselves.

Best Practices of Web Form Design

A number of techniques and elements can be used in Web forms to turn them from abject failures into successful conversion points. In this article, we'll present some interesting examples and useful guidelines for Web form design.


Innovative Techniques To Simplify Sign-Ups And Log-Ins

There are many ways to design sign-up and log-in forms. Most designers are familiar with the conventional ways. But understanding and applying a few innovative techniques could make your forms simpler and more efficient to fill out. In this article, we'd like to present a couple of new ideas that might be useful for your next designs. Please notice that before using these techniques, you should make sure that they make sense in the context in which you are going to use them. We'd love to hear about your case-studies and usability tests that affirm or dismiss the suggestions proposed below.

Innovative Techniques To Simplify Sign-Ups and Log-Ins

The purpose of every sign-up form is for users to complete it successfully and send it in. However, if the form is long and complicated, then the user’s excitement for your website could turn to displeasure. Here are a few innovative techniques that will make your forms faster and easier to fill out.


Forms On Mobile Devices: Modern Solutions

Mobile forms tend to have significantly more constraints than their desktop cousins: screens are smaller; connections are slower; text entry is trickier; the list goes on. So, limiting the number of forms in your mobile applications and websites is generally a good idea. When you do want input from users on mobile devices, radio buttons, checkboxes, select menus and lists tend to work much better than open text fields.


But constraints breed innovation, and mobile forms are no different. The limitations of mobile devices have forced developers and designers to find new ways to allow users to input data faster and more easily. Thanks to the modern solutions covered in this article, the mobile space may not be a place to avoid forms much longer. Instead, it may become the place to encourage them.


Web Form Validation: Best Practices and Tutorials

Ideally, users will fill the web form with necessary information and finish their job successfully. However, people often make mistakes. This is where web form validation comes into play. The goal of web form validation is to ensure that the user provided necessary and properly formatted information needed to successfully complete an operation. In this article we will go beyond the validation itself and explore different validation and error feedback techniques, methods and approaches. [Links checked February/10/2017]

Facebook sign-up form

User's input can be validated on the server and on the client (web browser). Thus we have server-side and client-side validation. We'll discuss pros and cons of each. In the server-side validation, information is being sent to the server and validated using one of server-side languages. If the validation fails, the response is then sent back to the client, page that contains the web form is refreshed and a feedback is shown.


Web Form Design Patterns: Sign-Up Forms, Part 2

Last week we have presented first findings of our web forms survey. The main objective of the survey was to provide designers and developers with some intuition of how effective web forms are designed; we also presented some guidelines of how an effective and user-friendly web form can be achieved. [Content Care Nov/11/2016]


We have focused on sign-up forms as we wanted to consider further crucial forms (e.g. checkout forms) separately. Afterwards we've gone through each and every one sign-up form of the selected sites and analyzed the design approaches implemented in these forms. Below we present the second part of our findings — the results of our survey among web-forms of 100 popular web-sites where web-forms (should) matter.

Please notice that this post is not about checkout forms — that's a topic for another discussion, we may consider them separately in one of the upcoming posts. We would like to thank Wufoo for providing us with a framework to conduct our survey.


Web Form Design Patterns: Sign-Up Forms

If you want to maximize the revenue of your service you need to maximize completion rates of your web forms. Unless you have some revolutionary ideas to impress your visitors at first glance, it is not enough to simply enable users to sign up on your site. To make it possible for the service to reach a maximal exposure we, designers, need to provide users with a good user experience. We need to invite them, describe to them how the service works, explain to them why they should fill in the form and suggests the benefits they'll get in return. And, of course, we should also make it extremely easy for them to participate. [Content Care Nov/15/2016]

However, designing effective web forms isn't easy. And it has one simple reason: nobody likes to fill in forms — neither offline nor online. Therefore, as designers, we need to figure out sound design decisions to make the form completion easy, intuitive and painless.

Web Form Design Patterns

But how exactly can we figure out these decisions? Where should the link to the form be placed in the layout? How should we design it? How should we highlight the labels and how should we align them? How do web form design patterns look like in modern web-sites? These were exactly the questions we've asked ourselves. And to get the answers we've conducted a survey.

Below we present findings of our survey of current web form design patterns — the results of an analysis of 100 popular web-sites where web-forms (should) matter. We have decided to start with sign-up forms first. We present the first part of our findings below; the second part of the survey results will be published next week.

Update: the second part of the survey results is now also published: Web Form Design Patterns: Sign-Up Forms Part 2.


↑ Back to top