More Than Just A Form

1
More Than Just A Form
Week eight of CA273 Advanced Web Design
2
Web Forms
Overview of class

• Overview of HTML Forms
• Rethinking forms
• Label location
• Actions
• Inspiration lab time

Atebits contact form
3
HTML Forms
A little W3Schools review
4
Lab Time
Exercise Create a form

• Make use of all form elements
• Use W3Schools if you need
• Dont worry about the style

5
Rethinking Forms
a form is a conversation
Point taken from Web Form Design by Luke
Wroblewski
6
Rethinking Forms
a form closes the deal
Point taken from Web Form Design by Luke
Wroblewski
7
Rethinking Forms
Outside In not Inside Out
Point taken from Web Form Design by Luke
Wroblewski
8
Label Location
Location, location, location

• Top
• Right justified
• To the left to the left

The Mobile Web Design Book by Cameron Moll
9
Label Location
Top

• Faster to scan
• Faster to complete
• Flexible for text length

Qwert City http//www.qwertcity.com/
10
Label Location
Right Justified

• Fast scan
• Good for limited vertical space

Mail Chimp http//www.mailchimp.com/contact/
11
Label Location
Left justified

• Slower to scan
• Makes em think

Web Development Project Estimator
12
Label Location
Inline

• Fastest to scan
• Cant see label while in field

Web Development Project Estimator
13
Label Location
My experiment

• One text field
• Simple instructions
• Like writing a letter
• Will it work?

http//dabrook.org/mc/web2
14
Actions
primary secondary
Primary Secondary Actions in Web Forms from
Luke Wroblewski Etre
15
Inspiration so many cool examples
16
Lab Time
Exercise Create a contact form

• Name, email, message minimum.
• Well styled.

17
Wrap Up
Contact me with any questions )

• Not an afterthought
• Design affects usability
• Get inspired!
• Get the book for 19