Do you know how to design a form? Web page form structure design

Web page Production WEBJX article introduction: Web Form Design: Form structure.

Have you ever felt frustrated or overwhelmed with the design of your form? 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.

do you know how to design a form?

The above for the Yahoo registration form, we can generally observe the 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 find the form annoying and want to vote, apply for a job, buy Books Online, join a group, 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 and so on. 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 the fill. Let the form exist in some kind of stealth balance, but it will ensure that the system and users get what they want.

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

• 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 Interaction, CHI) Conference in 2004 has a paper titled "The Process of creating a user experience business case", and the author is an 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;
• Completion rate;
• The time to complete the form or part of the form;
• degree of satisfaction score;
• Task subjective review.

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

• Access to forms required to fill out the source of information: documents, software and people;
• Form Fill 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 issues;
• Common approaches to addressing reporting problems;
• The statistical information of the problem speaker;
• 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 in the position to give up the form;
• The way people access forms;
• Which form elements are used;
• What data has been 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 fixed number of times: The effort to parse the form;
• Eye fixed length of time: see how long each element takes.

Common solutions to Web Usage Survey Form design issues provide valuable insights.

• Unique solutions to design problems;
• A common online model.

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 -users are 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.

Will you build the form organization?

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 language 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. A natural interruption between themes helps organize your 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 large number of issues, along with 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, users are 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 also 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 "jump" experience of the TAB key.
• 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.

[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