The article tag was announced on every step, before pre-amble text or any form field. Because this issue occurred persistently throughout the wizard, I rated it as a medium severity.
Dr David Travis says we should interpret a medium severity problem as one that “will make some customers feel frustrated or irritated but will not affect task completion.” The video from our test session above illustrates minor confusion on the first occurrence leading to irritation after repeated occurrences on every subsequent step of the form wizard.
Must do manual testing to learn
It was a trivial code fix in the template, a task resolved in our late-November deploy. How did article tags get in our <form> wizard in the first place? Back in February this year I worked with our developer to introduce HTML5 to improve completing the form on mobile devices. Still we can’t pinpoint how article tags found their way into the templates. I have not discovered an automated testing tool that would’ve alerted us to the presence of this undesirable combination. Again I find myself highly recommending The Importance Of Manual Accessibility Testing. Without manual testing, we wouldn’t have learned about this and many other issues that harm accessibility of web forms.
Prior to September 2018, Become a Library member was a single page web form on which I’d led mobile form improvements for better UX. The registration process dumped everyone’s input into a holding bay in a database for manual processing and distribution of a plastic member card. Shifting from plastic member cards to digital distribution methods meant business process re-engineering and converting the single page form into a multi-step wizard.
The wizard design pattern
“a powerful design pattern … to simplify complex processes performed infrequently or by novice users.”
In September 2018 I conducted manual accessibility testing on the first iteration of form wizard and the new self-service join processes. My colleague Janet Austin assisted with the session. Jamie Kelly, a blind person from the Vision Australia Library, was our participant. He tested two scenarios:
I was shocked that the first show-stopper issue occurred in the first step of the form wizard. A validation message for Australian mobile number that appears visually in red text, wasn’t announced by the screen reader. Without assistance, it was impossible for our screen reader user to discover why the form was stuck on step 1, let alone recover from the error.
Progress for all
It’s vital to show your progress, to “distinguish the current step, and how many steps there are left.”
Our participant heard and understood they were making progress. ☺️ The page title was announced as “Library member registration | Step 2 | State Library of Victoria” and this was reinforced by hearing “Progress: 40%”.
Buttons ≠ mental model of radio inputs
At step 2 of the wizard, users must explicitly choose their preferred method for receiving their membership: SMS or email. Their contact details are displayed with each option so they can check their mobile number or email address for correctness.
These buttons were the only form controls on step 2. Clicking one of the buttons would indicate your preference, SMS or email, and submit the form to step 3. These buttons completely baffled our participant. We’d been so focused on making easy interactions with large touch targets for the new kiosk devices, that we lost sight of underlying semantics (or lack thereof) and accessible form design patterns.
Our participant pointed out that the buttons really should be radio inputs. Exacerbating the mismatch of conceptual to mental model, is that step 2 lacked an explicit Next button. The design didn’t align with their mental models of interfaces or flow!
Part of White Night Melbourne 2018 (February) was a membership drive utilising our website member join form. White Night runs from 7pm to 7am, 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 intent on making it easier to complete the form via mobile devices. It was a thrill to see this first iteration implemented in time for the event.
There were 17 fields in the old join form including Country selection which defaulted to Australia. To complete the old form, Australians were to fill out 9 required fields, and 7 optional fields. There was no default value selected for State. Choosing your state was required for all Australians despite that 90% of the registrations were Victorian.
A phone number was a required field. A separate field asked for a mobile number if you wanted to receive SMS notifications of items ready for collection. 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 to enter details easily or accurately. For instance, entering a phone number mandated an additional tap to switch to a numeric keys. The 10 digit buttons across a narrow screen are small touch targets. It was even harder to enter an email address like email@example.com After typing the initial letters, 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 your 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 a 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 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 pre-populate this as the default selection. 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
By changing the HTML input type to “tel” it becomes easier for mobile users to operate a familiar, large button dial keypad to enter their phone number. Additionally, autofill options appearing above the dial pad only need one tap to input your entire phone number.
A checkbox and validation for SMS opt in
Internal data showed when members opted in for SMS notifications, we don’t need a secondary phone number to contact them. Instead of a second phone number for SMS notifications, I changed the design to one phone input and a checkbox. I worked with our developer to create validation code. When the SMS notifications checkbox was checked, validation checks the phone number is in the format of an Australian mobile.
Using input type="email"
By changing the HTML input type to “email” it becomes easier for mobile users to operate a keyboard with an @ symbol, and common .com and .au domain extensions available from a long press on the full stop key. Like phone, email autofill options require just 1 tap. Furthermore, the HTML5 input type=”email” provides basic email address format validation in all modern browsers, not just on mobile. I used all this as a compelling argument to remove the Confirm your email address question.
Outcomes result in a superior joining experience on your mobile
We changed the doctype to HTML5, made a handful of code tweaks, and tested via BrowserStack and on real mobile devices too. Then our developer deployed the changes just in time for the weekend event. Thank you Troy!
In the 6 weeks leading up to deployment, desktop devices continued to reign with 74% of form completions, while mobile had less than 18%. Over the weekend of White Night, nearly 50% of forms were completed on mobile devices.
In terms of time taken to complete the form, this release leveled the playing field across devices. The new form saves mobile users 94 seconds. These mobile form improvements also made the desktop experience faster. Throughout 2017, there were 22,704 join forms completed. If last year’s registrations all used the new form on mobile, we’d save 593 hours!
This year’s event was a trigger to embrace mobile form improvements. These improvements make it faster to complete, easier to fill out, and provide more accurate data. The design principles underpinning these changes persist beyond White Night. No matter where or when, completing the form on your mobile is now a superior experience. The design shift set us on a course for future iterative developments of member registration and innovation in onboarding processes.