Web Form design: Form structure

[Copyright notice]: The copyright belongs to the author Alite all, reprint when please use the hyperlink form to indicate the article original source and the author information and this statement: http://www.alitedesign.com

Have you ever felt frustrated or overwhelmed with your form design? The next three articles, hoping to radically change your view, really fall in love with Web Form design. First of all, thanks to Luke Wroblewski's help, I have the opportunity to carefully taste the fun of designing forms. Overall, Web Forms dominate billing, registration, and data entry. A large number of items on ebay and Taobao are sold on a daily basis by selling items (Sell Your item), and more than hundreds of millions of of users in MySpace and Facebook join the site community through Web Forms; YouTube, Youku collects a lot of video by uploading videos (Upload Your video) forms. All this has created a lot of opportunities to touch Web Forms, and Web forms are often the last and most important step of a long journey.

will you design the form?

For Yahoo's registration form, we can generally observe three main elements: title, data, action. They are the basic elements that make up a form, and too many cosmetic forms or too much useless information can give users more thought and disgust. Sometimes users feel that forms are annoying, they want to vote, apply for jobs, buy Books Online, join groups, or get discounts on recent purchases, but the form is causing trouble to users and hampering them.

Most forms are "Inside out" rather than "out of the Box" (Òoutsideó in). For example: If anyone wants to be a member of the website, the website will ask users to provide user name, password, email, etc. This is the "from the Inside Out" design, most users do not think that the enjoyment of web services and fill out a nasty form of the inevitable relationship. At the same time, the "out and inside" design means looking at the business from the perspective of the organization or the outside of the site. At this point, project members need to use the user's perspective to discuss the design of the form, the goal is to make it easy for users to complete. Let the form exist in some kind of stealth balance, but it ensures that both the system and the user get what they want.

In E-commerce, social interaction, productivity Web sites, we find that forms hinder user needs and business objectives by:

People buy the goods they need from an E-commerce site, and the settlement form hinders both sides of the transaction. People join social networking sites to chat or share content with friends, and from increasing the user base and activity, they are blocking both the registration form and the contact form. People want web-based productivity tools to create efficient collaborative work, and when companies want to add content to the site and increase the user's time, the form once again blocks both.

Web Form design in the payment and registration links, will play a crucial intermediary role. Human-Computer Interaction (Computer Human Consortium, CHI) conference in 2004 has a paper titled "The Process of creating a user experience business case", the author is the ebay user experience and design team. They collect usability data, customer support records, Web site logs, and network practices to suggest a form redesign. The project then had a positive impact on the ebay registration form product line and became a model for evaluating and funding design projects.

By drawing the entire Process page by line, while cooperating with the website click data that describes the user leaving and best practice analysis, we analyze the meaning of each data separately:

The purpose of usability testing is to obtain valuable qualitative and quantitative data.

the number or position of errors or problems, the severity of the error or problem, the completion rate, the time to complete the form or part of the form, the satisfaction score, and the task subjective comment.

Field tests from an ethnographic perspective, the way people interact with forms in different contexts.

Access forms require the source of information: documents, software, and people; form filling environment: Noisy office and small monitor, etc. any additional scenarios that describe the completion or error rate of the form.

Customer support through customer service or interviews, to understand the user to use the form of the problem found, conducive to separation and solve problems.

the most reported problems, common methods for solving reporting problems, statistical information about the problem speaker, and the operating system and browser settings used by the problem speaker.

Web site tracking forms can be used to track any number of useful measurements.

completion rate; If the form is not completed, where people are giving up the form, how people access the form, what form elements are used, what data is entered, browser and operating system information.

Eye movement tracking records how users understand the form's presentation and can be used to explain complex areas.

what people see on the form; Eye fixation: Parsing the effort spent on the form; Eye fixed length: The time it takes to look at each element.

Common solutions to Web usage survey Form design issues provide valuable insights.

A unique solution to design problems;

You can also get a lot of useful observational information by observing how users complete the form, or by using off-the-shelf web analytics software to monitor site logs.

Although it is difficult to design a good form, often "as the case may be", but by considering the design factors of the form, that is, the following we say, find the appropriate solution principles and patterns, you can design a good form. For the Internet form design, the principles are as follows:

Minimize Pain-the user is not interested in what is before, more care about what can be achieved, so that the process as simple and fast as possible. Description fill out the completion path-the form should have clear hints or help the user to tell them how to accomplish the goal quickly. Consider situations-forms are not independent, they are part of a broader context (audience, application, business) that determines how forms are used. Ensure consistent communication-a form of communication between the user and the company, with multiple teams participating in the conversation, but the final form can only convey a consistent sound.

Jarid Spour once had a classic case: The Change button adds 300 million dollars to the site's annual revenue. Rough sounds like an Arabian tale, but it's true. How good design can create value for business is a problem that the design team has been thinking about. One thing is certain, we use objective data and rigorous experiments to prove our design principles and design patterns, so that they maximize the value of the design, to achieve the goal of creating value for business.

Do you build form organizations?

In the face of excellent form design, people can easily fill out the form, there are visual and interactive design considerations on the impact of the form, but more important factor is the content of the form and the way it is organized. Here are some of the principles that we can get through years of design practice:

You should take the time to evaluate the problems in the form. Vigilance should be taken to remove all unnecessary problems. The problem (label) of the form should be as concise as possible. If people misunderstand simple labels, they should look for opportunities to use natural languages and clarify questions that the form asks people to answer. The problem with the form comes from multiple different people or departments, and you should make sure that the form is stick. You can organize your form content into logical groups to help you browse and complete the fill. If possible, form should be built as a dialog. Natural discontinuities between themes help organize forms. If a form can be naturally divided into topics, a Web page may be sufficient to organize the form. If your form contains a number of issues, and you have several topics, you may need multiple pages to organize your form. If your form contains a large number of issues and is related only to a single topic, you typically need a longer page to organize your form. Consider presenting an optional question after the form has been filled out. You may get more answers than you can ask in the initial form. You might consider using a Web practice survey to find out how a particular type of Web site organizes a form. The minimum necessary visual information should be used to differentiate the content group. The initials of the English web site should be capitalized to make the content group easier to navigate.

Carolyn Jarrett, a Effortmark company usability consultant, said: "Consider people first, consider pixels." "Before you start designing, consider a question: What do users really care about?" The designer's attention to pixels may also overlook the human factors-such as the subtle details of whether a colon should be placed at the end of the tag. The user really doesn't care about the colon. In fact, the user is really concerned about the content of the problem and why to ask these questions. Start by getting to know your users and find out why your form is so designed. Is the user concerned about the relationship point? "Retention, deletion, delay, interpretation" to form a better problem of the four strategies, at the same time, a variety of perspectives to balance user needs and business needs.

What form design details should you pay attention to?

The design of the form should pay attention to the details of the processing, such as: The name of the form, the Start page, a clear navigation line, focus on the least distracting, process instructions, tab jump, and so on. In fact, there is a point is to let users know the path to complete the form.

Make sure that the form name meets people's expectations and succinctly explain the purpose of each form. If the form needs time or query information to fill out, you can use the start page to set people's expectations. From beginning to end adopt clear browsing Line and effective visual step to guide people, ensure that the clear completion path. For mission-critical forms, such as billing forms or registration forms, you should remove distractions and any links or content that causes people to drop out. If the form is divided into known ordered Web pages, process instructions can be used to communicate the scope, status, and location information. If the form does not have a clear and orderly web page, do not use process instructions, you should adopt more general process directives, rather than setting false expectations. When designing a form layout, consider using the TAB key's jump experience. Use the "TabIndex" HTML property to control the form's jump order.

"For many users with disabilities, the design accessibility of a form is particularly important," said Peter Vaulec, Oracle's accessibility director. Availability is at the heart of accessibility. For example, if a Web page cannot be used or cannot be started, accessibility needs to be "super Design" (uber-design) first. Includes: Super reduce pain, super Express completion Path, super Consideration of the mirror, super ensure consistent communication. You can also follow the best accessibility guidelines for the Internet Content Accessibility Guidelines (WCAG) and the U.S. Procurement Act 508 chapter.

Registration Form Design Example (Registration Form designer examples): Twitter

Mint

Facebook

Live

Vox

Box

Netvibes

Compete

Aol

WordPress

Blogger

Xanga

Hi5

Outright

Deviantart

Basecamp

Yelp

Vimeo

Ning

Metacafe

Mint

Fotki

Myspace

Luluanimoto

Wufoo

Geni

Netflix

Ebay

Ballpark

craigslist

Gowalla

Mobileme

Login Form Design Example (login form designing examples): Twitter

Animoto

Tumblr

Delicious

Myspace

Gliffy

Footnote

Hulu

Polldaddy

VIRB

Piczo

Mint

Tutsplus

Cnn

Viddler

TypePad

devunity

Imagekind

Yahoo

Scrapblog

ZOOOMR

Mobileme

Grooveshark

Source: http://www.aliued.cn/2011/03/15/web-form-design-form-structure.html