ADDITIONAL GUIDELINES

Source: Wroblewski, L (2008) http://www.lukew.com/resources/articles/EventApart_WebForms_120809.pdf

Provide Clear path to completion

Source: Wroblewski, L (2008) http://www.lukew.com/resources/articles/EventApart_WebForms_120809.pdf

Provide Clear path to completion

Label Alignment

Top aligned For reduced completion times & familiar

data input Right aligned

When vertical screen space is limited Left aligned

For unfamiliar, or advanced data entry

Required | Option fields

Try to avoid optional fields If most fields are required: indicate

optional fields If most fields are optional: indicate

required fields Text is best, but * often works for

required fields

Field length

Field lengths can provide valuable affordances

Field lengths provide enough space for inputs Random field lengths may add visual noise to

a form

Serial, ID ???

I’ll match the number configuration to these fields

Field length

First name: 30 chars Last name: 30 chars Email: 50 chars Address: 200 chars

Grouping content

Content relationships provide way to organize form

Groupings provide a way to scan information A sense of how information is structured Use the minimum amount of visual elements

to communicate useful relationships

Remember : Structure forms as a conversation, with natural breaks between topics.

Form actions

Save, Continue, & Submit are primary actions: directly responsible for form completion

Reset, Cancel, & Go Back are secondary actions: rarely needed

The visual presentation of actions should

match their importance

Form actions

Avoid secondary actions if possible If needed, ensure a clear visual

distinction between primary & secondary actions

Source: http://www.lukew.com/resources/articles/WebForms_LukeW.pdf

Form actions

Tabbing

Many users interact by “tabbing” between fields

Must account for tabbing behavior

Use the tabindex attribute to control tabbing order

Consider tabbing expectations when laying out forms

Accessibility & Mark-up

<label> tags - associate labels with inputs Read by screen readers <label> tags clickable = larger actions Tabindex attribute to provide a

“tabbing”order Forms to be navigated by keyboard

Accesskey attribute for additional keyboard support

<fieldset> to group related form fields

Source: http://www.lukew.com/resources/articles/WebForms_LukeW.pdf

Sites

http://www.lukew.com/presos/ http://www.15seconds.com/Issue/

000706.htm http://www.lukew.com/ff/entry.asp?968 http://www.lukew.com/resources/

articles.asp http://uipatternfactory.com/p=tag/form/