To: On the Form Web Design
"Input box (Input) should be divided into logical groups, such brain can be very good handle the relationship between the piles region." - "Authoritative guide to HTML"
Web applications always use the form to handle data entry and configuration, but not all of the forms are consistent. Input regional alignment, their label (label), the mode of operation, as well as the surrounding visual elements will somehow influence the acts.
Form Layout
Take into account users completed form should be filled out as much as possible the time of the short, and the data collected by the users are familiar with (such as name, address, billing information, etc.), vertical alignment of labels and input box can be said is the best the. Each input box on the label and vertical alignment gives us a sense of the two close and consistent alignment of the left eye movement and reduce the processing time. Users only need to move in one direction: the next.
In this arrangement, recommend the use of bold label, this will increase the proportion of their vision and enhance its significant. If not bold so, from a user's perspective, tags and the text input box almost the same way.
If the data on a form is not well-known in terms of logic or a substantial difficulties (such as an address of a number of components), left-justified the label can be very easy-table form information. Users need only look at the left column from top to bottom on the label, and will not be interrupted input box thinking. But this way, the label and its corresponding input box is usually the distance between the labels will be more elongated, and may affect fill out the form of time. Users must return the Jump look around to find the label and the two corresponding input box.
So have a kind of alternative programme, labelling right alignment layout, makes labels and the link between the input box more closely. However, the results are uneven gaps and left labels allow users to quickly search the contents of the form to be filled out. In Western countries, people are accustomed to writing from left to right, so that the layout of the right alignment gave users a reading disorder.
With visual elements
As "label left-justified layout," the merits of (convenient retrieval and reduce vertical height), try to correct its shortcomings major (label and input from the box) very human temptation.
A programme to increase the background color and line segmentation, different background color has a vertical labels and a vertical input box, each group of labels and input box using separate clear horizon. While this sounds good, but the problem will still exist.
Comparative morphology before (users subjective visual distinction), which increased by 15 visual elements: the median line, which has a colored background and a cell of the horizon. These elements will divert the attention of users, allows users to focus on a number of important elements, such as labels and input box. As Edward Tufte said: "The differences between the information itself, will have the different senses." In other words, any of the visual layout of unwanted elements will continue to disrupt the layout. When you try to the left of the label can be found, your attention is always being interrupted, those who want to stop the horizon, cell and background colors.
Of course, this did not mean abandoning background color and line. For them of the relevant regional information, or very effective. For example, a fine or a shallow horizon background color, can be from the combination of visual data. Background color and form lines for the main distinction is particularly useful button operation.
Primary and secondary operation
Form a major operation (usually "to" or "save") needs a strong visual weighting (in the example above, with the bright colors, rough font, background color, etc.). This is equivalent to a Note to users: You have been / will be completed soon fill out the form.
When a form multiple tasks, such as "continue" and "Back", it is necessary to reduce the visual weight of a secondary operation. This can be minimized potential users operate the risk of errors.
Although the above content can be better let you design forms, but the combination of the layout, visual elements and content, users still need to go through testing and data analysis (complete assessment, error reports, etc.).
JunChen translation since LukeW's Functioning Form
Tags: CSS style design, w3c form w3c detection, web standards
Leave a Reply