Selection, arrangement and terminology of form problems

Web page Production WEBJX article introduction: detailed discussion of Web page form design.

This article is not a three-book summary of the notes, do not put all the points are listed here, otherwise the publishers will be anxious with me. Here are a few key points to do some summary, one urge themselves to examine the content of the understanding, and secondly to provide readers with thinking and discussion.

Design form and the design of any interactive product, like the need for data support, Luke listed a typical user data source channel: Product Usability testing, on-site survey, customer service resources, website tracking data; Eye Tracking;web Convention, if you are familiar with UCD, This should be a familiar one.

For the different types of test user credibility, test questions such as details, Caroline gave a more detailed elaboration, more content, and I have a part of the content of the question, not listed here, if you are interested, you can refer to the original book.

Selection, arrangement and terminology of form problems

Choice of questions : Luke's four-word principle is keep (Paul), Cut (CHOP), postpone (extension), Explain (interpretation). Simply put, keep the core issues, cut off the current non-core issues, delay the problem to the right situation, and explain the sensitive issues of privacy.

In the case of a registered form, most Web sites, especially Web applications, are retained to the simplest: User name, password, mail, is the core data source for users to provide services, some applications will choose to continue to ask name, date of birth, etc. as an optional, but more applications will choose to defer to the user himself want to set personal information to give a choice. If you want to say which is more appropriate? This may depend on the designer's judgment of the function and nature of the product, confidence in the confidence of the company in the public mind, and, of course, the "appropriate situation" to determine the problem after communicating with other departments. Social networking sites from the functional nature of the registration of the name, date of birth may be acceptable, but for example, simple todo list, online notes This personal application, there may be no need to register the name, date of birth and other information.

the arrangement of the problem: Form interactive process such as the previous discussion of its nature, like a dialogue, the need for good logic, otherwise, there is an idiom can be described: incoherent, so the problem in the arrangement need to be logical. For a long form, proper grouping and paging helps to express logical coherence, as if the conversation were moving from one topic to the next. While interactive design suggests that you are likely to be a very logical person, it may be better to use user testing and communication with other members of the team to understand the links between the various issues to help your design.

the language of the problem (wording): especially if the design of online questionnaires, the question of the way and the language is likely to greatly affect the credibility of data collection. It is a good choice for the designer to communicate and collaborate with a group of members with a psychological and sociological background.

Caroline has a classification of the answer type of the question, which I think is worth learning from:

• Slot-in: Refers to the information inherent in the brain such as name, sex, place of birth, etc.
• Gathered: Users need to collect information themselves, such as the name of a business card in the wallet, email, paragraph on a computer article, etc.
• Third-party: Third party information source, is the user needs from other people to get the information, such as to the other party to send money to ask the other person's account number first;
• Created: Users "create" answers when they see a problem.

There is no strict distinction, the problem is due to people, circumstances vary. For example, passwords, nicknames, it is likely that users have their own inherent choice, but if for security, repetition and other reasons are required to provide a different choice, then the user may have to go to the "creative" road. (I am more sinister, if the user unfortunately suffered serious brain damage, forget their thy name ...) ）

The question is, what is the point of this distinction? My answer is to help us think more logically and in terms of building a form:

Type of problem	corresponding policy
Slot-in	The problem is presented in the shortest form, such as common username, password, etc., because these belong to "resident" brain information, too much explanation appears redundant;
Gathered	Some tips on sources of information may help users, such as credit cards, because these are generally in the life of more frequent contact information, usually without cumbersome interpretation or definition;
Third-party	It may be necessary to interpret the required information in a formal form of problem, and the help of some sources may help the user, as well as the need to consider sending the relevant information to a third party;
Created	May need to be presented as a formal issue and consider providing help to assist users in structuring the answer.

Combined:

1. Don't take for granted the problems you think of, a whole brain put on the form to throw to the user;
2. Whether the problem itself or the relationship between each other need to be logical;
3. What kind of questions to ask? What support do you need to provide to your users? We need to think hard, and we need feedback from users.

The effect of Form layout on user scans

There are many eye tracking experiments in Luke's book. About the label on the alignment, left alignment, right alignment, the position of the submit button and so on have a corresponding "best practice" (top practices), I do not list here, otherwise the publisher and I should be anxious. Here, Luke and the conclusion of Caroline together, make a simple summary, "spoilers" Innocence!

A little off, it's hard to say, at least I don't have any conclusions about how much eye tracking can help us understand the user. An HCI professor once told me that: what they look at, May is what they think of. This is a perennial professor who uses eye tracking to analyze players playing video games (right, yes, the professor who studies playing games ...). Well, I'm misleading you, actually through the game to study people's "immersion" phenomenon, so, in the opportunity to prove the role of eye tracking, my view is still usability testing,,field observation, etc. to measure the user's use, Eye Tracking as auxiliary.

Well, put aside the eye tracking, and summarize the role of form layout (the next article may better explain this part of the story)

alignment : Scan trajectory standard vertical downward, so theoretically the fastest, but the vertical occupy large space, not suitable for more than the problem of the form, but the change in the length of the problem is good adaptability.

(Photo source: http://www.flickr.com/photos/rosenfeldmedia/2367264762/)

Right Alignment : The scan trajectory is also basically vertical downward, so the theory is also very fast, vertical footprint small, the problem length of the adaptation of the change is poor. However, if the user needs to browse all problems, the speed drops.

(Photo source: http://www.flickr.com/photos/rosenfeldmedia/2367264946/)

left alignment : Scan trajectory level more longer, so slower, vertical footprint small, the problem length changes in the adaptability of poor. However, if users browse all problems, speed will not be affected.

(Photo source: http://www.flickr.com/photos/rosenfeldmedia/2367264266/)

When and how do I use the alignment?

• Alignment : The problem is less, the length of the problem may vary greatly (for example, multiple languages), want the user to complete quickly. If all your problems belong to slot-in type, and the quantity is few, I think this kind of method is basically the first choice;
• Right alignment: Similar to alignment, but suitable for more problematic form;
• left alignment : A large number of users are unfamiliar with the problem, want users to spend time thinking about these issues;
• other : The problem is also placed inside the input box to save the horizontal space needed, but as the input box becomes the focus, the problem disappears. Users may be distracted or have cognitive barriers to forget the problem, at this point the disappearance of the user is a disaster. My advice is to try to avoid the design (OK, Csskarma gives a very strange solution, if you are interested, you can look at this Demo).

Help, error hints, and positive information

I want to have a Caroline classification of problem types, there should be a good basis for deciding what kind of help information is needed, and it needs to be emphasized that help information not only tells users how to fill out, but also how to fill in the privacy data, and the relevant protection commitments (legal).

It's not a good idea to focus on a large section of help information. Because it's easy for us to quickly jump to the first input box, on the internet, "Patience" is a rarity, whether dynamic or static, the help for the situation is much better than the lazy to throw a large section of help in a pile.

The asterisk (*) is basically the default "required" code, but there are many ways to place it, Caroline's book mentions eye track shows that users rarely notice the right side of the input field and focus on the left side of the input field, so if you need a callout (*), Label and input may be the best choice, followed by the left side of the label, and finally the right end of the input field:

(Cool 6 Registration Form Design, note the location of the asterisk)

My question for the asterisk is that screen Reader cannot tell the user that it means "required", and SitePoint's book offers a solution:

<label for= "username" >username

<abbr title= "Required Field" >*</abbr>

</label>

<input id= "uname" type= "text" name= "uname" value= ""/>

How do I render relevant information? My idea is to try to avoid the inside of the input box help, so that the corresponding questions and help information in the visual clear and simple contact is good, do design to remind yourself to do more subtraction.

The reason for the error message is that is because some sites only tell you a mistake, do not give you a hint, of course, if you throw a "system error" can not find North, the following is the registration form Taobao, most of the time the error message is related to the error, but there is still the following situation:

(Taobao registered form design)

One of the things I'm disgusted with is that you detect errors in your input process, and when you start typing, you see a red fork put there and tell you: "You're wrong!" "And then keep talking until you're right. It's like a man keeps scolding you: stupid, stupid, stupid ... Until finally, it said: "God, you fool finally touched the right." In fact, you know exactly what you're typing.

Any interaction mode depends on the specific application scene, the same situation, such as the following text message input box prompts is very good application (recommended Blogbus, do not wait until I have finished submitting the article "Super Long"):

(Photo source: http://aralbalkan.com/687)

As programmers, whether the back-end of the Php,python,ror,java, or front-end html,css,javascript, are accustomed to the "Inside Out" perspective: I can do so cool function, the user side input, I side check, It's a waste not to show it to the user. As a designer, the need for "outside in", and then cool things, used in inappropriate places, then I can only 110 to sue you "disturbing the people." There are a lot of collections and summaries of interactive patterns on the web, but only when users, functions and scenes are truly understood can the most appropriate patterns be used in the most appropriate places.

In addition to the error message, there is also a positive information, or call success information. As a programmer, you may rarely consider "affirmative": You should have been right, why should I be sure of you? Many Web sites will be registered in the input field after the loss of focus to check your input, if the site to meet the requirements of the answer, will be in the input field to the right or below display a correct symbol. This is really a very intimate function, the user's efforts on every issue is a positive encouragement. My thinking is, even if the error message, whether it can be appropriate to the user's efforts to encourage, rather than a one-sided feeling of frustration? For example, a unique user name, if the user unfortunately chooses a duplicate username, whether the error prompts you to confirm the user's choice when prompted: Although the username is registered, it is "unique" and "cool", and we recommend some equally "unique" and "cool" username (of course, this requires that you actually generate comparisons.) Unique "user name).

Submit button

The placement of the submit button, Luke gives the only clear suggestion, and aligns the input box (left) (see the three eye tracking example above).

As for secondary buttons, such as resetting, if necessary, as Luke suggests, it is best to have the mechanism to allow the user to "undo" the Reset operation.

Process design and interference factors for pagination form:

The logic of pagination is the basis of a good interaction design, as if turning from one topic to another, without making people feel abrupt and suspicious. The process of removing other unrelated links, visual elements, and even entire Web site navigation from the page where the form resides is a number of strategies for registering and paying processes, such as Amazon, where maximizing the degree of completion of these key processes is key to the success of the site, Leaving only the form-related elements seems to be a successful strategy that Amazon practices recognizes.

When it comes to paging, tell the user what steps to go through from the start, and how long it will take. And at each step to tell the content of this step and the position in the overall progress (a negative example will be mentioned in the following article), if you are not sure that there will be branching optional steps in the main step, then don't count it out step-by-step. Telling the user which stage they are in is enough.

Personalized:

Personalized (personalization) that is, according to the user's personal preferences and use of the situation, automatically complete the form part of the content (so-called smart Default), such as Amazon will automatically put your most commonly used credit card as a way to pay for shopping, But it also retains a form that allows you to choose other credit cards, and many sites automatically fill in Geographic information based on User IP.

It is true that personalized users are convenient for most of the time, but still need to consider the right to retain the user's choice. When setting the default options, consider a second, especially the Select type of input field, as a programmer to avoid users from omitting the choice, the habit of setting a default option, but if you are not sure to fill in the form of the majority of users will choose an option, Then it is best to leave it to the user to choose (the next article will have a specific discussion).

Accessibility

Accessibility is the most overlooked design factor, however, regrettably, my mentor is an expert in this field, and I feel embarrassed not to take this aspect out of the circle, so I still have to say a little more if I know that many designers are basically ignoring the fact that their work does not involve this aspect.

Britain and the United States have special legislation (Disability Discrimination Act 1995 UK, section 508 US), which stipulates that websites of government, social organizations and so on must provide accessibility support, This is an important aspect of social non-discrimination. If a group of people in society cannot freely access public information and use Internet services like others, it constitutes discrimination. In particular, many countries have begun to consider the Internet, the free access to information as a human right, then perhaps one day this is not only discrimination, but naked human rights violations (in order to impress you, first of all to frighten you not).

When I read HCI, another sentence that had a big effect on me was: "Design for accessibility is for the decades after." Perhaps we are all fortunate not to have physiological or cognitive deficiencies in any way, you don't want to be associated with a social group with a disabled person, but one day we get older, and when we go into old age, people's senses and cognitive abilities drop dramatically, whether it's auditory, visual, tactile, or operational, Problems with cognitive ability (refer to Web Accessibility for older Users):

• Color discrimination and sensitivity: it is difficult to discriminate between dark blue and black, relative blue and green, the elderly to red and yellow easier to identify;
• Pupil narrowing: The older person needs greater brightness, and the ability to adapt to changes in brightness decreases. The retina of the age of 60 years was only 40% of the 20-year-old young people, while at the age of 80 it was rapidly reduced to 15%;
• Contrast sensitivity: Starting at age 40, the contrast sensitivity at higher spatial frequencies began to decline until the age of 80, when only 15% were the same.

If we want to be able to enjoy the quality of information and services in a few decades, we'd better start by making more products and designers realize the importance of accessibility and make some efforts to do it.

The accessibility of form is a controversial topic, and many suggestions are contradictory, such as Luke's recommendation to use the TabIndex attribute for keyboard users in the Web form, and SitePoint's book says it's not necessary. Reasonable placement of elements in HTML guarantees the order of the tabs. That's my idea. Like SitePoint, good HTML and semantic constructs are fundamental to accessibility (when it comes to semantics, HTML5 seems to me to be the biggest contributor to this). The accesskey attribute has a similar situation, and overall, unless your form is complex enough to be used repeatedly by the user, I will not consider following Luke's advice to add a shortcut to the form.

The large-scale application of Ajax technology is what makes accessibility very headache, for example, if the content of a page is updated dynamically, we can see the naked eye, but how does screen reader know that the update is happening and then read the relevant part of the page again? The consortium has specifically proposed standards to try to mitigate problems like this:Wai-aria, if you are interested in this area, you can refer to the Opera Development Community article:Introduction to WAI ARIA, It is naturally more fun to read than the standard of the consortium.

So here's an example of what I've heard over and over while I'm learning about HCI, a typical step in accessibility in an HTML document is to add the Alt attribute to each , which typically simply describes the nature or content of the picture, many screen Reader will also read it out, so don't leave meaningless content such as file name on it, and for users who rely on screen reader for information, it's not as if you left the Alt value blank, and if the picture is decorative and does not affect the overall content, Also consider leave Alt blank, as these may affect the understanding of the content by the visually impaired. In addition,, has a longdesc attribute that points to a document that specifically describes the picture. For example, a large chart, you can specifically use a document to illustrate the data, relationships and important conclusions to be displayed in this chart.

Of course, to ensure accessibility, the most important thing is still user testing. You may have a book about accessibility to reinvent the site, and add a detailed alt to each , but does this guarantee that users using screen reader will use your site smoothly? Think about the problems mentioned in the previous paragraph. Finally, only real users can evaluate your site to meet their needs, so, still don't forget the user test!

You can do some similar tests yourself, yes, I'm not joking, it's a method I've tried myself. If you use Ubuntu, then Orca screen Reader is probably already on your machine. Open it, open the page you want to test, close your eyes, or ask your wife or girlfriend to have a stocking blindfold and see if you can find the target link through screen reader's smooth understanding of the page. Or is it like chicken to fly under screen reader's guidance (if you don't know how strange the screen reader's working mechanism is, can you refer to the two elements in the SitePoint book about legend and FieldSet)? At this point, perhaps you will understand a little of the physiological dysfunction of users in the life of the inconvenience, we should respect their perseverance and efforts, under the premise of helping them to do more.