Jump to content

Cre8asiteforums Internet Marketing
and Conversion Web Design


Optimise Your Forms Already!

  • Please log in to reply
3 replies to this topic

#1 iamlost


    The Wind Master

  • Site Administrators
  • 5,517 posts

Posted 30 April 2017 - 09:36 PM

One of the things that has made the web an interaction pita is forms. And when they went from desktop to mobile the smaller form factor didn't improve things. Except that folks began to take another look at them, to reinvent how they might work. So now the much much improved form developed for mobile can be reimported back to the desktop... quickly, please!

Ye olde typical online registration/eCom form has 20+ input boxes. With those ridiculous asterisks highlighting critical 'must answer' items. The new forms have ~5-input boxes. Much less intimidating, much less opportunity to input an error. But still providing the same amount of information.

First: the first and last name boxes are combined into one.
Let the user enter their name be it one: Madonna; or two: John Doe; or three: Kim Krause Berg; or even twenty-nine: Barnaby Marmaduke Aloysius Benjy Cobweb Dartagnan Egbert Felix Gaspar Humbert Ignatius Jayden Kasper Leroy Maximilian Neddy Obiajulu Pepin Quilliam Rosencrantz Sexton Teddy Upwood Vivatma Wayland Xylon Yardley Zachary Usansky - yes, some people will do anything to get into the Guinness Book.
---no tabbing between input fields required: just type in your name, with spaces, as you normally do and let the computer worry about first, last and everything in between.

Second: invert the typical sequence of entering an address.
* start with zip/postal code - which allows the computer to autofill the state/province and the city
Note: depending on markets served one might start with country first.
Note: In Belarus, China, Japan, Kyrgyzstan, Russia, Turkmenistan, and Ukraine this is standard on snail mail.

* in the street input box after the first one or two - usually numbers - utilise an autocomplete dropdown box based on addresses within zip/postal cod altering as input continues; typically 2-5 keyed inputs plus a click and the street address is input.

 * of course one should always utilise inline verification where sensible especially when a user entry seems problematic.
* no more check a type of payment card plus multiple input boxes. One box only.
---use an input mask, which identifies the card type from the initial digits. Only need a numeric keypad as only numbers will be entered. Demonstrate the entry required by translucent numbers within the box that show as the previous entry is complete. No need for spaces, let the computer do the heavy lifting.  

---or include a card scan ability.

* smart defaults.
eg: initially show shipping address same as billing address with user over ride. And repeat behaviour mentioned above.

I knew much of the above although I don't actually use any of it. No need to register et al on my sites! However, I just watched the video of Luke Wroblewski's presentation (2hrs 29min) at the 2017 Dublin Google Conversions event. The whole thing is well worth watching. The part where he puts checkout forms through the ringer starts about 49:22 and runs to about 1:06.

#2 glyn


    Sonic Boom Member

  • Hall Of Fame
  • 3,301 posts

Posted 01 May 2017 - 03:25 AM

Come along way since Matt's formmail.pl

#3 cre8pc


    Dream Catcher Forums Founder

  • Admin - Top Level
  • 14,819 posts

Posted 01 May 2017 - 08:43 AM

Wow. I just saw that same video. Didn't realize you had referenced it. Great minds think alike!


I also want to point out that accessibility for mobile is overlooked and barely has any traction.  There are differences in coding for Android and iOS for mobile accessibility too.

#4 earlpearl


    Hall of Fame

  • Hall Of Fame
  • 2,531 posts

Posted 01 May 2017 - 10:54 AM

For different verticals or business types different forms may well be optimal.  We have a business "type" vertical wherein that is true.  These are regional businesses/services.  That being the case adresses have proven to be very helpful to us and if and when we engage the potential customers it helps us and helps us to help them.  On some of these smb's we still have optional vs non optional fields.  Surprisingly to us, but maybe not to people far smarter than us, mobile users tend to skip all the non required fields.  We are trying different solutions to see what is optimal.


We have question fields.  Again mobile users tend to not fill them in.  Desktop users fill them in in abundance.  Answering those questions is helpful to us and to us responding to those who fill out the forms.  We are varying questions, eliminating some, determining that which works best.


"Best Practices" might vary considerably depending on the particular website, service, product, vertical, industry, etc.

RSS Feed

0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users