{"id":338,"date":"2015-07-15T00:00:00","date_gmt":"2015-07-15T00:00:00","guid":{"rendered":"http:\/\/159.89.181.167\/ecommerce-ux-tips\/"},"modified":"2024-09-03T12:00:35","modified_gmt":"2024-09-03T12:00:35","slug":"ecommerce-ux-tips","status":"publish","type":"post","link":"https:\/\/spreecommerce.org\/ecommerce-ux-tips\/","title":{"rendered":"Improve your online store UX with these handy tips"},"content":{"rendered":"<div class=\"article-content__body__content\">\n<p>When it comes to e-commerce, the aim of any site is to direct users into the right places that they need to go and to encourage them to buy a product. Good UX can achieve this in numerous ways. From the way that a signup form is crafted to the colors used in the design, UX can have the effect of boosting conversions.<\/p>\n<p>Bad UX has the opposite effect in that it\u2019s off-putting to the site visitor. Web users have become increasingly sophisticated as the net has matured and is no longer willing to deal with a site that provides a bad experience. In e-commerce sites, this means that they won\u2019t part with their cash to pay for your products if your site UX isn\u2019t up-to-scratch.<\/p>\n<h2>What exactly is UX? (and what it\u2019s not)<\/h2>\n<p>In recent years, we\u2019ve seen a renewed interest in UX (User Experience) take place, thanks largely to the need to design for smaller screens. UX is not always an easy thing to define, so let\u2019s first look at what it is and what it\u2019s not.<\/p>\n<p>UX shouldn\u2019t be confused with usability\u00a0or <a href=\"http:\/\/searchsoa.techtarget.com\/definition\/user-interface\" target=\"_blank\" rel=\"nofollow noopener\"> UI (User Interface)<\/a>. While these disciplines are related to each other, UI is concerned with the actual interface with which the user interacts, while usability is all about how easy to use a site is.<\/p>\n<p><a href=\"http:\/\/www.uxmatters.com\/mt\/archives\/2014\/10\/user-experience-is-a-feeling.php\" target=\"_blank\" rel=\"nofollow noopener\"> UX is all about the <\/a><i>feeling <\/i>that\u00a0a user has when using a site. For example, if a<a href=\"https:\/\/blog.kissmetrics.com\/loading-time\/\" target=\"_blank\" rel=\"nofollow noopener\">\u00a0site is slow to load<\/a>, then the user quickly becomes impatient and frustrated and will leave.<\/p>\n<p>That\u2019s bad UX.<\/p>\n<p>Similarly, if a site doesn\u2019t include white space or contrast, then it becomes more difficult for the user to interact with the site and that too is bad UX. It is quite a broad discipline, but if you get it right, it can have a significant impact on sales in your e-store.<\/p>\n<h2>UX design for e-commerce sites<\/h2>\n<p>There are a huge amount of considerations to undertake when designing an e-commerce site. Make sure you discuss all the necessary issues with your design and developers\u2019 team when planning the site. Here are a few crucial factors to think about.<\/p>\n<h3>Colors<\/h3>\n<p>Again, use brand colors, and contrasting colors to ensure that the text is clear and easy-to-read. You should also bear in mind accessibility\u00a0and consider that people with color blindness will see colors differently. For example, green and red may seem like contrasting colors, but as they appear opposite each other on the color wheel, they appear<a href=\"http:\/\/www.sitepoint.com\/button-ux-red-green\/\" target=\"_blank\" rel=\"nofollow noopener\">\u00a0quite similar<\/a> to people who suffer from colorblindness.<\/p>\n<h3>Buttons and other clickable areas<\/h3>\n<p>These ought to be immediately apparent to the user what they\u2019re for. Remember to keep enough surrounding padding to ensure that buttons or links don\u2019t encroach on other clickable areas that might be next to them. <a href=\"https:\/\/netguru.co\/blog\/4-things-you-should-know-about-a\" target=\"_blank\" rel=\"nofollow noopener\"> Mobile users<\/a> will be using touch, so buttons and links should be large enough for these users to click easily. One more important tip: take a close look at the typography. It should be in keeping with your brand\u2019s personality and should be clear and legible.<\/p>\n<h3>Images<\/h3>\n<p>An image can tell a story all by itself, so make sure yours are high quality but also optimized so that large file sizes don\u2019t<a href=\"https:\/\/netguru.co\/blog\/speed-page-load-owners-developers\" target=\"_blank\" rel=\"nofollow noopener\">\u00a0slow down<\/a> the shopping experience. Include pictures that are clear and representational of the product or service. Also, keep in mind to make your website responsive, so that all visual elements are displayed well to mobile and tablet users.<\/p>\n<h3>White\/negative space<\/h3>\n<p>That\u2019s an important factor many shop owners may consider difficult to digest, but white space is not a waste. It\u2019s for the benefit of a visitor \u2013 you don\u2019t want to get him\/her tired of content overload while browsing your site. White space should be used where appropriate so that the site doesn\u2019t appear cluttered and the central message gets lost. Take a look at this example of <a href=\"https:\/\/spreecommerce.org\/stories\/blue-bottle-coffee-used-spree-to-turn-one-coffee-shop-into-a-700-million-ecommerce-business\/\">Blue Bottle Coffee&#8217;s website<\/a>.<\/p>\n<p><img decoding=\"async\" class=\"size-full wp-image-4948\" src=\"https:\/\/spreecommerce.org\/wp-content\/uploads\/2015\/07\/Blue-Bottle-Coffee-website.png\" alt=\"beautifuly designed website with excellent UX\" width=\"1436\" height=\"2084\" srcset=\"https:\/\/spreecommerce.org\/wp-content\/uploads\/2015\/07\/Blue-Bottle-Coffee-website.png 1436w, https:\/\/spreecommerce.org\/wp-content\/uploads\/2015\/07\/Blue-Bottle-Coffee-website-207x300.png 207w, https:\/\/spreecommerce.org\/wp-content\/uploads\/2015\/07\/Blue-Bottle-Coffee-website-768x1115.png 768w, https:\/\/spreecommerce.org\/wp-content\/uploads\/2015\/07\/Blue-Bottle-Coffee-website-706x1024.png 706w, https:\/\/spreecommerce.org\/wp-content\/uploads\/2015\/07\/Blue-Bottle-Coffee-website-413x600.png 413w, https:\/\/spreecommerce.org\/wp-content\/uploads\/2015\/07\/Blue-Bottle-Coffee-website-1411x2048.png 1411w\" sizes=\"(max-width: 1436px) 100vw, 1436px\" \/><\/p>\n<p>It\u2019s important to remember that conventions (such as navigation being at the top of the page, and logo placed in the left top hand corner) are very useful when designing an e-commerce site. Conventions are design techniques that we\u2019ve become so accustomed to over time that we expect to see them in sites we visit. As such, we look for them when we arrive at a site and if they\u2019re not present, it can throw us to the extent that we leave.<\/p>\n<p>With this in mind, be very careful about breaking <b>conventions<\/b> as it can also effectively \u2018break\u2019 your conversion rate. Whilst it\u2019s sometimes tempting to be highly original and create designs that are a little off the wall, it pays to think carefully about your design choices.<\/p>\n<h3>Do:<\/h3>\n<ul>\n<li>Use <b>appropriate, contextual content<\/b> to enhance checkout flow and products. Provide your customers with concise descriptions, representative pictures from different perspectives, or videos showing your product in action\u2014depending on the item sold. Users should be left with no doubt as to what the product is and what they need to do to buy it.<\/li>\n<\/ul>\n<ul>\n<li>Use <b>different colors<\/b> for buttons with different purposes. You should also use <a href=\"https:\/\/designmodo.com\/color-psychology-web-design\/\">color\u00a0psychology <\/a>to inform your choices and carry out A\/B testing.<\/li>\n<\/ul>\n<h3>Don\u2019t:<\/h3>\n<ul>\n<li>Add so much content that the message is lost and the user is confused. Provide <b>important product data<\/b> first and use accordions or tabs that can be expanded on user action.<\/li>\n<\/ul>\n<ul>\n<li>Use long URLs \u2013 they should appear in the following format: <strong>https:\/\/www.yourshop.com\/category\/product<\/strong> for example\u00a0<strong>https:\/\/www.amazon.com\/George-Martins-Thrones-5-Book-Boxed\/<\/strong><\/li>\n<\/ul>\n<ul>\n<li>Place lots of text around buttons, ensure that there is just enough of <b>negative space.<\/b><\/li>\n<\/ul>\n<h3>Forms and Registration<\/h3>\n<p>It\u2019s important when designing<a href=\"http:\/\/www.smashingmagazine.com\/2011\/11\/08\/extensive-guide-web-form-usability\/\" target=\"_blank\" rel=\"nofollow noopener\">\u00a0forms for user registration<\/a> that they require as little input as possible. Remember that you\u2019re not just targeting desktop users and as such, some visitors will have to fill in forms on mobile. With this in mind, make sure:<\/p>\n<ul>\n<li><b>As few fields as possible are created.<\/b> Only ask for the user information that you need, there\u2019s no reason that you have to know their date of birth, for example. You can ask for more details (address, phone number, etc.) when the customer proceeds to make an order.<\/li>\n<\/ul>\n<ul>\n<li>Form fields are large enough for users to <b>comfortably click into with a finger<\/b>.<\/li>\n<\/ul>\n<ul>\n<li><b>Form labels appear in the right place<\/b> no matter what device it\u2019s viewed on.<\/li>\n<\/ul>\n<p>Reducing the number of form fields can increase conversions by as<a href=\"https:\/\/www.marketingtechblog.com\/infographic-why-having-less-form-fields-drives-conversions\/\" target=\"_blank\" rel=\"nofollow noopener\">\u00a0much as 160%<\/a>, so keep it simple and brief.<\/p>\n<h3>Key Decisions in the Design Process<\/h3>\n<p>When designing UX for e-commerce, the user should be central to every decision that you make. However, it\u2019s important to remember that you are not your user and so you should carry out as much real-world user testing as possible. Consider taking a mobile-first approach too, as it\u2019s much more difficult to pare back a desktop site for mobile than it is to design with mobile in mind from the beginning.<\/p>\n<p>Now you know what factors you should draw attention to when thinking about your e-store\u2019s UX.<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>From the blog of Spree Commerce Certified Partner netguru, check out these handy tips on improving your online store&#8217;s UX<\/p>\n","protected":false},"author":15,"featured_media":4950,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_seopress_robots_primary_cat":"none","_seopress_titles_title":"","_seopress_titles_desc":"","_seopress_robots_index":"","footnotes":""},"categories":[146],"tags":[381,8],"class_list":["post-338","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-open-source-ecommerce","tag-user-experience","tag-ux"],"acf":[],"_links":{"self":[{"href":"https:\/\/spreecommerce.org\/wp-json\/wp\/v2\/posts\/338","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/spreecommerce.org\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/spreecommerce.org\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/spreecommerce.org\/wp-json\/wp\/v2\/users\/15"}],"replies":[{"embeddable":true,"href":"https:\/\/spreecommerce.org\/wp-json\/wp\/v2\/comments?post=338"}],"version-history":[{"count":0,"href":"https:\/\/spreecommerce.org\/wp-json\/wp\/v2\/posts\/338\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/spreecommerce.org\/wp-json\/wp\/v2\/media\/4950"}],"wp:attachment":[{"href":"https:\/\/spreecommerce.org\/wp-json\/wp\/v2\/media?parent=338"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/spreecommerce.org\/wp-json\/wp\/v2\/categories?post=338"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/spreecommerce.org\/wp-json\/wp\/v2\/tags?post=338"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}