I implemented a small change in the signup form that made a huge difference - conversion wise. In the past many a tweak was applied and A/B tested on the igumbi signup form.
To improve conversions I simplified the sigup form, stripped all the unneccessary fields down to four fields, put in a banner image to heighten the "Vorfreude" of what you are about to get to see, tweaked the button copy, tested longer and shorter versions of the text, played with logos. The whole conversion A/B yadda yadda.
Inspiration came in @patio11's podcast
In a recent Kalzumeus Podcast patio11 was touching on the point of how to deal with forgotten passwords and dropping the fields for password-repeating on the signup form. He and Keith were hammering on how unneccessary, and sometimes downright stupid some of the precautions are.
So I started highlighting the password entry field - the field you actually want to fill out on the login form - to speed up the time it takes to get into the app.
And this got me thinking.
Thinking of how to make the igumbi trial signup form better.
I give the form fields of the igumbi Hotelsoftware some love. Actually a lot of love.
The ugly and the bad
You know these forms where the fields are not aligned? Or where you type stuff into the fields and there is no padding between the field border and the text. It feels like they appleid some negative padding on these fields. Or the text font you are typing in is so small, it feels like 8px - like screen realestate was so scare as if we were still on 640 by 480 displays.
Forms like that - they suck - bigtime.
And the good
So I set out - and I have had this for some time already in igumbi, to have this warm mellow early morning sunrise inspired glow in my form fields. That glow ensues to radiate and to embrace the very letters you are about to start typing. Your name or your email address.
It's like the sun has just risen especially for you on this cloudless, dewy and mild June morning. You are welcomed to grace this virgin form field with the letters you are about to enter. You can hear the cowbells and smell the flowers of summer on dreamy lakeside meadow.
The formfield is a seducer. It draws you to enter your juicy data. It loves you back. You feel there is something different - it just feels good, in a very sublte way.
You realize deep care has been taken to craft this form.
This glow effect is achieved by some CSS shadows and CSS transitions - so the effect does not kick in immediatly.
But why stop there: this is just form beautification, no?
Yes why? We have all this nuanced and subtle thing waiting to be uncovered once you get to the form field.
Why not make the glow stand up and say shine like a beacon of welcome?
WAT, a beacon of what?
I hear you say...
What did exactly did I do? Well let's get to it.
I added the AUTOFOCUS property to the first textfield in the form.
The one field that needs to stand out, the one field that needs to be filled - once you start typing in that field the filling out of the the rest of the form just feels like the natural thing to do
<input autofocus="true" id="user_session_username" name="user_session[username]" size="30" tabindex="1" type="text">
autofocus="true" Is the thing you will want o look out for. That does the magic, well that together with the styling appleid to the form field that makes it so different and subtle
If you followed along, while you're at it, also set those tabindex values to get sequence of the fields in the order which seems natural - this is especially useful if your fields are set up in two columns.