The Perils of Cognitive Load

One of the tentpoles of a great user experience is figuring out how to strip away the unnecessary and present a great interface that contains the bare minimum of what we need from the user.   People will make snap-judgements about the perceived complexity of an interface or form, and if you’re not careful in presenting your information and metering out your interface, it can look like too much work.  They may abandon the task until they have more time, or abandon it all together – two scenarios we’d like to prevent.

Quick example: Customer name fields.  

Typically, when filling out a form, you encounter a “First Name” field, and then a “Last Name” field.  Databases LOVE data formatted this way.  Human beings that have to mentally and visually parse the amount of information required to fill out a form?  Not so much.  You can simplify that part of your form 100% by just requiring a “Enter your name” field and parsing out the first name and the last name for your database behind the scenes.  Database is happy, and the user has a more simplified form to fill out.  Removing a single form field might not seem like much, but if you make a dozen decisions like this across your entire product, it adds up to a big difference.

Here’s a longer example, one you’ve probably seen if you’ve purchased anything on the internet, ever: 

You’ll notice that this site is asking the customer to select their credit card number, and then enter their name, the number itself, the expiration date, and their security code.   There are quite a few things that are actually unnecessary here, and stripping them out creates an experience for the customer that requires far less thinking about what they need to fill out.

Every credit card company has a unique numbering structure, and your form can be easily configured to auto-sense it, making the choice of credit cards unnecessary.  It’s still a good idea to show the payment methods you DO accept, and we’ll get into that in the next example.

Now, the cardholder’s name – in most situations, great news – you already have that information!  The customer has likely already given their name earlier in the checkout.   Someone using a credit card that isn’t in their name is an edge case, not a common case.  You can safely infer that the name of the person filling out the form is most likely the name on the card.  If it isn’t, that’s a problem that’s easy to solve with a small interface addition that allows the customer to let you know they need to enter a different name.

Expiration date and the security code are necessary, but we’re giving them both far too much real estate here.

Let’s take a look at another example: 

Looks like a simpler, friendlier form, doesn’t it?   The heavier interface we saw in the prior example is gone, in favor of a simpler interface that only requires three things from the customer.  The credit card logos are here, but they are informational only and only serve as indicators of both what payment methods the site accepts, as well as an indication of which card being used after the form is filled out.   You can make them interactive if you like – some users will definitely click on them to select which card they’re using – the only thing  you’ll have to consider is how to alert the user when their selection doesn’t match the card number they’ve entered.  But I definitely recommend giving the user some interactive feedback if they want to click on an element that looks like it could be a choice.

The more opportunities you can find to reduce the visual and mental load you’re presenting to your user, the more usable your product can be.  Never stop thinking about an easier way to collect that piece of information, or a more elegant way to present a form.  Users love it, and your conversion rates will be the proof.