Coding and UX are Not the Same, Except When They Are

Web development is not just about development anymore. Gone are the days of plain black text on a plain white background (well, almost). The creation of great websites involves a lot more that just a code monkey working head down in a laptop at your local coffee shop. There are the web designers who come up with how a website should look, the UX designers who come up with how a site should act and feel, and the users who will either love it or hate it. The developer has to think about all of these stakeholders when writing code.

There is a reason why multiple disciplines have sprung up around the web: there is a need for multiple disciplines when creating for the web. Coders, historically, have become so deeply entrenched in making The Code work, that they can easily lose sight of the fact that a less technical, less experienced, or possibly drunk human being has to actually use the product they are coding. This "blinders" effect is so prevalent, that anyone who is not actively checking themselves for its symptons is probably suffering from it. UX designers force coders back into the real world, sometimes kicking and screaming. This shouldn't be the case, though. While code and UX are distinct areas of study with different techniques, they are more closely related than you might think. Consider the case of validating card numbers inputed into a payment form.

There are three mathematic tests to determine if a credit card number is valid. The first and second card number test only require the first few digits of the card number and the length:

| Card Type  | Begins With | Number Length | 
| :--------- | :---------- | :------------ | 
| AMEX       | 34 or 37    | 15            | 
| Discover   | 6011        | 16            | 
| MasterCard | 51-55       | 16            | 
| Visa       | 4           | 13 or 16      | 

The second test requires a quick arithmetic check to see if the sequence of digits is legit:

  1. Starting with the next to last digit and continuing with every other digit going back to the beginning of the card, double the digit.

  2. Sum all doubled and untouched digits in the number.

  3. If that total is a multiple of 10, the number is valid.

An example using a valid (albeit fake) card number:

Card #: 4408 0412 3456 7893

Step 1:  8 4 0 8 0 4 2 2 6 4 10 6 14 8 18 3

Step 2:  8+4+0+8+0+4+2+2+6+4+1+0+6+1+4+8+1+8+3 = 70

Step 3:  70 % 10 == 0  

How does this translate to code? Let's see what our first digits test looks like using some basic JavaScript:

var digits = the+input+card+numbers;  
if (digits.substring(0) == '4') {  
  return "This is a Visa";
} else if (digits.substring(0, 1) == '34' || digits.substring(0, 1) == '37') {
    return "This is an American Express";
} else if (digits.substring(0, 1) <= 55 && digits.substring(0, 1) >= 51) {
    return "This is a MasterCard";
} else if (digits.substring(0, 3) == '6011') {
    return "This is a Discover";
} else {
    return "This is not a valid card number.";
}

And the length test:

if (digits.length == 13 || digits.length == 15 || digits.length == 16) {  
   return "This is a valid length card number"
} else {
   return "Incorrect length, not a valid card number"
}

Finally, the number sequence test:

// Returns the reversed digits as an array
var reversed = digits.split('').reverse();

// Starting with second to last digit, double every other
for (var i = reversed.length - 2; i > 0; i -= 2) {  
    reversed[i] = reversed[i] * 2;
}

var sum = reversed.reduce(function (previousValue, currentValue) {  
    return previousValue + currentValue
}, 0)

if (sum % 10 == 0) {  
    return "This is a valid card number sequence"
} else {
    return "Not a valid sequence"
}

Let's look an example in the wild. Shopify's e-commerce storefronts use a clean design with a simple interface for credit card inputs:

I guess I'll just start typing my number...

...and the site does the rest.

This section implements the first digits test while the user is typing, confirming to the user that it is indeed paying attention. The number length test triggers when the cursor leaves the card number box, and the digit sequence test runs when the user goes to move on to the next step. Helpful, robust, and unobtrusive.

On the other hand, the online yo-yo retailer Yo-Yo USA is an example of a payment page that commits the dreaded Credit Card Type Dropdown sin.

What's wrong with this picture?

The first form handles, in two inputs, what the second form take four inputs to do. This is a non-trivial difference. By ignoring these opportunities to reduce the cognitive load for the user, a large application (like an e-commerce site) will become bloated, hard to navigate, and leave users (and their potential sales) behind. Again, if you are not actively checking for the symptoms, you've already succumb to the problem.

Your web application should follow the principles of Don't Make Me Think: The less brainpower the user has to put into the details, the more the user will get the big picture. Using a web application should not be a DIY roller-coaster journey of self-discovery. It should be painless and intuitive. A web application is a tool to make our lives easier using the power of the Internet. Remember to wield that power in the right way, even if you think that's someone else's job.