Posts Tagged ‘Forms’

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

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.

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.

Read more...

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.

Screenshot

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.

Read more...

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.

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.

Read more...

Web Form Design: Modern Solutions and Creative Ideas

Web form is often the main communication channel between visitors and site owners. Feedback is always important which is why it's necessary to make sure that web forms are easy to understand and intuitive to use. Nevertheless, even in form design one can afford some healthy portion of creativity.

Web forms don't have to be boring and, using CSS or Flash, you can easily make sure that they are appealing and effective. To get noticed, you need to come up with something unique and interesting — symbols, icons, colors, position or the size of web form are often used to achieve interesting design solutions. We've searched for some examples and we've found them. Creative, original and unusual web forms.

Screenshot

Below we present over 40 (really) beautiful examples of web forms as well as modern solutions and creative ideas related to web form design. Some of the examples are Flash-based; however, in most cases you can easily create similar designs with pure CSS and (X)HTML.

Also consider our previous article

Read more...

CSS-Based Forms: Modern Solutions

In Web 2.0 registration and feedback forms can be found everywhere. Every start-up tries to attract visitors' attention, so web-forms are becoming more and more important for the success of any company. In the end, exactly those web-forms are responsible for the first contact with potential customers. Let's take a look, which modern solutions a web-developer can use, designing his/her next css-based form. Links checked: May/08 2008.

Read more...

Design Patterns: Badges, Tag Clouds, Huge Fonts

Web 2.0 dominates. Everywhere and all the time. The new design trends are there, in front of you and me, on the blog you've come from and on the blog you are going to visit next. Every now and again we find new design elements which somehow manage to become essential for every hip, trendy, glossy, stylish web-site which will be developed in the era of its majesty Web 2.0.

Read more...

↑ Back to top