[WebVisions 2010] (More) Designing Our Way Through Forms

1,754 views
1,638 views

Published on

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,754
On SlideShare
0
From Embeds
0
Number of Embeds
26
Actions
Shares
0
Downloads
0
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

[WebVisions 2010] (More) Designing Our Way Through Forms

  1. 1. DESIGNING OUR WAY THROUGH WEB FORMS Christopher Schmitt http://twitter.com/@teleject Kimberly Blessing http://twitter.com/@obiwankimberly
  2. 2. ( )= / ( )
  3. 3. FORM ELEMENTS • Checkboxes • Select: • Input: • Multiple Items • File • Single Item • Radio • Submit Button • Text • Textarea
  4. 4. CSS PROPERTIES • background-color • height • background-image • letter-spacing • border • line-height • border-color • margin • border-style • padding • border-width • text-align • color • text-decoration • font-family • text-indent • font-size • width • font-weight • word-spacing
  5. 5. 7.2 5 8.5 1.5 3 1 5.5 9 2.0 4b 6 3.0 7 8b2 7.2 9 1.5 2 2.0 3 3.0 4b
  6. 6. 3,520 screengrabs
  7. 7. RADIO BUTTONS
  8. 8. CSS HEIGHT FF 2 FF 2 FF 3 Chrome 1
  9. 9. CSS WIDTH FF 3 FF 3 Safari 3 Safari 3 Safari 4b Safari 4b
  10. 10. CSS TEXT INDENT Chrome 1 Safari 4b Safari 4b Opera 9 Opera 9
  11. 11. CSS BACKGROUND COLOR IE 6 IE 7 IE 8b2 Opera 9 Opera 9
  12. 12. CSS BACKGROUND IMG Firefox 2 Firefox 2 IE 6 IE 7 IE 8b2 Opera 9 Opera 9
  13. 13. CSS & TEXTAREA 20 15 10 5 0 IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b Yes No Somewhat N/A
  14. 14. CSS & INPUT TEXT FIELDS 20 15 10 5 0 IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b Yes No Somewhat N/A
  15. 15. CSS & SUBMIT BUTTON 20 15 10 5 0 IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b Yes No Somewhat N/A
  16. 16. CSS & SELECT BOXES (ONE) 20 15 10 5 0 IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b Yes No Somewhat N/A
  17. 17. CSS & SELECT BOXES (MULTI) 20 15 10 5 0 IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b Yes No Somewhat N/A
  18. 18. CSS & FILE UPLOADS 20 15 10 5 0 IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b Yes No Somewhat N/A
  19. 19. CSS & CHECKBOXES 20 15 10 5 0 IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b Yes No Somewhat N/A
  20. 20. CSS & RADIO BUTTONS 20 15 10 5 0 IE6 IE7 IE8b2 Ch Mac FF3 Win FF3 Mac Op9 Win Op9 Mac S3 Win S3 Mac S4b Win S4b Yes No Somewhat N/A
  21. 21. ☹Radio Buttons Check Boxes File Uploads Select (Multi) Select (One) ☺ Input Text Text Area
  22. 22. CSS PROPERTIES 100 75 50 25 0 height letter-spacing line-height margin padding text-align text-decoration text-indent width word-spacing Y N S N/A
  23. 23. CSS PROPERTIES 100 75 50 25 0 bkgd-color bkgd-image border border-color border-style border-width color font-family font-size font-weight Y N S N/A
  24. 24. ☹ ☺ Text Indent Font Family Height Font Size Margin Text Border Color Color Border Style Background Decoration Color Font Weight Background Letter Spacing Image Width Word Spacing Padding Border
  25. 25. ☹ ☺ Radio Check File Select Select Input Text Buttons Boxes Uploads (Multi) (One) Text Area Text Indent Font Family Height Font Size Margin Text Border Color Color Border Style Background Decoration Color Font Weight Background Letter Spacing Image Width Word Spacing Padding Border
  26. 26. LET BROWSER VENDORS KNOW WHAT YOU WANT • Internet Explorer • http://blogs.msdn.com/ie/contact.aspx • Opera • http://my.opera.com/community/forums/forum.dml?id=24 • http://groups.google.com/group/opera.wishlist/topics • Safari • http://lists.webkit.org/mailman/listinfo/webkit-dev • Google Chrome • http://groups.google.com/group/chromium-dev
  27. 27. LET BROWSER VENDORS KNOW WHAT YOU WANT • http://www.WebFormElements.com/ • 3,500 form element screen captures • HTML form element look-up tables (free): • http://oreilly.com/catalog/9780596527419/appendixd/appd.pdf
  28. 28. Take it away, Kimberly!
  29. 29. TIPS ON MOBILE FORMS
  30. 30. THOUGHTS ON MOBILE FORMS • Not everyone has an iPhone, iPad (or even Android!) making for a sad panda
  31. 31. THOUGHTS ON MOBILE FORMS Does your form work without cowbell?
  32. 32. THOUGHTS ON MOBILE FORMS Do your users need to hunt for form elements?
  33. 33. THOUGHTS ON MOBILE FORMS Chop up your form. Deliver the important stuff.
  34. 34. http://www.lukew.com/ff/entry.asp?1014
  35. 35. TAKE AWAYS • Designing for forms is hard for HTML+CSS • Even the same browser, different platform render Web forms differently • To help you discern the safety of CSS on a Web form, use WebFormElements.com • Reviewed which browsers are most hazardous
  36. 36. TAKE AWAYS • Reviewed which CSS properties are supported the most. • Reviewed what high-profile sites are doing to design for forms: Nothing. • Call to action! • Letbrowser vendors hear you or they won’t care to fix the problem. • With HTML5 form elements, problem is going to get worse.
  37. 37. MORE INFO • CSS3‘ingwith HTML5 forms: http://24ways.org/2009/have-a-field-day-with-html5-forms • Handcrafted CSS by Dan Cederholm • Luke W’s book Web Form Design • PPK’s blog: http://www.quirksmode.org/mobile/ • MsJen’s mobile link round up: http://www.blackphoebe.com/ msjen/2010/05/mobile-ux-resources.html
  38. 38. THANK YOU! Christopher Schmitt schmitt@heatvision.com @teleject on twitter
  39. 39. CREATIVE COMMONS CITATIONS http://www.flickr.com/photos/lanuiop/2234239588/ http://www.flickr.com/photos/gaetanlee/1947424580/ http://www.flickr.com/photos/evapro/312900784/ http://www.flickr.com/photos/kekka/799060449/ http://www.flickr.com/photos/hiddedevries/2594048276/ http://www.flickr.com/photos/tomsaint/2992217972/

×