Successfully reported this slideshow.
Your SlideShare is downloading. ×

Form Design: UX Playbook Part 2

Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Ad
Upcoming SlideShare
UX Playbook: Forms
UX Playbook: Forms
Loading in …3
×

Check these out next

1 of 33 Ad

More Related Content

Similar to Form Design: UX Playbook Part 2 (15)

Recently uploaded (20)

Advertisement

Form Design: UX Playbook Part 2

  1. 1. UX Playbook Part 2: Form Design
  2. 2. Chris Feix @chrisfeix
  3. 3. culturespirit.com This is awesome. This is the best time in history to be a product maker.
  4. 4. culturespirit.com This is awesome. This is the best time in history to be a product maker.
  5. 5. culturespirit.com This is awesome.
  6. 6. culturespirit.com ● Vision (blindness, color blindness, low vision) ● Auditory (various levels of deafness) ● Cognition (ADD, ADHD, dyslexia, etc.) ● Translation (language, illiteracy) ● Mobility (dexterity, arthritis, paralysis, injury) Accessibility
  7. 7. culturespirit.com Accessibility Old UX Awesome Chart
  8. 8. culturespirit.com Accessibility New UX Awesome Chart What good is a design… if it’s not accessible?
  9. 9. Forms Accessibility
  10. 10. culturespirit.com Accessibility.Forms Forms are the most overlooked, under-scrutinized part of many digital products. Forms are CRITICAL for: • Participation • Retention • Conversion INCOME DUMMY
  11. 11. culturespirit.com The “Funnel” INCOME DUMMY 60K not 1MM If you have 1 million monthly visitors and it costs you $100,000.00 to double that number then you have 2 million visitors. But if only 20% of them are buying and 30% of the buyers are completing the checkout process; you just spent $100,000.00 to gain 60,000 buyers. Widen your funnel?
  12. 12. culturespirit.com The “Funnel” INCOME DUMMY $60K for 150K You have 1 million monthly visitors. Only 20% of them are buying and 30% of the buyers are completing the checkout process. Spend $60,000.00 to gain to increase the VSR (Visitor to Shopper Ratio) to 30%; and increase the percentage of buyers that finish the checkout process to 70%. You’ve just spent $60,000.00 to gain 150,000 buyers.
  13. 13. culturespirit.com The “Funnel” INCOME DUMMY
  14. 14. culturespirit.com Accessibility.Forms Inputs (text, select, dropdowns…) Email Address john.smith@emailaddress.com Email Address Email Address EX: john.smith@emailaddress.com BAD BETTER BEST
  15. 15. culturespirit.com Accessibility.Forms Tappable… chris.feix.71@gmail.com Email Address EX: john.smith@emailaddress.com chris.feix.71@gmail.com Email Address EX: john.smith@emailaddress.com
  16. 16. culturespirit.com Accessibility.Forms Tappable… PADDING MARGIN Tappable Area
  17. 17. culturespirit.com Accessibility.Forms Obfuscation •••••••• Password Must contain at least 8 characters comprised of letters, numbers, and at least one symbol. •••••••• Password Must contain at least 8 characters comprised of letters, numbers, and at least one symbol. SHOW
  18. 18. culturespirit.com Accessibility.Forms Obfuscation 5oftT@c0! Password Must contain at least 8 characters comprised of letters, numbers, and at least one symbol. X HIDE PASSWORD
  19. 19. culturespirit.com Accessibility.Forms 5 Password HINT: 7 more characters A number A symbol HIDE 5oftT@ Password HINT: 2 more characters A number A symbol HIDE 5oftT@c0 Password HINT: 8 characters A number A symbol HIDE Expectation…
  20. 20. culturespirit.com Accessibility.Forms Input masks…
  21. 21. culturespirit.com Accessibility.Forms Buttons… CancelNext × Cancel Next ›
  22. 22. culturespirit.com Accessibility.Forms Buttons… × Cancel Next › × Cancel Login I forgot my password.?
  23. 23. culturespirit.com Accessibility.Forms Color
  24. 24. culturespirit.com Accessibility.Forms Placement
  25. 25. culturespirit.com Conversion If it can’t convert a user into a customer, what good is it?
  26. 26. Forms Conversion
  27. 27. culturespirit.com Conversion.Forms HTML Attributes Standard Keyboard Numeric Keyboard Web Keyboard
  28. 28. culturespirit.com Conversion.Forms HTML Attributes .com .net .org .
  29. 29. culturespirit.com Conversion.Forms HTML Attributes gmail.com yahoo.com hotmail.com chris@ .com .net .org .
  30. 30. culturespirit.com Conversion.Forms Prefills and Typeahead
  31. 31. culturespirit.com Summary • Awesome • Accessibility • Inputs • Labels • Help • Buttons • Color • Placement • Password • Hint • Input Masks Good • Mobile Keyboards • Prefills and Typeahead
  32. 32. Thank You @chrisfeix @STLXCon
  33. 33. PROMO CODE: OCI2017 $600 All Access 2-Day Pass $360 Promo ends June 30 STLXCon.com @stlxcon @stlux #UXTalk

Editor's Notes

  • We are moving from an age of human centered design, making products easy to use...
  • ...to a time when humans don’t need to use their products.
  • (Tell story of Stockholm “Funka Nu” Conference.)
  • Now more than ever, as product designers, we need to be focused on accessibility. Late in 2014 I designed this UX chart I call “Is it awesome?”
  • As you can see the foundation of “Is it awesome?” is accessibility.
  • The rest of this talk is going to be a bunch of boring facts about form design. Straight forward “do this, not that” talk. But it’s critical if you make digital products.
  • As the founding Designer for MonsterCommerce (now Network Solutions Commerce), I learned fast how important conversion was.
  • In 2007 I wrote this article. http://habanerostl.blogspot.com/2007/08/store-visitors-increase-or-convert.html
    This is what is says in a nutshell…. from 1999 to 2010, everyone was trying to get you to widen your funnel.
  • Luke Wroblewski writes of a study that determined top-aligned labels result in the shortest completion times, due to the reduced amount of eye movement needed.  Placeholder text (a.k.a. hint text), on the other hand, is generally agreed to be the opposite of helpful. Including the label as placeholder causes it to disappear once the field gains focus, meaning the user can no longer view it. This causes strain on short-term memory and increases the chances of error.
  • Make sure your forms are “tappable” even with fat fingers like mine. Also make sure your forms are Tab tested. Mean each field can be tabbed through.
  • Actually, with any tappable area you design, (when able) use padding over margins.
  • I have 300 accounts scattered all over the web. And they make it so you can’t remember them. Numbers, lowercase, uppercase, symbols… Now let’s make it even harder by hiding what I’m typing, right?
    Unless I’m at an ATM or checkout, or on a giant screen in a public place - show me what I’m struggling to type.
  • Better yet, make the default as shown and give me the option to hide it.
  • Even better still… SHOW ME HINTS ALONG THE WAY.
  • A mask only appears once a user focuses on a field, preventing the scanning issue. Masks format the text automatically, while the field is being filled out, allowing users to focus on the required data and more easily notice errors.
  • How many of you have clicked the wrong button? Everyone. It’s not your fault.
  • COme up with a solid button formula (or standards) and follow them throughout your product. I have my own formula that work well for me.
  • First it’s colors. I use blue for “finalizing”. Like a submit button, or post, send, anything that is NOT going to show me another step, or a verification. I use green for those. Next, Verify, “On to Step 2”.
    Then use a muted color (light grey) for Cancel, Browse, Upload.
  • Second I have placement rules I follow. Cancel to the left, next or submit to the right. If there is a submit AND next style button, I put the next-style button to the far right.
  • Now let’s talk about designing forms for conversion.
  • And let’s start with mobile keypad displays. If I’m being asked to fill out an email field, I don’t want to be shown the standard keyboard. But also, I feel like the Web keyboard is missing a few things...
  • Some devices will give you a few URL suffixes and a dot. But some don’t.
  • You can fix this for the user by adding an (at) sign trigger.
  • I LOVE prefills and typeaheads. It saves my from typing everything, tabbing between address, address 2, city, state, zip.

×