Optimize UX to increase sales

1. Move the Zip Code field above City and State fields, then use JavaScript and a static lookup file to automatically fill in the city and state once the user adds their zip code.

Move the cursor to the next required field after populating the city and state, to avoid potential keystroke errors by the shopper. Add simple language next to the zip code field such as “your city and state will be automatically added” to signal users and manage user expectations. This can also help to avoid ‘address match’ penalties charged by shipping companies. For example, small changes on the one-page checkout at TrafficSafetyStore.com contributed to a 38.74% increase in conversion rate, an additional 110 orders, and also a boost in revenue following the implementation of this small change.

2. Automatically select the cheapest shipping method by default, but make it easy for shoppers to pick another method.

You can also display all other shipping methods to allow quick comparisons. Ensure that shoppers can see and verify that the option selected is the least expensive. Let shoppers know that you understand they are looking for the best value for their money, by making the lowest cost option the default one.

3. Save user data like past orders and order history, to prefill as much checkout information as possible.

Show users that you care about their time and can provide a full picture of their order history. This is especially useful for older orders as users won’t waste time searching them all over again. Display saved orders in chronological order.

4. Store credit card details to significantly increase the velocity of purchases, especially from mobile devices.

Encrypt all client-side authorization data behind a secure socket layer so that you don’t need to ask shoppers to re-enter this data. For example, when you open a promotional email from Amazon, you see either items that are recommended based on your buying profile and recent behavior, or items that you recently looked at but didn’t purchase. If you decide you want to make a purchase, the only information Amazon requires is your password.

5. Cache form data, so shoppers don't have to retype it if they need to refresh or a validation error occurs.

Scrutinize interface components and language to make sure errors are easily handled, and that everything in the ordering process looks clear and simple. For example, if the user forgets to enter their credit card information and email address before clicking the submit button, the form has cached all the information entered, so they can simply fix the validation error. Contrast this with a non-cached form, where the form is blanked, so the user has to start entering information all over again.

6. Use a ‘same as billing address’ checkbox to allow for quick fill of a user's shipping address.

Using this easy option can bump up the rate of completed transactions by more than 10% in the first week.

7. Highlight errors using yellow or orange rather than red, and avoid negative trigger words like failed, problem, wrong, invalid, and prohibited.

Replace messages like “Oops, there was an error,” with, “Please fill in a valid email address.” This is more specific and avoids negative trigger words. Avoid using red to highlight errors as psychological studies suggest that it provokes ‘intense’ and ‘alarming’ reactions.

8. Sort site navigational elements by popularity from left to right and from top to bottom, to make it easier for customers to find your most in-demand products or pages.

Note that this will vary for different languages, any shoppers used to right-to-left script will probably need a different layout. Research suggests that reading on computer screens is tiring for the eyes and about 25% slower than reading on paper and that 79% of web users scan rather than read. Bear in mind these percentages when you arrange important components of your ecommerce website to leverage this behavior. For instance, the Traffic Safety Store changed their navigation to make it as easy as possible for shoppers to browse the most popular product categories. Traffic cones were highlighted first as most popular, followed by other most popular product categories in descending order. The page’s layout used a combination of historical sales data and projected product category goals. Follow up improvements considered increasing the top-line sales for two additional products that shoppers could look for as they scan vertically down the navigation. The online retailer mirrored this approach on sub-category pages from left to right as well. The overall effort helped with over 30% increase in the quantity of traffic within a week after making the changes, and an almost 25% increase in product revenue.

9. Use platforms such as UserTesting.com to collect actual user behavior data through both click-tracking, and recorded user tests to further improve the site design.

10. Adjust form field length to match the expected length of input to help cut down on a user's subconscious perception that the form is long and time-consuming.