Web application Form User Experience Design brief

Design | Web page

For web designers, this article provides some advice on how to make an application form a recurring task, and how to get users to encounter unnecessary "hurdles" when using a form you design:

"Input box form elements should be distributed reasonably so that your brain can handle the form frame and the page area associated with it" selected from the article "Html:the Definitive Guide"

Problems that may be encountered at work, we analyze the relationship between "label" and "form" through the following illustration:

Visual elements that are typically applied to:

For the "left alignment" mentioned above (easy to browse through the tabs and reduce the screen space), we can try to circumvent the disadvantage that the distance between the label and the form box is too far. One effective way is to add a different background color, but this will add a lot of visual elements to the layout about 15 include: horizontal, each background color frame and vertical bar, which disrupts our view and ignores the most important information, as Edward Tufte said. Information is made up of elements that do not have sex, but it also brings differences.

Of course, it is not said this way can not be used, the main choice of light background or horizontal line is still possible, more ideal way:

Primary and Secondary buttons

The main button is generally "submit" "save" operation is more important than other buttons, need to focus on the hint like bright color, background color, bold. Generally aligns to the top and bottom of the text input box. Conversely, such as "return" and other minor buttons will weaken their visual cues.

The above is only preliminary suggestions, preferably through testing, data analysis (completion rate, errors, etc.).