Text box:
Primary action
Secondary action
Spinner:
16
Combo box:
Vertical labels allow faster completion time for known data.
Vertical labels layout
Check box
Check boxes:
Check box
Text box:
Spinner:
16
Combo box:
Right aligned labels require less vertical space and present a clear
link between a field and its label.
Right aligned labels layout
Text box:
Spinner:
16
Combo box:
Left aligned labels require less vertical space and allow label
scanning, useful for unfamiliar data.
Left aligned labels layout
Radio buttons:
Radio
Radio
Check boxes:
Checkbox
Checkbox
1
Labels
Radio buttons:
Radio
Radio
Check boxes:
Check box
Check box
Radio buttons:
Radio
Radio
Primary action
Secondary action
Primary action
Secondary action
2 3 4 5 6 7 8 9 10
Best Practice UX Forms 2.0
By Ryan Younger http://www.webedible.com
Placeholders
Image
Pagination & Navigation
Top level > Second level > Third level > Current level
Goooooooooogle
1 2 3 4 5 6 7 8 9 10 Next
1 2 3 4 5 6 7 8
9
Next
Lorem ipsum
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras consectetur orci mollis
arcu dapibus blandit iaculis urna sodales. Praesent convallis nunc lectus, in interdum
ligula. Fusce ac neque arcu. Proin vel ante nibh, in fringilla nisl. Proin orci magna,
iaculis sit amet accumsan eu, placerat at turpis. Vivamus dapibus mollis nisl, a
accumsan metus mollis non. Class aptent taciti sociosqu ad litora torquent per
conubia nostra, per inceptos himenaeos. Vestibulum fermentum, libero vitae posuere
venenatis, diam justo varius magna, eget dignissim risus eros eu metus. Donec ac
interdum odio. Pellentesque sed lectus urna, vitae ullamcorper tortor. Donec tincidunt
est eu dui tincidunt eget tincidunt tortor cursus. Praesent turpis nulla, cursus
pellentesque dignissim ut, vestibulum a ipsum. Ut auctor egestas mi vel aliquam.
Donec ullamcorper sodales blandit. Curabitur at ultrices turpis. Praesent laoreet
turpis vitae odio dapibus facilisis. In eget pellentesque ante. Vestibulum ante ipsum
primis in faucibus orci luctus et ultrices posuere cubilia Curae;
Social Networking
Wireframe disclaimer text
These designs are representative of information architecture, indicating
priority and layout of page components. They do not constitute the final
look or feel of the site design.
f
Connect with Facebook
f
Connect
f
f
f
Share
100
Progress bars
4 Step four
3 Step three
2 Step two
1 Step one
50%
CAPTCHA fields
Video
Submit
Cancel
Do not start validating the form field input until the user
unfocuses their cursor from that field.
Inline form validation
I accept the terms and conditions
Video
This is the title of the video
joebloggs
20 videos
Subscribe
+ Add to
Share Embed
20,000
360p
Web video player
Try another Vision impaired Help
Powered by
rEc Ap Tc Ha
Bloggs
Last Name:
Joe32324
First Name:
Name cannot contain numbers.
03
Date of birth:
03 1800
Are you really over 200 years old?
Using CAPTCHA (Completely Automated Public Turing
test to tell Computers and Humans Apart) fields
unnecessarily can impact conversion rates. However
when used appropriately they can minimise the chance
of bots automating sign ups with your forms.
reCAPTCHA
SUBMIT
Hi Robot! Keep sliding...
Show us your human side; slide the cursor to
the end of the line to create your account:
Slider
If you navigate away from this page, you will lose any
data you have entered. Are you sure you want to leave this page?
Please confirm
Yes, leave page
No, I will complete registration
Modal dialog box
Transparent background for
dialog box
List Selected
Item 1
Item 2
Item 3
Item 4
none
Select your items
>
<
Picker list
Selections
Radio buttons: Checkboxes:
Option unchosen
Option unchosen
Option chosen
!
Option chosen
Hyperlinks
Forgot your password?
Can't access your account?
Learn more
Contact us
Word verification:
InGrof2
Letters are not case-sensitive
Type the words you see in the picture below.
Tabs
Tab A Tab B Tab C Tab D
Sliders
Low High
Ratings
74 people like this
Pointer & Cursor
