7 Tips for Designing a Better Checkout Page

If you’re designing a checkout page, you will find a lot of factors – functionality, usability, security and design. The final element is one thing every designer might have effect on. A checkout page shouldn’t be designed being an afterthought it’s perhaps the most crucial page within the online shopping experience.

Make it Visual

checkout

This might seem as an apparent idea, however the checkout page of the e-commerce page must be visual. A lot of websites transform it into a fundamental form.

This will be significant for many reasons. A visible link between the checkout pages and also the relaxation from the site determines brand credibility. When the checkout page appears like the relaxation from the site, it feels safe and enjoy it goes towards the site. Pictures, from logos to products within the trolley, help customers remember why where they’re around the web. (Remember, much around the globe is really a quite distracted number of internet customers.)

What exactly type of pictures for anyone who is using?

  • Images. At least, every item ought to be supported by a symbol that shows exactly what the user is purchasing.
  • Logos. The organization logo design ought to always be clearly visible (and clickable to return to the relaxation from the site).
  • Large buttons. Call people to action like “Add to Trolley,” “Update Item” and “Buy Now” large, colorful and aesthetically appealing. Buttons ought to be simple to find thus making you wish to click them.
  • Color. A lot of checkout pages are whitened with layed out boxes. It’s Alright to use color. Keep up with the color plan from the relaxation from the website around the checkout page.
  • Typography. Text ought to be easy and simple to see. (People often “trust” simple serif or sans serif typefaces greater than a script or novelty font.) But you may also have a great time with bigger text elements.

Include Payment Logos and Security Seals

Include pictures which make customers feel better about shopping along with you. While it’s almost common knowledge they are able to pay having a charge card online, getting small logos alongside payment buttons stands for this concept.

It’s a little, yet reassuring, visual signal for customers. It can benefit eliminate confusion about what kinds of payment are recognized.

Just be sure you include logos for those payment types. (A lot of sites remember charge card logos but forget PayPal or Apple Pay.) Keep your images small , group them within an organized manner. (Fortunately for designers many of these elements render well in small formats and also have similar aspect ratios.)

Consider designing or installing a niche interface package of logos for this function. You aren’t restricted to stock logos from the organization. Just don’t get too wild using the design the aim is perfect for customers to acknowledge the logos in a really small size on screen.

Consider Enlarging Images

checkout

Checkout pages that permit customers to obtain one last take a look at products within the trolley are a good bonus. Hover effects that enlarge the items within the trolley or perhaps a pop-up can allow customers to determine potential purchases one before and get rid of the frustration of needing to navigate to check one or size.

An alternative choice would be to create extra-large thumbnail images for products around the checkout page. This extra image might help a person confirm is or her shopping choice and feel better still concerning the purchase.

A lot of designers don’t include images whatsoever, which makes it simpler to abandon a trolley. Think about it by doing this, getting a picture at checkout is the same as waiting in the road in a physical store by having an item in hands. Very few people change their mind at this time.

Use Tables

checkout

Information within the trolley must be organized perfectly. The simplest way to do this would be to design the trolley by means of a table or similar power grid-based format.

Use posts and rows to display the items, a picture, description, quantity, cost and then any other relevant information. Products should sort up and down in posts along with other information within the corresponding row. This kind of sorting is important for buggies with multiple products to ensure that customers aren’t made to move across screens rather than up and lower (that is much more comfortable).

Within each table or power grid, use consistent alignment. Left is most typical. Think about the way prices align too to ensure that are simple to see on screen. Ideally prices should fall into line to ensure that the amounts pre and post a period of time have been in exactly the same positions for every item.

Think About Functionality

checkout

While a lot of the general functionality of the checkout page design may not be the directive of the designer, it’s something that should be considered. (Whether designers or designers create these concepts can differ by team.)

Key functionality concerns that require design elements include:

  • Capacity and easy printing from multiple screens, including pre and post checkout.
  • Include wishlist functionality or any other way to save products later on purchase. Make that information shareable.
  • A lot of checkout pages become dark holes without backlinks with other areas of the shopping experience. Don’t lock customers into pages they’re not able to get free from.
  • Allow in-trolley editing of products.
  • Think about a computer invoicing option or page. (This is particularly important in case your clients include business clients.)
  • Allow customers to learn how to modify, change or update orders. Many checkout pages incorporate a quantity counter alongside the items. Make time simple to edit (also it should update instantly).
  • Allow it to be simple to on line after checkout. Its not all customer has looked along with you before. It ought to be fast and simple to buy after which subscribe to a free account. Covert the purchase first.

Key Icons Should Appear on Every Page

checkout

Considering checkout page design, begins the moment the web site concept starts to incorporate an e-commerce option. Certain design elements have to carry through the entire website.

Increase trolley and checkout page symbols ought to be transported through the design. The buttons or navigational elements should have a similar design (or quite similar) because the corresponding action buttons around the checkout page.

7 Tips for Designing a Better Checkout Page

by on 26th November 2014

checkout

With the holiday season right around the corner, many of us will be doing some shopping online. (OK… maybe a lot of shopping!) The checkout page of a website can make that experience one to remember, or one you wish you could forget.

If you are designing a checkout page, there are so many considerations – functionality, usability, security and design. The last element is something every designer can have impact on. A checkout page should not be designed as an afterthought; it is arguably the most important page in the online shopping experience.

Make it Visual

checkout

This may sound like an obvious idea, but the checkout page of an e-commerce page needs to be visual. Too many websites turn it into a basic form.

This is important for several reasons. A visual connection between the checkout pages and the rest of the site establishes brand credibility. If the checkout page looks like the rest of the site, it feels safe and like it belongs to the site. Visuals, from logos to items in the cart, help users remember why and where they are on the web. (Remember, much of the world is a quite distracted group of internet users.)

So what kind of visuals should you be using?

  • Images. At a minimum, every item should be accompanied by an icon that shows what the user is buying.
  • Logos. The company logo should always be clearly visible (and clickable to get back to the rest of the site).
  • Big buttons. Make calls to action like “Add to Cart,” “Update Item” and “Buy Now” large, colorful and visually appealing. Buttons should be easy to find and make you want to click them.
  • Color. Too many checkout pages are all white with outlined boxes. It is OK to use color. Maintain the color scheme of the rest of the website on the checkout page.
  • Typography. Text should be simple and easy to read. (People tend to “trust” simple serif or sans serif typefaces more than a script or novelty font.) But you can also have some fun with larger text elements.

Include Payment Logos and Security Seals

Include visuals that make users feel good about shopping with you. While most people understand they can pay with a credit card online, having small logos next to payment buttons reinforces this idea.

It’s a small, yet reassuring, visual cue for users. It can help eliminate confusion about what types of payment are accepted.

Just remember to include logos for all payment types. (Too many sites remember credit card logos but forget PayPal or Apple Pay.) Keep the images small and group them in an organized manner. (Thankfully for designers most of these elements render well in small formats and have similar aspect ratios.)

Consider designing or downloading a specialty user interface kit of logos for this purpose. You are not limited to stock logos from the company. Just don’t get too wild with the design; the goal is for users to recognize the logos at a very small size on the screen.

Consider Enlarging Images

checkout

Checkout pages that allow users to get one last look at items in the cart are a great bonus. Hover effects that enlarge each item in the cart or a pop-up can make it easy for users to see potential purchases one last time and eliminate the frustration of having to navigate back to check a color or size.

Another option is to create oversized thumbnail images for items on the checkout page. This additional image can help a user confirm is or her shopping choice and feel even better about the purchase.

Too many designers neglect to include images at all, making it easier to abandon a cart. Think of it this way, having an image at checkout is equivalent to standing in the line at a physical store with an item in hand. Not many people change their mind at this point.

Use Tables

checkout

Information in the cart needs to be organized to perfection. The easiest way to achieve this is to design the cart in the form of a table or similar grid-based format.

Use columns and rows to display each item, an image, description, quantity, price and any other relevant information. Items should sort vertically in columns with other information in the corresponding row. This style of sorting is essential for carts with multiple items so that users are not forced to move across screens instead of up and down (which is more comfortable).

Within each table or grid, use consistent alignment. Left is most common. Consider the way prices align as well so that are easy to see on the screen. Ideally prices should line up so that the numbers before and after a period are in the same positions for each item.

Think About Functionality

checkout

While much of the overall functionality of a checkout page design might not be the directive of a designer, it is something that needs to be considered. (Whether designers or developers create these concepts can vary by team.)

Key functionality concerns that need design elements include:

  • Capability and ease of printing from multiple screens, including before and after checkout.
  • Include wishlist functionality or another method to save items for later purchase. Make that information shareable.
  • Too many checkout pages become dark holes without links back to other parts of the shopping experience. Don’t lock users into pages they can’t get out of.
  • Allow in-cart editing of items.
  • Consider a printable invoicing option or page. (This is especially important if your customers include business clients.)
  • Make it easy for users to understand how to modify, change or update orders. Many checkout pages include a quantity counter next to each item. Make that number easy to edit (and it should update automatically).
  • Make it easy to create an account after checkout. Not every customer has shopped with you before. It should be quick and easy to make a purchase and then sign up for an account. Covert the sale first.

Key Icons Should Appear on Every Page

checkout

Thinking about checkout page design, starts the minute the website concept begins to include an e-commerce option. Certain design elements need to carry throughout the entire website.

Add to cart and checkout page icons should be carried throughout the design. The buttons or navigational elements should have the same design (or quite similar) as the corresponding action buttons on the checkout page.

Remember Mobile Users

checkout

An increasing number of sales are happening on mobile products instead of desktop computer systems. Consider the design of the checkout page and simplicity of use of these clients too. (There is nothing more frustrating – and all sorts of too common – than the usual site that creates a phone before the checkout page.)

Design elements with tap and swipe in your mind. Buttons ought to be bigger and simpler to determine. Form will include much deeper boxes to ensure that they are simple to make use of without needing to zoom the screen in.

If this involves mobile customers, keeping everything on one page is every bit important. Produce a checkout page that scrolls instead of flicks through multiple screens.

Leave a Reply