Now for another episode of Sarah on User eXperience (SUX)…
As many of you know, I am a mom – I have two boys who are going to be 3 and 1 very shortly. I have one in diapers full-time and one who is almost completely potty trained. I’m a Pampers consumer, through and through. Their diapers and wipes have been pretty solid for me.
From a tech perspective, I’ve found their website to be a bit troubling at times. I think the part that frustrates me the most is when I enter a code in a textbox for their Gifts to Grow program. While I love earning points to redeem them for Shutterfly photo books, I get extremely apprehensive when I log into their website. This is the problem that plagues me.
Let’s say I have a code to enter. This morning, I tried entering: W6H9PRT66J4PG7. There’s a problem though… I’m missing a J between the 6 and H. In theory, I should be able to put my mouse cursor at that spot, type the J, and be done. That’s an ideal world. However, that doesn’t work – any time I tried to click somewhere, it kept moving me to the end of the textbox. This is a horrible user experience smell.
But the web developer me is really curious. What kind of JavaScript are they tying to these textboxes, causing this headache? So I did some looking around…
<input id="gtgRedeem:gtgCode1" type="text" name="gtgRedeem:gtgCode1" class="codeClass" maxlength="15" onblur="jsf.util.chain(this,event,'convertup(\'gtgCode1\')','mojarra.ab(this,event,\'blur\',\'@this\',\'gtgRedeem:gtgCode1Message gtgRedeem:js1\')')" onclick="convertup('gtgCode1')" onkeydown="convertup('gtgCode1')" onkeyup="convertup('gtgCode1')" tabindex="2" style="font-style: italic;">
So that’s how many JavaScript events causing this?
- onblur
- onclick
- onkeydown
- onkeyup
4 JavaScript events that could be screwing things up. I’ll pretend I don’t see those Mojarra JSF references there. It looks like the problem boils down to this convertup function. Let’s see what that is…
function convertup(gtgtext) {
var fieldSelector = “#gtgRedeem\\:”+gtgtext;
var defaultval=$(fieldSelector).val();
if(defaultval == ‘Enter 15-Digit Code Here’ || defaultval == ” || defaultval == null){
$(fieldSelector).css(‘font-style’, ‘italic’);
}
else{
$(fieldSelector).css(‘font-style’, ‘normal’);
var upperVal=$(fieldSelector).val().toUpperCase();
$(fieldSelector).val(upperVal);
}
}Resetting the value keeps moving the cursor back to the end of the textbox. This is where the problem lies. This is getting called on every blur, every click, every keyup, and every keydown for this textbox. So every action I take is firing off a JavaScript event that makes it impossible for me to put my cursor between that 6 and H.
How do we make this more user-friendly?
First of all, let’s get rid of some of these JavaScript events. Do you really need to change the code to upper on every blur, click, keyup, and keydown?
Ideally, from a developer perspective, it makes more sense to let the server side handle changing the code to UPPERCASE before it checks to see if the code is valid and has been used. If you really want the front-end to handle the uppercasing, handle it once onblur.
This has been a very frustrating experience. I’m thankful I’m a technical person, as I can only imagine the non-technical parents out there who are experiencing the same frustrations. Being technical, I can at least explain why their site sucks and how to improve it. Now let’s hope that something positive can come from this!