Usability on Section School Sign Up flow. #Usabilityshorts
Let’s look into it step by step.
1: When I initially visited the website on my phone, the first prompt I encountered was “SIGN UP FOR FREE ACCESS”. (In hindsight, this was Step 1)
2: Next, I progressed to step 2/2 (That’s why I knew previous was step 1, The FIDT Effect). Here I was asked to give more details.
At this stage, the friction began to arise.
3: There are two mandatory fields labeled “First name” and “Last name,” indicated by asterisks (*) solely on these two fields. The rest of the fields are presented as optional.
4: Finally, after completing the necessary fields, I proceeded to hit the “Submit” button.
Feeling puzzled, despite being a tech-savvy user, I found myself unsure about what might be wrong. Assuming there might be an issue with the backend services, I instinctively clicked on the “SUBMIT” button once more.
NOTHING…Absolutely nothing changed.
Let’s a step back and look at the intent.
I aimed to sign up swiftly with minimal input required from my end, seeking quick access to the website for exploring the available courses.
I wanted to resolve this ASAP. So I ended up filling all the remaining information in the form.
And boo-yay… Form successfully submitted.
MY ASSUMPTION: All the fields were required. And hence it was preventing me from submitting the form.
Usability Problems:
1: Missing error state for the form fields.
2: Except first 2 fields no other fields signifies that they are mandatory.
3: Inconsistent use of asterisks (*) to indicate the required fields as some of the fields are missing it.
WRONG…I mean partially WRONG.
All the aforementioned issues were apparent, yet upon closer examination, I realized the usability problems were multi-faceted, extending several layers deep.
Now, I’ve switched hats — from being an end user to adopting the role of a UX designer — to delve further into understanding the root causes of these challenges.
Let’s look in the following two scenarios.
1: Before Submitting
The website’s approach to signify the users about mandatory fields before submitting is to use asterisk (*), which is a common and clear approach adopted across the web.
No issues here.
But problem it with the inconsistent use of asterisk mark (*). However, the inconsistency arises from not applying the asterisk mark (*) uniformly across all required fields.
By ensuring consistent use of the asterisk mark (*) to signify mandatory fields, this issue could be mitigated to a significant extent.
Unusual Observation: Only input type form fields have * where are it’s missing for selection type form fields(Dropdown).
After Submitting
Another approach they are using is giving feedback to the user’s after submitting. It’s an industry standard. There is no down side to use tool tips. But the way it is designed it’s not useful to the end user. Because of the following reasons.
As you see in the screenshot below, sequentially a tooltip comes up on the field indicating “Select an item in the list” in the order of required fields.
It’s good to give a feedback this way, provided it’s implemented in a right way.
Issues with Tooltip
1: On web browser, the tooltip is not persistent. It goes away in ~6 seconds.
2: On mobile browsers, not all form fields are immediately visible. When users tap “SUBMIT,” tooltips for required fields appear. However, due to scrolling or tapping, these tooltips vanish, leaving users uncertain about mandatory fields. As a result, there’s poor discoverability, hindering the overall user experience leaving user in a limbo.
Subtle changes leading to major improvements.
Implementing minor adjustments can result in substantial enhancements to the overall user experience. Let’s look into same scenarios discussed above.
1: Before user interacts with submit button.
<select id="job_level_v" name="job_level_v1" data-name="job_level_v1" required="" class="s4-form__text-3 w-select">
<option value="">Job level*</option>
<option value="associate_staff">Associate/Staff</option>
.
.
</select>Solution: Consistent use of asterisk mark (*) for all the required fields. Regardless of the type of the field.
Benefit: No more guess work. Clears the expectations from the get go.
This takes care of SIGNIFIERS and SYSTEM STATE of the website.
Now a contingency plan in place in case users overlook the signifiers.
2: After user interacts with submit button.
Solution: Introduction of an Error State. Highlight mandatory fields with color, icon and help text if possible.
Benefit: System state is persistent and clear. Also, it is externally consistent with standard practices observed across various web form experiences. Therefore, users don’t require additional learning to input details, as the process is familiar and straightforward. Moreover, highlighting all necessary fields simultaneously helps manage user expectations, ensuring an intuitive signup process.
Solution: Persist the tooltip. In interaction design, the suggestion is to maintain the tooltip until the respective field enters the “focus” state, which occurs when the user clicks or taps on the field to engage with it.
Benefit: It’s already there. The existing solution already incorporates this feature, requiring no additional “man-hours” for implementation. This approach also addresses the issue of fields being out of the viewport, as the persistent tooltip will clearly indicate which field requires attention. Consequently, this aids in reducing cognitive load by offering users clear guidance.
This takes care of FEEDBACK and SYSTEM STATE of the website.
Conclusion
Addressing fundamental usability principles provides an easy way to significantly enhance user experience. And so I wonder as to why these basics are often overlooked. Is this a dark pattern, so that the end user is forced to enter all the details(like in my case)? Why do we prioritize investing extensive efforts into AI without first addressing existing issues? This scenario is just one instance among numerous websites that require attention, yet it’s surprising that there seems to be no focus on rectifying these issues.
This leaves me wondering why this is the case…
