Jump to content

Cre8asiteforums

Discussing Web Design & Marketing Since 1998

  • Announcements

    • cre8pc

      Thank you! Cre8asiteforums 1998 - 2018   01/18/2018

      Internet Marketing Ninjas released many of the online forums they had acquired, such as WebmasterWorld, SEOChat, several DevShed properties and these forums back to their founders. You will notice a new user interface for Cre8asiteforums, the software was upgraded, and it was moved to a new server. Thank you for your support as we turn 20 years old.  
iamlost

Optimise Your Forms Already!

Recommended Posts

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

(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.

Share this post


Link to post
Share on other sites

Come along way since Matt's formmail.pl

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now


×