Part of White Night Melbourne 2018 (February) was a membership drive. Registration was via the website member join form. White Night runs from 7 pm to 7 am, when people carry their mobile, not a laptop. Completing the old join form on a mobile was a poor experience. I drew upon HTML5 for Web Designers and Mobile First to come up with improvements to the join experience. I designed four changes to make it easier to complete the form via mobile devices. It was a thrill to see this first iteration implemented in time for the event.
The old join form
There were 17 fields in the old join form. To complete the old form, Australians were to fill out 9 required fields, and 7 optional fields. A drop-down for Country defaulted to Australia. There was no default value selected for State. Despite that 90% of registrations were Victorians, choosing a state was required for all Australians.
A phone number was a required field. To receive SMS notifications for collection items, a separate field asked for a mobile number. If you wanted membership renewal notices, you had to type your email address twice.
Poor experiences completing the old join form on mobile
On a touchscreen device, the phone and email inputs did not provide helpful keyboards. This made it difficult to enter details and reduces accuracy. For instance, entering a phone number mandated an extra tap to switch to numeric keys. The 10 digit buttons across a narrow screen are small touch targets. It was even harder to enter an email address. For example, after typing the initial letters of me@example.com.au, you’d have to switch:
- to numeric keyboard for the @ symbol
- back to enter more letters
- again for every full stop “.” character!
Then the form asked people to confirm their email address. So do all that tapping and switching all over again!
From July to December 2017, analytics reported that completing the old form on a mobile took over a minute longer than on desktop.
Completing the old form on a mobile was a poor experience that took too much time. This presented a significant barrier to our membership drive. The mobile form improvements sprint was on!
Improvements to form input operability
Collaborating with our developer I set out to make mobile form improvements. A few small improvements that would result in a superior joining experience.
Select a default that matches most users
With 90% of Australians choosing Victoria as their state, it made sense to set this as the default. Setting this as the default reduces the effort for the majority of users. It also maintains the same number of interactions for interstate or international visitors.
Using input type="tel"
for a phone number
Changing the HTML input type to “tel” makes it easier for mobile users. They get a familiar, large button dial keypad to enter their phone number. Additionally, autofill options can appear above the dial pad. These only need one tap to input your entire phone number.