Reduce Friction On Your Website – Part 1

frustrated-visitor

Ever been frustrated on a website because something wasn’t right or you weren’t shown where you went wrong in filling up the form? Websites all over the internet are filled with examples where users get frustrated using the site and this increases friction which in turn reduces customer engagement and conversions. In this article, I want to explore some examples of this and what you can do to reduce friction on your site. A happy visitor is an engaged visitor.

This is part 1 of the series.

CREDIT CARD VALIDATION

Extra fields or dropdowns that are not necessarily needed end up causing friction. One such case is the use of a dropdown asking the visitor for a card type as seen on checkouts when paying for goods or services. I don’t really see the need for asking the visitor for a card type as some programming logic can easily determine their card type based on the first few numbers of their card.

Heres an example of how Gumroad figures out the visitors card type

gumroad-card-type

 

Pawel Deckowski designed a Jquery card validator plugin that does the same thing as gumroad and can be used really easily. You can visit the site here http://jquerycreditcardvalidator.com/

FORM VALIDATION

I could write about this all day because there are countless mistakes you can make when implementing forms

No feedback – Imagine you have spent a good five minutes filling up a form and choosing a unique user name and hit submit only to be told that username has already been taken. You’re frustrated and you give up. A solution to this issue would be a live validation feedback mechanism that alerts users in real time whether the field they have just filled in is good or not

Heres an example of how Twitter use it in their forms.

twitter-form-validation

Disappearing form data –  After spending time filling up a form, the last thing you want along with any errors is the entire content of your form disappearing as well. This really shows a lack of empathy for the visitor.

Heres an example of a form thats been refreshed. It brings up errors but now also has removed any data that may have been added in so the errors have increased as evident by the huge red block.

bad-form-validation

 

Top