17
Forms and Applications Web Design Professor Frank

Forms and Applications Web Design Professor Frank

Embed Size (px)

Citation preview

Page 1: Forms and Applications Web Design Professor Frank

Forms and Applications

Web DesignProfessor Frank

Page 2: Forms and Applications Web Design Professor Frank

Interactive Technologies

• Dynamic interactions• Prompt feedback• Feedback in context

Page 3: Forms and Applications Web Design Professor Frank

Interactive Transactions

Page 4: Forms and Applications Web Design Professor Frank

Technologies

• Add-on technologies – Flash, JavaScript• Not as widely supported as HTML

Page 5: Forms and Applications Web Design Professor Frank

Ajax

• Ajax = Asynchronous JavaScript and xml• Relies on JavaScript• Content is hidden from search engines

Page 6: Forms and Applications Web Design Professor Frank

Ajax and Accessibility

• Screen readers can’t always “read” dynamic content

• Keyboard users might not recognize interface widgets

• PDAs/cell phones – Not enough horsepower to run technologies

Page 7: Forms and Applications Web Design Professor Frank

New Accessibility Standards?

• ARIA – Accessible Rich Internet Applications• Accessible Flash – in future

Page 8: Forms and Applications Web Design Professor Frank

Designing Web Applications

• Restraint • Simplicity

Page 9: Forms and Applications Web Design Professor Frank

Design Patterns

• Recognizable patterns for interaction (ie drop-down menus)

• Proven effective• Widely adopted

Page 10: Forms and Applications Web Design Professor Frank

Design Patterns

Page 11: Forms and Applications Web Design Professor Frank

Menus

• Collect data in standard format• Select/drop-down• Radio buttons• Checkboxes

Page 12: Forms and Applications Web Design Professor Frank

Input Fields/Text Areas

• Good for open-ended responses

Page 13: Forms and Applications Web Design Professor Frank

Guiding Interaction

• Walk users through fields using instructions, labels, prompts, and design patterns, explaining what is expected and how the page works

Page 14: Forms and Applications Web Design Professor Frank

Field Labels

• Explain information being requested• <label for> tag associates a label with its

element using the “id” attribute

Page 15: Forms and Applications Web Design Professor Frank

Help and Instructions

Page 16: Forms and Applications Web Design Professor Frank

Default Text

Page 17: Forms and Applications Web Design Professor Frank

Provide Users Feedback